Desarrollo de Aplicaciones Web

7/17/2019 Desarrollo de Aplicaciones Web

http://slidepdf.com/reader/full/desarrollo-de-aplicaciones-web-569057c977411 1/99

Jeisson Hidalgo-CéspedesVersión 0.2.8. 2011-Dic-13

Tabla de contenidos

1 Introducción a la tecnología web

1.1 Historia1.1.1 La primera guerra de navegadores1.1.2 El proceso de estandarización1.1.3 La segunda guerra de navegadores1.1.4 Notas

1.2 Arquitectura web1.2.1 El servidor web1.2.2 El cliente web o navegador web1.2.3 El localizador uniforme de recursos URL1.2.4 El protocolo de transferencia de hipertexto HTTP

1.2.4.1 El mensaje HTTP 1.2.4.2 Request line1.2.4.3 Request header 1.2.4.4 Emtpy line1.2.4.5 Message body 1.2.4.6 Status line1.2.4.7 Response header

1.2.5 Ejemplo de una sesión HTTP

1.3 Proceso de construcción del sitio web1.3.1 Diseño del sitio web1.3.2 Alojamiento web1.3.3 Registro de dominio1.3.4 Construcción del contenido1.3.5 Promoción del sitio web

2 El lenguaje de marcado extensible XML

2.1 Conceptos

2.2 Sintaxis general de XML2.2.1 El prólogo de documento

2.2.1.1 La declaración XML2.2.1.2 La declaración del tipo de documento

2.2.2 Marcado misceláneo2.2.3 Semántica de los elementos XML

2.3 La definición del tipo de documento (DTD)2.3.1 Declaraciones de tipo de elemento2.3.2 Declaraciones de la lista de atributos2.3.3 Elementos versus atributos2.3.4 Entidades XML

2.4 Espacios de nombres (namespaces)

2.5 La familia de tecnologías XML2.5.1 Modelaje y validación avanzada2.5.2 Ligar y apuntar2.5.3 Interfaces de programación

2.6 El lenguaje extensible de hojas de estilo (XSL)

rollo de aplicaciones web file:///C:/Users/Iván/Desktop/Desarrollo de aplicaciones web/De

99 22/09/2015 1



2.6.1 Transformaciones XSL (XSLT)2.6.2 Formateo de objetos (XSL-FO)

3 El lenguaje de marcado de hipertexto (X)HTML

3.1 Estructura global3.1.1 La declaración del tipo de documento3.1.2 El elemento documento3.1.3 Encabezado del documento3.1.4 Cuerpo del documento

3.2 Elementos de texto3.2.1 Encabezados de secciones3.2.2 Párrafos3.2.3 Texto estructurado3.2.4 Listas

3.3 Enlaces3.3.1 Anclas3.3.2 Ventana objetivo3.3.3 Acceso con el teclado

3.4 Imágenes3.4.1 Tamaños de imagen3.4.2 Formatos de imágenes3.4.3 Icono de favoritos

3.5 Tablas

3.6 Formularios

3.7 Objetos multimedia

3.8 Elementos genéricos

4 Hojas de estilo en cascada CSS

4.1 Generalidades de las hojas de estilo4.1.1 Ubicación de las reglas de estilo4.1.2 El principio de cascada4.1.3 El operador @

4.2 Selectores

4.3 Valores de propiedades

4.4 Propiedades4.4.1 El modelo de fuente4.4.2 El modelo de color4.4.3 El modelo de caja4.4.4 El modelo de visualización

5 Comportamiento con JavaScript

5.1 Generalidades

5.1.1 Código JavaScript en el elemento scr i pt5.1.2 Código JavaScript en un archivo externo5.1.3 Código JavaScript en los eventos intrínsecos5.1.4 Código JavaScript en el pseudoprotocolo j avascr i pt :

5.2 Tipos de datos y variables5.2.1 Números5.2.2 Cadenas de caracteres (strings)5.2.3 Conversiones entre números y strings5.2.4 Booleanos5.2.5 Funciones5.2.6 Objetos5.2.7 Arreglos5.2.8 Valores especiales5.2.9 Objetos especiales


99 22/09/2015 1



5.2.10 Por valor o por referencia5.2.11 Variables

5.3 Expresiones5.3.1 Operadores5.3.2 Sentencias

5.4 Arreglos y funciones como objetos5.4.1 Propiedades de Obj ect

5.4.2 Propiedades de Array5.4.3 Propiedades de Funct i on

5.5 Pseudoclases

5.6 Programación del navegador5.6.1 El ambiente de desarrollo del navegador

5.6.1.1 El modelo de ejecución de JavaScript 5.6.1.2 Consideraciones de seguridad

5.6.2 El objeto wi ndow

5.6.2.1 Temporizadores y animaciones5.6.2.2 Información del navegador, la ventana y la pantalla5.6.2.3 Abrir y manipular ventanas5.6.2.4 Ubicación del documento5.6.2.5 Cuadros de diálogo

5.6.3 El objeto document5.6.3.1 El modelo de objetos del documento (DOM)5.6.3.2 Localizar elementos en el documento

5.6.3.3 Manejo de eventos

6 El servidor web

6.1 Instalación y ejecución del servidor web

6.2 Configuración del servidor web6.2.1 La directiva i ncl ude6.2.2 El módulo HTTP Core

6.2.2.1 Servidores virtuales6.2.2.2 El bloque location

6.2.2.3 MIME types6.2.3 Server Side Includes module6.2.4 CGI y FastCGI6.2.5 PHP a través de FastCGI

7 Programación del servidor web: PHP

7.1 El lenguaje de programación PHP7.1.1 Ambientes de producción y desarrollo7.1.2 Generalidades del lenguaje PHP7.1.3 Tipos de datos7.1.4 Operadores7.1.5 Control de flujo7.1.6 Arreglos7.1.7 Funciones7.1.8 Reglas de alcance de variables (variable scope)7.1.9 Objetos

7.2 Manejo de archivos7.3 Bases de datos

7.3.1 Funciones para acceder a MySQL7.3.2 Objetos para acceder a la base de datos

7.4 Formularios web7.4.1 El método GET7.4.2 El método POST7.4.3 Seguridad y validación de datos7.4.4 Controles en el formulario7.4.5 Validación de datos con JavaScript

8 Bibliografía


99 22/09/2015 1



1 Introducción a la tecnología web

De todas las aplicaciones que se han construido sobre Internet, la World Wide Web (WWW o simplemente web) ha sido lamás popular, tanto que, muchas personas cuando escuchan el término "Internet" realmente imaginan la web. La web puededefinirse como un sistema de documentos de hipertexto interrelacionados entre sí y accesibles a través de Internet. Se diceque son documentos de hipertexto o hipermedios, por su capacidad de contener diferentes medios de comunicación: texto,imágenes, sonido, vídeo, enlaces, etc.

La popularidad de la web puede adjudicarse a su facilidad de uso y por ser el más exitoso de los sistemas distribuidos en laactualidad. Los documentos se almacenan en computadoras distintas, con sistemas operativos diversos, generados defuentes heterogéneas, pero esto es transparente para el usuario. De hecho, para el usuario todos los documentos del mundo

parecen ser parte de un único sistema, lo cual es fundamento de lo que se define como un sistema distribuido.

1.1 Historia

La web fue conceptualizada en un artículo de 1989 de Tim Berners-Lee, quien se convertiría en uno de sus grandes líderes.A finales de 1990, Berners-Lee desarrolló el Protocolo de transferencia de hipertexto (HTTP, HyperText Transfer Protocol), elprimer servidor web llamado CERN- ht t pd; el primer navegador llamado Wor l dWi deWeb, que también era un editor web; el

lenguaje de marcado de hipertexto (HTML, HyperText Markup Language); y las primeras páginas web que hablaban sobre elproyecto mismo.

La aparición pública de la web fue en 1991, cuando Berners-Lee describió el proyecto en un grupo de noticias (Usenetnewsgroup). Había nacido un mecanismo eficiente que permite a cualquiera ser autor, compartir material de interés almundo, y hacer referencia al existente a través de hiper-enlaces.

La difusión de la web fue lenta. Inicialmente fue adoptada por universidades y grupos científicos. Los documentos web eranmuy sencillos y la mayoría de navegadores corrían en modo texto, unos pocos eran gráficos como el escrito por Berners-Leeen una NeXT. Desde 1992 muchos navegadores se construyeron, pero el más influyente de todos fue Mosaic.

En 1993 el National Center for Supercomputing Applications (NCSA) de la University of Illinois en Urbana-Champaign(UIUC), introdujo el navegador gráfico Mosaic , como un proyecto de investigación. NCSA licitaba su código fuente a otrascompañías para que crearan sus propios navegadores, incluso comerciales. Tras de graduarse, el líder del proyecto Mosaic,Marc Andreessen, fundaría la compañía Netscape en 1994, para comercializar su navegador Netscape Navigator, el cualcorría transparentemente entre diversos sistemas operativos. Era gratis para uso no comercial, por lo que se convirtió en elnavegador más usado del mundo.

En 1994 Berners-Lee funda el World Wide Web Consortium (W3C) en el Instituto Tecnológico de Massachusetts (MIT,Massachusetts Institute of Technology), apoyado por varias instituciones y empresas con el fin de crear estándares yrecomendaciones para mejorar la calidad de la web.

1.1.1 La primera guerra de navegadores

En 1995 Microsoft incluye Internet Explorer 1.0 en Windows 95, basado en código fuente de NCSA Mosaic. La versión 2.0fue gratuita incluso para uso comercial. Lentamente Internet Explorer va tomando popularidad y mercado de Netscape, loque generaría la primera guerra de navegadores.

Los ataques entre estos dos navegadores consistían en la inclusión de funcionalidades novedosas para atraer tanto usuarioscomo autores de sitios web. Por ejemplo, Netscape desarrolló JavaScript a finales de 1995, que un año más tarde seríaimitado por el JScript de Microsoft, en la versión 3 de Internet Explorer. En esa versión particular, Microsoft incluyó unaparcial implementación de las hojas de estilo en cascada (CSS, Cascading Style Sheets) sugeridas por el W3C pero aún noestandarizadas.

En 1997 Netscape fusionó su Netscape Navigator con otro conjunto de programas para correo electrónico, composición web,calendario, etc. Al suite se le l lamó Netscape Communicator, nombre que serviría para confusiones. Microsoft integróInternet Explorer 4 con Windows y desalentó desde el sistema operativo el uso de cualquier otro navegador. Netscape no

compitió contra esto, ni tenía sentido. Desde 1998 el 80% del mercado que tenía Netscape pasó a sumar el 96% que teníaInternet Explorer 5 en el 2002. La guerra de los navegadores había finalizado y también el rápido tren de innovaciones; tanevidente que Microsoft no volvería a hacer cambios significativos en su navegador desde el 2001 al 2006.

A inicios de 1998 Netscape libera el código fuente de Netscape Communicator 4.0 en el proyecto Mozilla. La comunidaddescartaría luego dicho código debido a su complejidad, poca modularización, al gran volumen de pulgas y otrosinconvenientes; y empezó la elaboración de un nuevo motor de navegador (web browser engine) hecho desde cero, al cualse le llamó, Gecko, y sería el motor de "rendering" de Firefox y el nuevo Netscape Communicator, que finalmente seríadescontinuado a inicios del 2008.

1.1.2 El proceso de estandarización

La guerra de navegadores (aproximadamente de 1995 a 1998) también tuvo consecuencias muy negativas. Ambos,Netscape Navigator e Internet Explorer, ofrecían características novedosas incompatibles entre sí, es decir, dialectos de


99 22/09/2015 1



HTML distintos que provocaron que los autores de millones de páginas tuvieran que escoger por uno o el otro. Era comúnver imágenes indicando que el sitio se veía mejor con un navegador particular, incluso hasta de una versión específica.

Mientras tanto el proceso de estandarización avanzaba lentamente. En junio de 1993 el Consorcio Web (W3C) proponevarios borradores de estandarización y en noviembre de 1995, la Internet Engineering Task Force (IETF) aprueba el HTML2.0 que luego se convertiría en estándar internacional en 1997. El W3C propone HTML 3.0 en abril de 1995 pero la IETF norealiza ninguna acción. Los navegadores tomarán luego ideas de estas iniciativas en proceso y las implementarán a sumanera para atraer usuarios.

A inicios de 1997 la IETF traslada la responsabilidad de estandarización al W3C, quien publicaría recomendaciones con unaeficiencia mayor. Se publica el HTML 3.2 adoptando etiquetas y atributos de marcado visual de Netscape (como <b> y<f ont >). A final del mismo año, el W3C presenta el trabajo de estandarización más notorio hasta la fecha, conocido como

HTML 4.0. Un esfuerzo que considera las extensiones derivadas de la guerra de navegadores y las raíces del HTML. En ella,las etiquetas de marcado visual serían desaprobadas ("deprecated") en favor de CSS; pero su uso se había difundido tantoque el W3C decidió generar tres variaciones del HTML 4.0:

HTML 4.0 Strict. Prohíbe elementos "deprecated".

HTML 4.0 Transitional. Permite elementos "deprecated".

HTML 4.0 Frameset. Permite construir páginas basadas en "frames", con los elementos <f r ameset > y <f r ame>.

Dos años después, a finales de 1999, se le haría una ligera modificación al estándar HTML 4.01, cuya variación estricta(HTML 4.01 Strict) sería adoptado como estándar internacional (ISO/EIC 15445:2000), suplantando la versión 2.0 de 1997.Tras ello, el trabajo de estandarización dejaría de lado al HTML para concentrarse en el XHTML.

En febrero de 1998 el W3C publicó el estándar XML (Extensible Markup Language). En enero de 2000 se reformuló HTML4.01 como una aplicación XML en lo que conoce como XHTML 1.0. Una actualización XHTML 1.1 se emitió comorecomendación en mayo de 2001 que permite modularizar el HTML para necesidades específicas, las más sobresalientes han

sido XHTML-Basic que incluye el conjunto mínimo de características que cualquier navegador debe soportar, incluso dedispositivos móviles y XHTML-MP (mobile profile) con controles aptos para dispositivos móviles.

Entre agosto de 2002 y julio de 2006, el W3C trabajó en XHTML 2.0 que sólo alcanzó el nivel de notas y no derecomendación. En el 2008 el W3C consideraría como base del futuro (X)HTML[1] 5.0, un borrador l lamado (X)HTML5desarrollado por un grupo de interesados, compuesto principalmente por fabricantes de navegadores alternativos (MozillaFoundation, Opera Software y Apple), ajenos al W3C, que se autodenominaron WHATWG (Web Hypertext ApplicationTechnology Working Group). A diferencia de XHTML 2.0, (X)HTML5 estaría más centrado en el desarrollo de aplicacionesweb y no en la especificación de documentos.

1.1.3 La segunda guerra de navegadores

Los navegadores en guerra tuvieron equipos de desarrollo enfocados en agregar funcionalidad no estandarizada tan rápidocomo fuese posible, con poco control de calidad. Esto llevó a que ambos navegadores, Netscape Navigator e InternetExplorer no se apegaran a los estándares, fuesen "pulgosos" e inseguros. Pese de hacerlo público, el código fuente de

Netscape fue descartado por la Fundación Mozilla. Por su parte, Microsoft tras ganar la guerra, mantuvo su navegador en elletargo por varios años.

Un navegador no mencionado es Opera. Inició en 1994 como un proyecto de investigación de la compañía noruega Telenor ydisponible al público desde 1996 en forma comercial o gratuito con publicidad; hasta la versión 8.5 en setiembre de 2005,en que se distribuye sin costo ni publicidad alguna. Se caracterizó por ser el primer navegador en apegarse a losestándares, influir activamente en ellos, y en la inclusión de características amigables para el usuario, por ejemplo, el usode "tabs", "mouse gestures", velocidad, seguridad y correr en dispositivos móviles.

La Fundación Mozilla siguió estas características en su navegador gratuito Firefox. Con el objetivo de crear nuevosestándares web que serían sometidos al W3C para aprobación, la Fundación Mozilla y Opera Software fundaron en el 2004el grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group), al cual se uniría Appleposteriormente.

Las primeras versiones del navegador de Mozilla aparecieron a finales del 2002, con nombres que después serían cambiadospor conflictos con otras compañías, hasta quedar de Firefox, el cual se l iberó en noviembre de 2004. Desde el 2003 MozillaFirefox empezó lentamente a atraer usuarios de Internet Explorer, en especial por sus problemas y la falta de iniciativa deMicrosoft por corregirlos.

Microsoft reaccionó hasta octubre de 2006 con Internet Explorer 7, imitando características de Opera y Firefox. Esto nologró detener la creciente tasa de usuarios que seguían cambiando a Firefox. Por su parte, una semana después, Mozillaliberó Firefox 2.0 con mejoras de usabilidad y seguridad, lo que pondría en evidencia la segunda guerra de navegadores.Esta vez luchando por proveer mayor facilidad de uso y apego a los estándares.

En el 2003 Microsoft anunció que descontinuaría Internet Explorer for Mac. Apple inició el trabajo de crear un navegadorque lo reemplazara, ya que era su navegador por defecto, y a partir del motor KHtml usado en Konkeror de KDE generóWebKit y el navegador Safari que apareció en el mismo año.

En el 2008 Google l ibera el navegador Chrome basado en WebKit. La presencia de estos nuevos navegadores siguenreduciendo el número de usuarios de Internet Explorer [2]. Microsoft reacciona con la versión 8 en marzo de 2009 imitandofuncionalidades e incrementando el apego a los estándares. Esta guerra se mantiene hasta el presente, donde cadafabricante libera versiones con frecuencia siguiendo la misma estrategia.


99 22/09/2015 1



Aunque no es un estándar aún, la segunda guerra ha llevado a la mayoría de navegadores a implementar (X)HTML 5.0 o almenos las secciones más estables de sus borradores.

1.1.4 Notas

[1]En este documento se usarán los términos HTML y XHTML para referirse a cada notación por separado, o (X)HTMLcuando algo aplique a ambas por igual.

[2]De acuerdo a la estadísticas del W3C en http://www.w3schools.com/browsers/browsers_stats.asp

1.2 Arquitectura webUn sitio web es un mecanismo de comunicación digital donde uno o más visitantes pueden obtener o proveer informaciónde interés, y está basado en la arquitectura web, un modelo cliente-servidor cuya forma más simple se aprecia en la Figura1.1 y se explica a continuación en forma muy general.

Servidor

Cliente 1

Cliente 2

HTTP

HTTP

Archivos

HTMLServidor

web

Navegador

Navegador

Figura 1.1. Arquitectura web simple

El autor que quiera publicar un sitio web, construye un conjunto de páginas web en notación (X)HTML junto con imágenes,estilos y otros medios, y las almacena en una computadora que está siempre conectada a Internet, a la cual se le llama el servidor . Un programa especial, llamado servidor web, el cual tiene acceso de lectura a dichas páginas, estará siempre enesta computadora escuchando por un puerto TCP (Transmission Control Protocol), normalmente el 80 u 8080.

Un lector que quiera visitar el sitio debe conocer la dirección del servidor, es decir su número IP, ya sea introduciéndolodirectamente o a través del servicio de nombres de dominio (DNS, Domain Name Service) y el puerto donde el servidor webestá escuchando. El lector carga un programa especial en su computadora llamado navegador web (web browser) eingresa en él la dirección del servidor y el puerto, la cual respeta una notación estándar conocida como localizador uniformede recursos (URL). El navegador intentará establecer una conexión TCP con el servidor al puerto indicado o al 80 si seomite. El servidor web aceptará la conexión. A partir de este momento el cliente y el servidor pueden comunicarselibremente, pero para que ambos puedan entenderse se necesita un idioma común: el protocolo de transferencia dehipertexto (HTTP, HyperText Transfer Protocol).

El protocolo HTTP establece que el cliente, también conocido como user agent , siempre hace solicitudes de recursos paramostrarlos al usuario, y el servidor responde a ellas, no el recíproco. Las solicitudes del cliente y las respuestas del servidor

están codificadas como se verá luego.

En lo que resta de esta sección se explicarán los conceptos que componen la arquitectura web con más detalle y en lasiguiente sección, el proceso típico en que un autor construye su sitio web y lo hace público para que los visitantesinteraccionen con él.

1.2.1 El servidor web

Un servidor web es un programa cuya ejecución es persistente, a veces llamado servicio o demonio, en un equipo conectadoa Internet, esperando conexiones de clientes usualmente por el puerto 80. Una vez establecida una conexión, el clientesolicita repetitivamente recursos al servidor mediante el protocolo HTTP y éste responde a cada una de el las. El términoservidor web también se usa para hacer referencia al hardware que corre este programa, pero en este documento se usarásólo para referirse al software.


99 22/09/2015 1



Cualquiera puede implementar un servidor web escribiendo un programa que espere conexiones en algún puerto TCP yhable por él HTTP. Sin embargo, para la mayoría de situaciones, es apremiante utilizar un servidor web existente. La Tabla1.1 lista los más populares en la actualidad.

Nombre Fabricante Licencia Detalles

Apache HTTPServer

ApacheLibre (ApacheLicense)

Rico en características y extensiones. Corre en la mayoría de sistemas operativos.Sirve aproximadamente más del 60% de las páginas web del mundo.

InternetInformationServices (IIS)

MicrosoftPropietario /Comercial

Sólo se ejecuta en Windows Server. Sirve aproximadamente 20% de las páginasweb del mundo

nginxIgor

SysoevLibre (BSD)

Nació como una alternativa de Apache caracterizada por el alto rendim iento y bajoconsumo de recursos. Corre en la mayoría de sistemas operativos. Sirveaproximadamente 8% de las páginas web del mundo.

Google Web Server(GWS)

Google Uso interno Sirve aproximadamente 5% de las páginas web del mundo.

lighttpd lighttpd Lib re (BSD)Diseñado para ambientes de muy alto rendimiento donde la velocidad es un factorcrítico. Es limitado en cuanto a funcionalidad. Sirve aproximadamente un 1% de laspáginas web del mundo.

Tabla 1.1. Servidores web más populares en la actualidad de acuerdo a la encuesta Netcraft.

1.2.2 El cliente web o navegador web

Un navegador web, cliente web, o agente usuario ("user agent"), es un software que permite obtener, presentar,recorrer e interaccionar con recursos disponibles en la web. De los componentes de la arquitectura web, es el más conocidopor los usuarios, ya que interaccionan directamente con él.

Un navegador web es una pieza de software compleja, por lo que usualmente está dividida en al menos dos módulos: el

motor y la interfaz. El motor del navegador web ("web browser engine" o "rendering engine"), se encarga de analizarcontenido ((X)HTML, imágenes, etc.), aplicarle estilos, modificar lo anterior con programas de JavaScript y presentar losresultados en la pantalla u otro medio. Por su parte, la interfaz del navegador web provee una barra de direcciones,marcadores, botones de navegación y otros controles que usan al motor del navegador web internamente para facilitar alusuario su interacción.

La separación entre el motor y la interfaz tiene una importante ventaja. El motor se distribuye en forma de biblioteca ypermite que cualquier otra aplicación pueda usarlo. De esta forma, clientes de correo, aplicaciones de ayuda o cualquiersoftware que usted quiera programar, puede manipular documentos web. La Tabla 1.2 muestra los motores de "rendereo"web más populares en la actualidad y los navegadores que los usan.

Nombre Fabricante Licencia Navegadores

Gecko Mozilla Project Libre (L/GPL) Firefox

WebKit Apple, KDE, Google, ... Libre (LGPL/BSD) Chrome, Safari

Trident Microsoft Propietario Internet Explorer

Presto Opera Software Propietario Opera

Tabla 1.2. Motores de navegador web más populares en la actualidad.

1.2.3 El localizador uniforme de recursos URL

Un servidor web provee recursos en los que puede estar interesado un cliente. Todo recurso transferible entre el servidor yel cliente, debe estar identificado de forma única en el mundo mediante un localizador uniforme de recurso (URL, UniformResource Locator), que es una dirección junto con alguna información adicional para acceder al recurso. La sintaxis de unURL es

esquema: / / user name: password@servi dor: puert o/ r uta?query_s t r i ng#i d_f r agment o

ht t p: / / www. amazon. com/htt p: / / www. w3. org/ TR/ html 401/ st r uct / t abl es. ht ml #edef - CAPTI ONht tp: / / acme. co. cr: 8080/ i ndex. phphtt ps: / / 24. 168. 39. 221/ cgi - bi n/ book?i d=4596098&acti on=r emovef t p: / / msoto: w33n8r f 1@down. anti vi r us. net/ cur r ent / setup. exe

Las partes de un URL son las siguientes:

Esquema. También llamado Protocolo. Indica el propósito y la sintaxis del resto del URL. Entre muchos se puedencitar: http, https, f t p y mai l to. Por ejemplo, al procesar el URL http:/ / www. amazon. com/ , un navegador hará un

petición HTTP al servidor www. amazon. comen el puerto 80. Al procesar el URL mailto:chema@sui zacent r oamer i cana. cr ,

lanzará un cl iente de correo con un mensaje nuevo dirigido a chema@sui zacent r oamer i cana. cr .

1.

Servidor. Es la dirección IP o el nombre de dominio si tiene registrado uno en el servicio de nombres de dominio(DNS, Domain Name Service). Permite identificar al servidor que provee el recurso, por ejemplo drupal . org. Dado a

2.


99 22/09/2015 1



que DNS no es sensitivo a mayúsculas ni minúsculas, da lo mismo acceder a DRUPAL. or g, por ejemplo.

Puerto. Indica el puerto que será usado en la conexión TCP. Por ejemplo, ht t p: / / myserver. com:10000/ hará que el

navegador establezca una conexión HTTP en el puerto 10000, probablemente para administración del servidor. Si seomite el puerto en el URL se asumirá el por defecto para el esquema usado. Por ejemplo, para h t tp es 80, para https

es 443 y para f t p es 21. Una lista de protocolos y sus puertos por defectos puede a conveniencia consultarse en la

Wikipedia.

3.

Ruta. Contiene la ruta para encontrar el recurso. Puede ser relativa al sistema de archivos del servidor o un "alias"que ayude a especificar el recurso, por ejemplo, htt p: / / mi bi bl . net /revistas/acm.png. Es muy probable que seasensitiva a mayúsculas si el sistema de archivos del servidor lo es también.

4.

Parámetros. Si el recurso es generado por una aplicación en el servidor web, a esta se le pueden enviar parámetros

en forma de parejas paramet r o=val or y separadas por ampersands (&) si son varias parejas, por ejemplo,htt ps : / / mi bi bl . net / revi s ta .php?id=23091&action=devolucion&user=chema . A esta lista de parámetros se le suele

llamar "query string".

5.

Identificador de fragmento. Es un nombre que sirve para identificar una parte (fragmento) o un punto particular deun documento web. Cuando se especifica un identificador de fragmento en un URL, provoca que el navegador cargueel documento y automáticamente se desplace ("scroll") hasta el fragmento en cuestión. Por ejemplo,htt p: / / mi s i t i o. co. cr / docs / tes is . html #Cap03.

6.

Usuario y contraseña. Si para acceder al recurso se necesita que el visitante se autentique, algunos protocolospermiten indicar las credenciales en el URL mismo. Es poco común y una práctica no recomendada incluir contraseñas,ya que el URL normalmente es público y carece de seguridad. Ejemplo, f t p: / / mmortadela@sj muni . go. cr / vaca/ mu. pdf .

7.

1.2.4 El protocolo de transferencia de hipertexto HTTP

La arquitectura web establece que un servidor web provee al mundo recursos identificados de forma única con URLs; uncliente web o navegador web interesado solicita estos recursos y el servidor responde con ellos. Las convenciones usadas enel trasiego de estos recursos entre el cliente y servidor las estalece el protocolo de transferencia de hipertexto (HTTP,Hypertext Transfer Protocol).

Cuando el cliente web necesita un recurso, emite un mensaje de solicitud HTTP (HTTP request) al servidor. El servidor webcarga el recurso desde el disco, una base de datos, un programa o cualquier otra fuente, y responde con una respuestaHTTP (HTTP response).

Una sesión HTTP (HTTP session), es una secuencia de solicitudes-respuestas entre el navegador y el servidor web. En laversión HTTP/1.0 de 1996 se establece una sesión por cada transferencia. Es decir, se inicia la sesión, el cliente solicita unrecurso, el servidor responde y se cierra la sesión inmediatamente. Para transferir un nuevo recurso se debe iniciar otrasesión HTTP. En la versión HTTP/1.1 de 1999 la sesión permite un número arbitrario de transferencias lo que agiliza lacomunicación entre ambas partes.

1.2.4.1 El mensaje HTTP

En la Figura 1.2 se puede ver que la estructura de los mensajes de solicitud y respuesta HTTP es la misma, pero varía elcontenido de los primeros dos campos.

Request line

HTTP Request header

empty line

Message body

HTTP Request message

Status line

HTTP Response header

empty line

Message body

HTTP Response messageFigura 1.2. Estructura de un mensaje HTTP

La Figura 1.3 muestra dos ejemplos de mensajes HTTP . Los cambios de línea son importantes por lo que se muestran enrojo. En las siguientes secciones se explica cada uno de los campos que conforman los mensajes HTTP .

HTTP Request message HTTP Response message

GET /cursos/web/cest.html HTTP/1.1

Host: www.ejemplo.comUser-Agent: Chrome/13 (Linux)

HTTP/1.1 200 OK

Server: Apache/2.2.9 (Debian)

Content-Type: text/html; charset=utf-8

<html><head>

<title>Carta al estudiante</title></head>

<body>...</body></html>

Figura 1.3. Ejemplo de dos mensajes HTTP


99 22/09/2015 1



Los navegadores sólo muestran el contenido del cuerpo de los mensajes al usuario, ocultando los dos primeros campos delos mensajes usados en la negociación con el servidor web. La extensión HTTP Headers para el navegador Chrome, y LiveHTTP Headers para Firefox, permiten al usuario visualizar y estudiar los campos ocultos de los mensajes que seintercambiaron entre el cliente y el servidor durante la carga de una página.

1.2.4.2 Request line

En la primera línea del mensaje de solicitud HTTP, llamada Request line, el cliente web indica al servidor el recurso deinterés (un URL) y la acción que desea el servidor tome con dicho recurso. La sintaxis del Request line es:

METHOD URL HTTP_ ver si on

El protocolo HTTP define 9 acciones que un cliente web puede solicitar al servidor, reciben el nombre de Request methodsy se listan en la Tabla 1.3. El protocolo HTTP indica que todo servidor web debe almenos implementar GET y HEAD, eidealmente OPTIONS.

Método Descripción

GET

Solicita una copia completa del recurso cuya identificación esta dada por el URL que le sigue. A través de directivas en elencabezado (el campo que sigue en el mensaje) se pueden hacer solicitudes condicionales (Conditional GET), por ejemplo,obtener una copia del recurso sólo si ha cambiado a partir de una fecha, o una solicitud parcial (Partial GET), por ejemplo,obtener sólo un segmento del recurso. Estos detalles se explican en el RFC-2616.

HEAD Es idéntico al método GET excepto en que el servidor web no debe retornar un Message body en el mensaje de respuestaHTTP. Esto permite al cliente obtener metadatos de un recurso, como para saber si ha cambiado en el servidor u otros fines.

OPTI ONS Retorna los métodos HTTP que el servidor soporta para un recurso dado (con un URL) o en general por el servidor webmismo (con un '* ' en lugar de un URL).

POST Envía datos, normalmente ingresados en un formulario web, en el campo Message body del mensaje de solicitud HTTP, alrecurso identificado por el URL, normalmente un programa en el servidor que procesará o almacenará dichos datos.

PUT"Sube" (upload) un recurso identificiado por el URL cuyo contenido es enviado en el Message body al servidor, el cualreemplaza el recurso anterior si existe. Se diferencia de POST en la semántica del URL. En POST el URL especifica unaaplicación que recibe los datos y los procesa; mientras que en PUT el URL es la identificación del recurso mismo.

PATCH Sirve para aplicarle modificaciones parciales a un recurso.

DELETE Solicita al servidor eliminar el recurso identificado por el URL. Normalmente está deshabilitado por defecto en la mayoría deservidores web.

TRACE Permite rastrear servidores intermedios que procesan la solicitud HTTP. Esto es útil para estudiar el comportamiento deservidores proxy en especial si implementan algún caché.

CONNECT Transforma la solicitud en una conexión a un túnel TCP/IP para facilitar la comunicación segura (HTTPS) a través de unproxy HTTP no encriptado.

Tabla 1.3. HTTP Request Methods.

1.2.4.3 Request header

El campo de encabezado de la solicitud HTTP (HTTP Request Header) permite al cliente proveer información adicional sobrela petición o sobre el cliente mismo al servidor. En este campo se escriben parejas At r i but o=Val or . El estándar HTTP define

unos 19 atributos de los cuales sólo uno es obligatorio: Host . Los atributos se pueden extender mientras los agentes (elservidor y el navegador) estén de acuerdo en ellos. La Tabla 1.4 muestra algunos de estos atributos.

Campo Descripción

Accept:

Permite al cliente especificar los tipos de medios (MIME types) que son aceptables como respuesta. Ej.: Accept :t ext/ pl ai n; t ext/ ht ml ; appl i cati on/ ht ml +xml . Un asterisco indica que todas las categorías o todos los medios

son aceptables (*/ * se asume si no se especifica un atributo Accept ). Un párámetro q=val or indica la calidad

aceptable, donde val or es un real entre 0.0 y 1.0; útil especialmente en vídeo o ciertos formatos. Si el servidor no puede

responder con un formato aceptable, debe generar un mensaje con el status code 406 NOT ACCEPTABLE.

Host :Permite especificar el servidor y el puerto que tiene el recurso solicitado, ya que la primera línea (Request line) no incluyeestos valores y se necesitan para desambiguar en caso de servidores proxy u otros intermediarios. Es el único atributoobligatorio en HTTP/1.1. Ej.: Host : www. mi ser vi dor . com: 8080.

Ref erer:Permite especificar el URL del recurso del cual se obtuvo el URL solicitado al servidor. Debería ser Referr er : , pero en el

estándar aparece como Ref erer: .

User

Agent :

Contiene información sobre el navegador o agente de usuario que solicita el recurso. Consta de varias parejasmódul o/ val or separadas por espacios y en orden de importancia. Todos los agentes de usuario deben proveer este

atributo. Ej.: User- Agent : Mozi l l a/ 5. 0 ( Maci ntosh; I nt el Mac OS X 10. 6; rv: 5.0. 1) Gecko/ 20100101F i re fox/ 5. 0. 1.

Tabla 1.4. Campos estándar en el HTTP Request header.

1.2.4.4 Emtpy line

Es un cambio de línea compuesto nada más de dos caracteres: retorno de carro y avance de línea (CRLF, carriage-return yline-feed). En notación C se escribe como " \ r \ n " . Aunque algunos servidores web aceptan un LF simple (" \ n"). Esta línea no

debe tener ningún otro espacio en blanco.

1.2.4.5 Message body

Este es el único campo opcional del mensaje HTTP y su contenido varía dependiendo de la naturaleza del mensaje. Tambiénes el único que puede transportar información binaria (todos los demás son de texto).


99 22/09/2015 1



1.2.4.6 Status line

En la línea Status line del mensaje de respuesta HTTP, el servidor indica al cliente web, un código y una explicación textualcomo resultado de procesar la solicitud previamente hecha. La sintaxis del Status line es:

HTTP_versi on st atus_code r eason_phr ase

El st atus_code es un número y el r eason_phr ase es un texto corto escogido por el servidor web y comprensible para seres

humanos; el navegador no necesita analizarlo. El st atus_code es entero de tres dígitos, donde el primer dígito indica una de

las cinco clases de respuesta definidas por el estándar HTTP:

Información. La solicitud fue recibida y está siendo procesada.1.

Éxito. La solicitud fue recibida, entendida, aceptada y procesada exitosamente.2.

Redirección. Se necesitan más acciones del cliente para completar la solicitud.3.

Error del cliente. La solicitud es incorrecta por error de sintaxis o no se puede realizar.4.

Error del servidor . El servidor falló al procesar una solicitud aparentemente válida.5.

Por ejemplo, el error 404 NOT FOUND indica que el cliente especificó un URL de un recurso que no existe en el servidor. El

RFC 2616 de HTTP/1.1 define 41 st at us_codes, algunos de los más comunes son los siguientes:

200 OK . La solicitud HTTP fue exitosa. Por ejemplo, si la solicitud fue un GET, la respuesta contendrá el recursosolicitado en el campo Message body; si la solicitud fue un POST, los datos enviados por el cliente fueron procesados

exitosamente.

204 NOT CONTENT. El servidor procesó la solicitud exitosamente, pero no es necesario generar un recurso como

respuesta y por ende el campo Message body está vacío.

206 PARTI AL CONTENT. El servidor responde con un fragmento del recurso solicitado, tal como fue pedido por el clienteweb. Esto es de util idad para continuar descargando un recurso incompleto o permitir varias descargas simultáneas enpartes diferentes del mismo recurso. Esta funcionalidad es ampliamente explotada por los administradores dedescargas (download managers).

301 MOVED PERMANENTLY. El recurso ha sido movido a otro URL y el cliente debe obtener el nuevo recurso con una

nueva solicitud.

302 FOUND. No debería usarse. Normalmente se quiere decir 303.

303 SEE OTHER. El recurso está disponible en otro URL, el cual el cliente debe obtener con una solicitud nueva. Puede

usarse para evitar sobrecargar un servidor web o redireccionar algún recurso.

400 BAD REQUEST. La sintaxis de la solicitud es incorrecta.

401 UNAUTHORI ZED. El cliente intenta acceder a un recurso que está protegido y no ha provisto credenciales o las ha

fallado. La respuesta incluye un reto al usuario, el cual debe proveer un nombre de usuario y contraseña.

403 FORBI DDEN. La solicitud es válida pero el servidor se niega a completarla, por ejemplo, tras varios intentos el

usuario falla el proceso de autenticación.404 NOT FOUND. El recurso no se encuentra pero podría estarlo en el futuro.

410 GONE. El recurso no se encuentra y nunca más lo hará. Es útil para avisar a los motores de búsqueda que eliminen

el recurso de sus índices.

500 I NTERNAL SERVER ERROR. Mensaje genérico, para cuando no hay uno 5XX más específico.

501 NOT I MPLEMENTED. El request method o alguna característica es válida ante el estándar, pero el servidor web no lo

implementa.

503 SERVI CE UNAVAI LABLE. El servidor web no está disponible por sobrecarga o en mantenimiento. Normalmente una

condición temporal.

Para revisar la lista completa de códigos de estado HTTP con los que puede responder un servidor, consúltese el RFC 2616.

1.2.4.7 Response header

El campo encabezado de respuesta HTTP (HTTP Response Header) permite al servidor enviar información adicional sobrela respuesta al agente de usuario. Util izan la misma notación que los del campo encabezado de solicitud HTTP y también sepueden extender mientras los agentes estén de acuerdo en ellos. Algunos se explican en la siguiente tabla.

Campo Descripción

ETag:Contracción de "Entity Tag". Es una cadena que permite identificar el estado del recurso, de tal forma que si sehace una modificación del recurso en el servidor, su ETag variará. Esto permite al cliente saber si su copia en elcaché está actualizada o ha variado en el servidor. Ej.: Etag: "239876f - 4b8c- 429f e67474a80" .

Locati on: Permite al servidor indicarle al agente de usuario que el recurso solicitado ha sido m ovido a un nuevo URL. Elagente usuario debe entonces solicitar el nuevo recurso, lo que se conoce como una "redirección".

Ser ver:Contiene información sobre el servidor web que genera la respuesta. Consta de varias parejas módul o/ val oren orden de importancia para identificar al servidor. Ej.: Ser ver : Apache/ 2. 2. 9 ( Debi an)PHP/ 5. 2. 17-0. dot deb. 0.


99 22/09/2015 1



Campo Descripción

WWW- Aut hent i cat e:Solicita al usuario autenticarse para acceder a un recurso en una respuesta 401 UNAUTHORI ZED. Es seguido

por el número de intentos permi tidos. Ej.: WWW- Aut hent i cat e: 3.

Tabla 1.5. Campos estándar en el HTTP Response header.

1.2.5 Ejemplo de una sesión HTTP

Supóngase que el sitio web ubicado en www. ej empl o. comestá en construcción y tiene sólo dos recursos, un i ndex. html y una

imagen i mg/ ucr . png. El contenido del recurso i ndex. html se encuentra en el Listado 1.1.

<html>1. <head><title>Desar r ol l o de apl i caci ones web</title></head>2.<body>3.

<img sr c="i mg/ ucr. png" al t ="Escudo UCR" />4.<img sr c="i mg/ecci . png" al t =" Escudo ECCI " />5.<h1>Present aci ón</h1>6.<p>Est e curso i nt roduce el est udi ant e en el desarr ol l o[. . . ] </p>7.

</body>8.</html>9.

Listado 1.1. Contenido de una página web hipotética

Un visitante accede con su navegador a www. ej empl o. com. La interacción entre el navegador web y el servidor web se aprecia

en el diagrama de secuencia de la Figura 1.4.

www.ejemplo.comCliente

Servidor web

Opera

index.html

img/ucr.png

GET / HTTP/1.1

Host: www.ejemplo.com

User-Agent: Opera/11.5

HTTP/1.1 200 OK

Content-type: text/html

Content-length: 296

Server: Apache/2.2.19

<html><head><title>Desarrollo de

aplicaciones web</title>[...]</html>

GET /img/ucr.png HTTP/1.1



HTTP/1.1 200 OK

Content-type: image/png

Content-length: 46236


<89>PNG^Z^@^@^@^MIHDR^@^

@^@<A1>^@^@^@<A8>^H^F[...]

GET /img/ecci.png HTTP/1.1



HTTP/1.1 404 Not Found

Content-type: text/html

Content-length: 117


<html><head><title>404 Not Found </title>

</head><body>The requested URL was not

found on this server</body></html>

Figura 1.4. Diagrama de secuencia de una sesión HTTP

Al escribir la dirección htt p: / / www. ej empl o. com/ el navegador contacta al "default gateway" que tenga configurado elsistema operativo de la máquina local y le pide que le resuelva la dirección IP del dominio www. ej empl o. com. Al obtener la

dirección IP, el navegador establece una conexión TCP en el puerto 80 con www. ej empl o. comy éste acepta. A partir de este

momento se ha establecido una sesión HTTP; el navegador y el servidor web pueden intercambiar mensajes HTTP.

El navegador solicita el recurso que el usuario indicó en el URL, en este caso es "/ ". Ensambla un mensaje HTTP Request

con el método GET, escribe algunos campos de encabezado (HTTP Request Header fields) y un cambio de línea. Lo envía alservidor.

El servidor recibe la solicitud HTTP y de acuerdo a su configuración local, obtiene que el recurso "/ " equivale al archivo

i ndex. html . Ensambla una respuesta HTTP (HTTP Response message) con el status code 200 indicando que el recurso fue

encontrado y la solicitud se procesó exitosamente. Agrega unos campos de encabezado de respuesta (HTTP Response


99 22/09/2015 1



Header fields) y anexa el contenido del recurso i ndex. html literalmente en el campo Message body. Lo envía al cliente.

El navegador recibe el mensaje de respuesta HTTP y viendo que la solicitud fue exitosa, extrae el recurso i ndex. html guiado

por los campos de encabezado HTTP. Almacena el recurso en su caché e inicia el análisis (parsing) y despliegue (rendering)del recurso en la ventana del usuario. Al analizar la línea 4 del i ndex. html , el navegador se percata de que necesita otro

recurso para presentarlo en la página, y ensambla otra solicitud al servidor, de la misma forma que hizo con i ndex. html ,

pero esta vez por i mg/ ucr . png.

El servidor web recibe la nueva solicitud y la procesa de la misma forma que hizo previamente con i ndex. html . El recurso

también existe. La única diferencia es que i mg/ucr . png es un recurso binario, de ahí la importancia de los campos del

encabezado que ayudarán al navegador a procesar el recurso adecuadamente. El servidor envía el mensaje de respuesta.

El navegador recibe el mensaje y al ver que es exitoso, agrega el recurso en su caché y guiado por los campos delencabezado del mensaje, interpreta el contenido binario como una imagen PNG y la coloca en su lugar dentro de laventana. Al analizar la línea 5 del documento i ndex. ht ml (Listado 1.1), se percata de que necesita también el recurso

i mg/ecci . png. Ensambla una nueva solicitud GET y la envía al servidor como hizo anteriormente.

El servidor web recibe la solicitud y trata de localizar el recurso. Al notar que no se encuentra en su sistema de archivos,construye una respuesta HTTP con status code 404 Not Found, indicando que el agente del usuario solicitó un recurso

erróneo. En el cuerpo del mensaje agrega un texto más explicativo y en los campos del encabezado HTTP detalles de cómointerpretar este texto. Lo envía al cliente.

El navegador recibe el mensaje 404 Not Found. Al no obtener un recurso para desplegar (render), opta por dibujar un

rectángulo genérico indicando la ausencia y rellena con el texto alternativo que se encuentra en el documento i ndex. html .

Continúa de esta forma analizando y desplegando el recurso i ndex. html hasta alcanzar su final.

1.3 Proceso de construcción del sitio web

Al igual que cualquier otro software, la construcción de un sitio web sigue un proceso de desarrollo, con las fases conocidas:análisis para saber qué necesita el cliente; diseño del sitio; implementación de las aplicaciones web; pruebas (testing) de lasaplicaciones web; mantenimiento del sitio; etc.

Se debe tener muy claro que el equipo de desarrollo de un sitio web, o simplemente el equipo web, es una entidadmultidisciplinaria y no sólo uno o más informáticos. Este equipo puede estar conformado por los siguientes profesionales.

Informáticos. Administran los servidores, el alojamiento, desarrollan las aplicaciones web, capacitan a los usuarios,

etc.Diseñadores gráficos. Definen la apariencia uniforme del sitio, así como todas las imágenes a utilizar.

Narradores. Proveen el contenido textual a comunicar a los visitantes.

Otros profesionales.

1.3.1 Diseño del sitio web

La fase de análisis pretende conocer el problema, es decir, obtener el propósito del sitio web, las necesidades que resuelve,los visitantes que lo usarán, etc.

La fase de diseño pretende elaborar un modelo de sitio web que solucione las necesidades halladas en la fase de análisis. Enesta etapa se decide qué tecnologías usar (páginas estáticas, un administrador de contenido (CMS), programación PHP,bases de datos orientadas a documentos, etc.); la arquitectura de los componentes que intervendrán; la apariencia del sitio


99 22/09/2015 1



(los estilos, si se usará una metáfora, etc.), las convenciones (los nombres de los archivos, reglas de escritura del códigofuente, etc.).

Sin un buen diseño el programador se sentará frente a la computadora sin saber cómo empezar el sitio web, ni quésecciones tendrá, ni cuáles de ellas tendrán páginas estáticas o serán programadas, etc. La importancia de la fase de diseñoweb es tal que libros completos atienden el tema, como "Web Style Guide" de Patrick J. Lynch y Sarah Horton, cuyo textocompleto se encuentra disponible en línea gratuitamente.

1.3.2 Alojamiento web

Para publicar su sitio web el autor debe, adquirir una o más computadoras; configurarlas como servidores web, bases dedatos u otros servicios; contratar suficiente ancho de banda; velar porque el servicio no se interrumpa pese a falloseléctricos con UPS (Uninterruptible Power Supply) y generadores eléctricos, o fallos en el proveedor de servicios de Internet(ISP, Internet Service Provider) con redundancia de conexiones; fallos de hardware (como malfuncionamiento de un discoduro) y otra serie de consideraciones para que el sitio esté disponible al menos el 99% del tiempo.

Muchos autores prefieren relegar estas responsabilidades a una compañía que se especialice en brindar este tipo de servicio,al cual se le conoce como alojamiento web (web hosting). La oferta de proveedores de alojamiento web es considerable, yvaría en precios desde lo gratuito hasta lo costoso.

Las compañías de alojamiento web proveen varios tipos de alojamiento. Un l istado de tipos de alojamiento web puede verseen http://en.wikipedia.org/wiki/Web_hosting_service, de los cuales sobresalen los siguientes.

Servidor compartido (shared hosting). Es la variante más común y la más económica. Su sitio web comparte elmismo servidor web con otros sitios que estén alojados en el mismo servidor físico. Usted no tiene derechos deadministración, ya que un cambio afectaría otros sitios.

1.

Servidor dedicado virtual o servidor privado virtual (VPS, Virtual Private Host). Usted alquila una máquinavirtual la cual es de su uso exclusivo (privado) y por ende tiene permisos de administración sobre ella, por lo quepuede reiniciarla o instalar paquetes. Varias máquinas virtuales comparten el mismo servidor físico y por endecompiten por sus recursos.

2.

Servidor dedicado (dedicated hosting). Un servidor físico es para su uso exclusivo, no compartido con nadie.3.

Alojamiento en la nube (cloud hosting). Su sitio web no estará en un único servidor, sino distribuido en varios deellos. Esto tiene grandes ventajas, como la posibilidad de responder a una inmensa cantidad de visitantessimultáneamente, la facilidad de expansión y la capacidad de continuar activo pese a que un servidor físico esté caído.

4.

El autor puede beneficiarse de los servicios de alojamiento web gratuitos. El sitio Free Web Hosting permite listarlos,compararlos y buscar de acuerdo a necesidades específicas. Antes de decidirse por uno, el autor debería revisar los términosde servicio y otros detalles para evitar sorpresas.

1.3.3 Registro de dominio

La mayoría de sitios web se conocen por un nombre de dominio como www. ej empl o. com. Cualquier persona puede registrar

un nombre de dominio, pero siempre tiene un costo económico. En la actualidad es cercano a los 10 dólares anuales.

Cuando se registra un nombre de dominio, éste se convierte en pertenencia del autor y no de la compañía con que se hizoel trámite. El autor puede entonces asociar el dominio con cualquier servidor web, sea propio, de un servicio de alojamientogratuito, o uno comercial. Sin embargo, la mayoría de planes de alojamiento web comercial, incluyen el costo de registro yrenovación del nombre de dominio.

1.3.4 Construcción del contenido

Una vez que se ha determinado la necesidad de un sitio web, se ha diseñado una solución, se tiene alojamiento gratuito ono, y opcionalmente asociado a un nombre de dominio; el autor estará interesado en escribir el contenido del sitio web.

Quizá el método más rápido y eficiente de construir un sitio web sea a través de páginas estáticas. Es decir, un conjunto de

documentos (X)HTML escritos manualmente o con ayuda de algún software de diseño web, además de otros recursos comohojas de estilo, imágenes y programas en JavaScript. Esto puede ser conveniente para sitios web sencillos y pequeños.

Cuando un sitio web se torna extenso con cientos o miles de documentos web, intervenido por muchos usuarios que aportaninformación, o que debe solventar necesidades especificas que sólo con programación puede atendenderse; se debeconvertir en un sitio web dinámico. En tal caso el autor debe escoger algún medio de programación en el lado delservidor, como CGI o algún lenguaje de "scripting" como PHP.

1.3.5 Promoción del sitio web

Una vez que el sitio web está publicado, el autor estará interesado en que la audiencia interaccione con él. Es difícil queentre millones de sitios web en el mundo un visitante encuentre el de uno. No obstante, algunas estrategias pueden ayudar.

El principal medio en la actualidad para encontrar algo de interés en el web es a través de un buscador, como Google o Bing.


99 22/09/2015 1



Normalmente estos buscadores proveen algún mecanismo para solicitarles que consideren incluir un dominio en sus índices.

Aunque el sitio web sea incluido en los índices de los buscadores, es muy probable que no aparezca entre los primerosresultados de una consulta. Esto se puede mejorar incrementando la "popularidad" del sitio. Los buscadores miden qué tanpopular es un recurso en proporción a la cantidad de enlaces que encuentran hacia dicho recurso en otros dominios. Poreso, enlazar el sitio web en diarios, noticias, listas de correo u otros medios puede ayudar.

Una alternativa más es invertir en publicidad local o internacional. Incluso se puede costear un lugar privilegiado en losresultados de los buscadores más populares.

2 El lenguaje de marcado extensible XML

El lenguaje de marcado extensible (XML, eXtensible Markup Language), es un lenguaje estándar para representarinformación de interés en forma de documentos digitales, que se caracteriza por permitir marcado definido a convenienciadel autor. Con propósitos de sencillez, XML es un subconjunto del SGML (Standard Generalized Markup Language), unlenguaje estándar (ISO 8879:1986) nacido en IBM en los años 60.

2.1 Conceptos

Los seres humanos tienen diversas necesidades de información, y cuando ésta se debe almacenar en la computadora, sesuele hacer en forma de bases de datos o documentos digitales. Las bases de datos restringen en alguna medida larepresentación de información del mundo real a una estructura formalmente definida que puede ser eficientementemanipulada por el computador. Los documentos son menos estrictos por lo que pueden representar casi cualquier tipo deinformación del mundo real, pero tal libertad limita el poder de manipulación del computador. El XML es un lenguaje formalque busca las ventajas de ambos: la representación flexible de información en forma de documentos que pueden ser

manipulados aprovechando el poder del computador.

Charles Goldfarb, el principal autor del SGML, indica que XML sirve para la representación digital de documentos.Representar digitalmente un documento implica transformarlo en algún tipo de código legible por la computadora para queésta sea capaz de almacenarlo, procesarlo, buscarlo, transmitirlo, mostrarlo e imprimirlo [Gold99]. La estrategia consiste enseparar los datos del documento de su presentación y además, describir la estructura lógica y física que sigue el documento.

La presentación de un documento es la percepción que tiene el ser humano de él, que típicamente es impresa en papel oen una pantalla [Gold99]. La estructura del documento describe la distribución y orden de los componentes deldocumento. Los componentes varían dependiendo del tipo de documento. Por ejemplo, un libro suele tener comocomponentes: portada, índice, partes, capítulos, secciones, párrafos, oraciones, palabras, títulos, notas, etc. En terminologíaXML estos componentes reciben el nombre de elementos. El Listado 2.1 muestra un ejemplo de un posible libro ennotación XML.

<?xml ver si on="1. 0" encodi ng="UTF-8" ?>1.<! DOCTYPE book SYSTEM "book. dtd">2.

3.<book name=" Apl i caci onesWeb" ver si on="1. 0">4.

<title>Apl i caci ones web</title>5.<authors>6.

<author name="J ei sson" per cent="100">7.<fullname> J ei sson Hi dal go- Céspedes</fullname>8.<email> j ei ssonh@gmai l . com</email>9.

</author>10.</authors>11.

12.<chapter name="Prel i mi nar" type="prel i ms">13.

<section name="Pr ol ogo">14.<title>Pról ogo</title>15.<p>Est e documento cont i ene un r esumen de t emas que ser vi r án de16.

apoyo a l os est udi ant es del cur so CI - 2413 i mpar t i do. . . </p>17.</section>18.<section name="Agradeci mi ent os" type="acknowl edgements" author="J ei sson">19.

<title>Agradeci mi ent os</title>20.


99 22/09/2015 1



<p>Qui ero agr adecer en pri mer l ugar , a ust ed, que con sus oj os21.da vi da a est as i nani madas pal abr as pi nt adas en. . . </p>22.

</section>23.</chapter>24.

25.<chapter name="I nt r oducci on">26.

<title>I ntr oducci ón a l a tecnol ogí a web</title>27.<p>De todas l as apl i caci ones que se han constr ui do sobre I nt ernet . . . </p>28.<p>Su popul ari dad puede deber se a su " f aci l i dad de uso&quot ; y. . . </p>29.

30.<section name="Hi st ori aWeb">31.

<title>Hi s tor i a</title>32.<p>La web f ue concept ual i zada en un art í cul o de 1989 Ti m Berner s- Lee</p>33.

</section>34.

</chapter>35.</book>36.

Listado 2.1. Ejemplo de un libro hipotético en XML.

Otro concepto presente en la estructura de un documento XML es el de entidad. Una entidad representa cualquier trozo detexto, desde un carácter, un párrafo, un archivo o todo un libro. Las entidades tienen nombre el cual puede utilizarse encualquier parte del documento al insertar una referencia de entidad, la cual es sustituida por la entidad misma cuando eldocumento es procesado. Las entidades funcionan de forma similar a las macros de los procesadores de palabras [Gold99].Por ejemplo la referencia a la entidad &l t; en un documento XML se reemplaza por el símbolo "<".

Las entidades permiten separar un todo en partes físicas que facilitan la manejabilidad o ciertos procesos, pero también sepueden manipular como un todo cuando sea necesario. Por ejemplo, es tedioso imprimir un manual HTML que estásegmentado en cientos de archivos . ht ml unidos débilmente por enlaces (links). En XML, la información de cada archivo

. ht ml se escribiría como una entidad y en el archivo que represente el todo, contendrá referencias a las entidades

anteriores, el cual puede ser impreso con facilidad.

Las entidades pueden representar información en otra notación que no es XML, por ejemplo, imágenes, archivos de audio,archivos de vídeo, texto puro, HTML, etc. Estas entidades reciben el nombre de entidades no analizables sintácticamente.

Se dice que las entidades describen la estructura física y los elementos la estructura lógica de los documentos XML. Laestructura lógica (elementos) y física (entidades) se representa dentro del documento XML agregando el marcado, el cual sedelimita de los datos de carácter encerrando la descripción de los elementos dentro de paréntesis angulares (“<” y “>”), que

se conocen como etiquetas y las referencias a entidades entre el signo “&” y el punto y coma (“; ”). Es decir, el texto

encerrado dentro de estos cuatro caracteres se conoce como marcado, lo restante como datos de carácter. Lacombinación del marcado más los datos de carácter forman el texto XML [Gold99].

Es sabido que las cartas, tesis, guiones y las guías telefónicas son documentos que tienen una estructura muy diferente. Esdecir, poseen elementos distintos, cada uno con su propia distribución y orden. Se dice que son tipos de documentosdistintos. En XML cada tipo de documento se define en una notación formal que plasma su estructura llamada definición detipo de documento (DTD, Document Type Definition). A modo de ejemplo, la línea 2 del listado Listado 2.1 declara que eltipo de documento es un libro.

Se puede pensar en un DTD como una clase en programación orientada a objetos, mientras que un documento XML que seade ese tipo de DTD es como un objeto que instancia esa clase. El “objeto” documento XML debe cumplir a cabalidad con laestructura descrita en su DTD, cuando esto ocurre, se dice que el documento es de tipo válido o simplemente válido, de locontrario, se dice que el documento es de tipo no válido o simplemente no válido (pero no se usa el término "inválido")[Gold99].

Un documento XML puede no tener un tipo de documento definido, es decir, carece o no cumple con un DTD, por lo que esun documento no válido pero puede respetar la sintaxis XML, en tal caso se dice que sólo es un documento bien formado(well formed). Los documentos bien formados pero no válidos (no cumplen un DTD) suelen util izarse para documentospequeños que deben escribirse de forma rápida. Los documentos válidos siempre están bien formados y son necesarioscuando son muy extensos o deben procesarse por algún sistema computacional [Gold99].

2.2 Sintaxis general de XML

Sintácticamente, un documento XML es una secuencia, flujo o cadena de caracteres usualmente en formato Unicode. Dentrode esa secuencia, los caracteres encerrados entre paréntesis angulares (“<” y “>”) y las referencias de entidades (“&” y “; ”)

son el marcado, los demás son los datos de carácter .

Dentro del marcado suelen definirse identificadores como nombres de elementos, entidades u otros. Por ejemplo, la línea3 del listado Listado 2.1 incluye tres identificadores: book, name y versi on. Los identificadores deben iniciar con una letra ypueden estar seguidos de cero o más letras o los caracteres punto, guión o dígitos. Los identificadores en XML son sensitivosa mayúsculas y minúsculas (case sensitive), esto implica, por ejemplo que book, Book y boOK se tomen como identificadoresdistintos. El autor puede emplear cualquier identificador válido, excepto aquellos que inician con la cadena “xml ” en

cualquiera de sus combinaciones de mayúsculas y minúsculas, ya que están reservados para propósitos de estandarización


99 22/09/2015 1



[Gold99].

Varios espacios en blanco, tabuladores y cambios de línea se ignoran a menos que sean cadenas literales, las cuales seescriben entre comillas dobles (") o simples (' ) o una combinación de ambas, pero con la restricción de que la comilla que

cierra la cadena debe ser del mismo tipo de la que abre. Esto implica que un software que procese el li stado Listado 2.1,deberá ignorar los cambios de línea y espacios en blanco que rodean al párrafo en las líneas 16 y 17.

Los documentos XML constan de dos partes: encabezado (head) y cuerpo (body). El encabezado de un documento XMLrecibe el nombre de prólogo de documento y almacena información que describe al cuerpo del documento, como laversión de XML, el tipo de documento (DTD) al que pertenece, la codificación y otros. El cuerpo del documento XML recibe elnombre de instancia de documento, que contiene los datos reales del documento.

Los elementos se pueden anidar, formando un árbol. Los elementos dentro de otros se l laman elementos hijos y a loscontenedores, elementos padres. Sólo puede existir un único elemento raíz, también l lamado elemento documento,que contiene a todos los demás [Marc00]. En el l istado Listado 2.1 el elemento con identificador book es elemento raíz.

Los elementos se describen uti lizando etiquetas. Una etiqueta es el marcado entre un par de signos “menor que” y “mayorque”. Un elemento es la combinación de una etiqueta de inicio (que puede tener atributos), un contenido opcional y unaetiqueta de cierre, es decir

<identificador_etiqueta_inicio atr i but os="val or" >cont eni do</identificador_etiqueta_cierre>

Un elemento tiene dos etiquetas, una de inicio y otra de cierre (o fin). La etiqueta de inicio se compone de un caráctermenor que (<), un i dent i f i cador_et i queta_ in i c i o que es un simple identificador y debe respetar las restricciones de los

identificadores; seguido por cero o más parejas atr i buto="val or" ; y un carácter de mayor que (>).

La etiqueta de cierre o etiqueta de fin consta de los caracteres menor que (<) y un slash (/ ), luego uni dent i f i cador_eti quet a_ci err e que obligatoriamente debe ser el mismo identificador que el de la etiqueta de inicio del

elemento y un carácter de mayor que (>). La etiqueta de cierre nunca tiene atributos.

El contenido del elemento puede ser nulo o texto XML, es decir, datos de carácter, otros elementos (y por ende etiquetas)o ambos. Si un elemento no tiene contenido se dice que es un elemento vacío, y se puede escribir en cualquiera de las dossiguientes formas:

<id_elemento atr i butos="val or" ></id_elemento><id_elemento atr i butos="val or" />

La segunda de las formas anteriores consta de una sola etiqueta llamada etiqueta vacía, la cual finaliza en un slash (/ )

indicando que el elemento ha terminado. Es poco común encontrar etiquetas vacías sin atributos.

Si un elemento tiene contenido (no es vacío) y se omite alguna de las etiquetas (la de inicio o la de fin) el procesador XMLdeberá alertar de que el documento no está bien formado.

Debe quedar claro que las etiquetas no son elementos. Las etiquetas inician con un '<' y terminan con un '>', lo demás noson etiquetas [Gold99]. Los elementos tienen etiquetas y contenido. Los elementos se escriben en el documento XML y soninstancias de los tipos de elementos, los cuales se declaran en la definición del tipo de documento (DTD).

Los elementos pueden tener atributos que son “una forma de incorporar características o propiedades a los elementos de undocumento” [Gold99, 353]. Un atributo se compone de un identificador, un signo de igual (=) y un valor entre comillas

(dobles, simples o una combinación de ambas).

2.2.1 El prólogo de documento

El prólogo de un documento suele incluir la declaración de XML y la declaración del tipo de documento, en ese orden;además de otras características como comentarios e instrucciones de procesamiento. Todas son opcionales, pero se aconsejamaximizar la cantidad de información en el prólogo ya que ayuda al procesamiento posterior del documento [Gold99]. Elprólogo termina cuando abre la etiqueta de inicio del elemento raíz, es decir, donde inicia la instancia de documento.

2.2.1.1 La declaración XML

La declaración XML indica que el documento usa notación XML e indica la codificación del mismo. Tiene la forma mínima<?xml vers i on="1. 0"?> y no posee una etiqueta de cierre. Tiene tres atributos: la versión, la codificación y el documento

autónomo:

La declaración de versión con el atributo ver si on, indica la versión de XML utilizada en el documento. Normalmente"1. 0" .

La declaración de codificación con el atributo encodi ng, indica la codificación de caracteres del documento. Aunque losprocesadores XML tienden a reconocer automáticamente la codificación, es mejor indicarlo explícitamente, porejemplo, " UTF- 8", "UTF- 16" o "i so-8859- 1" [Gold99]. Lo importante es que este atributo refleje realmente el tipo decodificación que usó para generar el documento.

La declaración de documento autónomo con el atributo st andal one no se suele util izar con frecuencia ni tampoco se


99 22/09/2015 1

recomienda su uso. Su comprensión es compleja y se explica ampliamente por Goldfarb [Gold99].

A modo de ejemplo, la declaración XML en su forma más amplia tiene la siguiente forma:

<?xml ver si on="1. 0" encodi ng="I SO- 8859-1" st andal one="yes" ?>

2.2.1.2 La declaración del tipo de documento

El otro elemento que se suele incluir en el prólogo es la declaración de tipo de documento, el cual indica el tipo dedocumento (expresado por un DTD) que se está utilizando en el documento. Por ejemplo, la segunda línea del listadoListado 2.1 indica que ese documento es de tipo "book":

<! DOCTYPE book SYSTEM " book. dt d">

La declaración DOCTYPE indica el tipo de documento y además instruye al procesador de XML dónde encontrar la definición

del tipo de documento (DTD), el cual puede estar escrito en el mismo documento XML o puede encontrarse en una entidadexterna (un archivo en disco o red) o una combinación de ambas. Lo más común es que se encuentre en un recursoexterno, como se hizo en la segunda línea del listado Listado 2.1, la cual instruye al procesador XML que el tipo dedocumento está en el archivo "book. dtd" en la misma ubicación que el documento XML. La palabra SYSTEM indica al sistemaque busque el recurso especificado en el URI (Universal Resource Identifier) que le continúa. Más adelante se estudiará lanomenclatura de un DTD.

El identificador del elemento que continúa inmediatamente después de <! DOCTYPE, por ejemplo, book en el listado Listado

2.1, indica al procesador XML a partir de qué elemento del DTD se debe incluir, es decir, sólo se incluye el subárbol cuya raízes precisamente ese elemento.

2.2.2 Marcado misceláneo

Además de los elementos y entidades definidos por el autor, a veces es necesario incluir cierto tipo de información que no sepuede lograr con estas estructuras. Por esto el autor puede agregar, además, entidades predefinidas, secciones CDATA y loscomentarios.

Las entidades predefinidas "son marcas que representan caracteres que de otro modo se interpretarían con un significadoespecial" [Gold99, 358], como los caracteres menor que (<) y ampersand (&). Existen cinco entidades predefinidas

mostradas en la Tabla 2.1. "Cuando el procesador XML analiza el documento, reemplaza las referencias de entidad por loscaracteres reales", en lugar de interpretarlos como caracteres de marcado [Gold99, 359].

Referencia de entidadValor

& &

&l t ; <

&gt ; >

' '

&quot ; "

Tabla 2.1. Entidades predefinidas en XML.

Aunque el uso de entidades predefinidas parece sencillo, hace que el documento XML se vuelva difícil de leer para el autor,en especial cuando se usan repetidamente, como ocurre al escribir segmentos de código fuente; por eso se crearon lassecciones CDATA; las cuales indican al procesador XML que no interprete una parte del texto aunque contenga marcado,es decir, que lo trate como datos de carácter (character data, de ahí la contracción CDATA). La sintaxis de una sección dedatos de carácter es

<! [ CDATA[ conteni do ] ] >

En el cont eni do puede aparecer cualquier cadena de texto, excepto la que cierra la sección CDATA (] ] >) llamada CDEnd . La

línea 29 del listado Listado 2.1 usa dos entidades preestablecidas. Este mismo elemento pudo haberse escrito con una

sección CDATA como

<p><! [ CDATA[ Su popul ari dad puede deberse a su "f aci l i dad de uso" y. . .] ] ></p>

Los comentarios son cadenas de caracteres que no son parte de los datos de carácter, es decir, es parte del marcado peroque debe ser ignorado por el procesador XML. Permiten al autor hacer anotaciones que le ayuden a comprender o recordarpartes del documento. El texto del comentario se introduce entre los caracteres inicio de comentario (<!- - ) y final de

comentario (- - >). Por ejemplo



Todo el texto dentro del inicio y fin de comentario será ignorado, incluyendo los caracteres de marcado (menor que,ampersand, comillas, etc.), excepto la secuencia de cierre del comentario (- - >).


99 22/09/2015 1



2.2.3 Semántica de los elementos XML

Cuando se escribe un documento XML, el autor escoge los identificadores de los elementos, los atributos y la estructura a sugusto y la plasma en un DTD. Cuando una persona observa el marcado de un documento XML y se pregunta “¿qué significaesto?” o bien “¿qué aspecto tendrá después?”, estará haciendo preguntas sobre su semántica. Por ejemplo, si se encuentrauna etiqueta <T> esta podría indicar que se trata de un título, una tabla o alguna otra cosa [Gold99].

La computadora no puede inferir la semántica de un documento XML dado, sino que es responsabilidad del autor de lagramática describir esta semántica para que otros autores puedan comprenderlo. Esta descripción se puede realizar porcorreo electrónico, un documento PDF (Portable Document Format), un l ibro, o cualquier otro medio de comunicación[Gold99].

Como señala Goldfarb, "lo que le interesa a la computadora es el aspecto que se supone debe tener un elemento cuandoestá formateado, la forma en que debe actuar si es interactivo o qué hacer después de extraer los datos. Estas cuestiones seencargan de especificarlas las hojas de estilo y los programas informáticos" [Gold99, 350].

2.3 La definición del tipo de documento (DTD)

La definición de tipo de documento (DTD, Document Type Definition) es "el conjunto de normas XML para larepresentación de documentos de un determinado tipo" [Gold99, 49]. En pocas palabras, el DTD describe la gramática deldocumento [W3C00], es decir, los tipos de elementos, sus atributos, entidades, algunas restricciones y cómo se relacionanentre ellos. Esta sección explica la sintaxis que XML util iza para representar estos conceptos y sus relaciones en un DTD.

Un documento XML que respete cabalmente las reglas establecidas en su DTD se dice que es válido. A modo de ejemplo, ellistado prettyprint linenums lang-xml 2.2 muestra el DTD referido en el libro del listado Listado 2.1 llamado book. dt d.

<! ENTI TY % Sect i onType1."f orework| pref ace| acknowl edgement s| dedi cati on| cont ent s">2.

3.<! ELEMENT book ( t i t l e, aut hors, f r ont - cover?, chapt er+, back-cover ?) >4.<! ATTLI ST book5.

name I D #REQUI RED6.ver si on CDATA #REQUI RED>7.

8.<! ELEMENT t i t l e ( #PCDATA) >9.

10.<! ELEMENT author s ( author+) >11.

12.<! ELEMENT author ( f ul l name, emai l ?) >13.<! ATTLI ST author14.

name I D #REQUI RED15.per cent CDATA #I MPLI ED>16.

17.<! ELEMENT f ul l name ( #PCDATA) >18.

19.<! ELEMENT emai l ( #PCDATA)>20.

21.<! ELEMENT f r ont- cover EMPTY>22.<! ATTLI ST f r ont - cover23.

i mg CDATA #REQUI RED>24.25.

<! ELEMENT chapter ( t i t l e?, ( p|sect i on) +) >26.<! ATTLI ST chapt er27.

name I D #REQUI RED28.t ype ( pr el i ms| cont ent s) "cont ent s">29.

30.<! ELEMENT p ( #PCDATA| em| st r ong| code) *>31.

32.<! ELEMENT em ( #PCDATA)>33.<! ELEMENT s t r ong ( #PCDATA) >34.<! ELEMENT code ( #PCDATA)>35.

36.<! ELEMENT sect i on ( ti t l e?, ( p| sect i on) +) >37.<! ATTLI ST sect i on38.

name I D #REQUI RED39. t ype ( %Sect i onType; ) " cont ent s"40.author I DREF #I MPLI ED>41.

42.<! ELEMENT back- cover EMPTY>43.<! ATTLI ST back- cover44.

i mg CDATA #REQUI RED>45.

2.3.1 Declaraciones de tipo de elemento

Entre otras cosas, en el DTD se escriben las declaraciones de tipo de elemento que son restricciones que deben respetartodos los elementos en un documento XML válido. Estas declaraciones tienen el siguiente formato

<! ELEMENT I dEl emento EspecConteni do>


99 22/09/2015 1



El <! ELEMENT inicia la declaración de un tipo de elemento. El I dEl ement o es el identificador que aparece en sus etiquetas.

Debe ser único en el DTD y respetar las restricciones de los identificadores expuestas en la sección Conceptos XML. LaEspecCont eni do se refiere a la especificación de contenido, que indica qué objetos pueden figurar en el contenido del

elemento, hay cuatro posibilidades [Gold99]:

Especificación de contenido de elementos XML.

Tipo Descripción

EMPTY Impide que el elemento tenga contenido y por tanto sus etiquetas son vacías. Ejemplo: front-cover en la línea 22 en elDTD del listado prettyprint linenums lang-xml 2.2.

ANY Puede contener cualquier elemento o carácter, lo cual no se recomienda ya que no es estructurado. Pueden ser útilescuando se está escribiendo el DTD para lograr que los documentos sean válidos mientras se está refinando dicho DTD.

element-

content

Sólo puede contener los subelementos listados dentro de paréntesis en la especificación de contenido. Por ejemplo, la

línea 26 del listado prettyprint linenums lang-xml 2.2 indica que los elementos chapter sólo pueden tener un títuloopcional y varios párrafos o secciones.

mixed-content

Permite al elemento contener subelementos, datos de carácter (#PCDATA) o ambos, como ocurre con el elemento depárrafo p en la línea 31 del listado prettyprint linenums lang-xml 2.2.

Cuando un elemento tiene subelementos (o elementos hijos) en el contenido (últimos dos casos de la lista anterior), esnecesario especificar un modelo de contenido (content model), que establece el orden y número de apariciones de lossubelementos.

El orden de los elementos hi jos se establece con los caracteres coma, barra vertical ( | ) y paréntesis. Una secuencia de

subelementos separados por coma indica que tales subelementos deben aparecer y en el mismo orden. La barra verticalindica que debe aparecer sólo uno de los dos subelementos que están en sus extremos. Los paréntesis agrupan partículas decontenido que son tratadas como unidades por los operadores anteriores, lo que permite combinarlos.

El número de apariciones de los subelementos se especifica con los indicadores de frecuencia que se escriben al final del

subelemento, sin espacios en blanco y son tres. El signo de interrogación (?) indica que el elemento hijo es opcional, esdecir, puede o no puede aparecer. El asterisco (*) indica que el subelemento puede aparecer 0 ó más veces (opcional y

repetible). El signo de más (+) indica que el subelemento puede debe aparecer 1 o más veces (necesario y repetible)

[Gold99].

2.3.2 Declaraciones de la lista de atributos

Los atributos “son una forma de incorporar características o propiedades a los elementos de un documento” [Gold99, 353].Un elemento puede tener una lista de atributos, la cual se declara en el DTD en la sección conocida como declaración delista de atributos, usualmente después de la declaración del tipo de elemento. Tiene la siguiente sintaxis

<! ATTLI ST I dEl ement o I dAt t Ti poAt t Def aul t Val ue>

El <! ATTLI ST indica que se va a declarar la lista de atributos del elemento identificado por I dEl emento. I dAt t indica el

nombre del atributo; debe ser un identificador válido y no es obligatorio que sea único en el documento. El tipo del atributo Ti poAt t puede ser alguno de los siguientes

Tipos de atributos en un DTD.

Tipo Descripción

CDATA Datos de carácter. Permite casi cualquier cadena de caracteres.

NMTOKEN Name token. Sólo permite letras, números y algunos caracteres especiales, como los que se utilizan para declararidentificadores, pero no obliga a que sea ún ico en el documento.

NMTOKENS Una lista de name tokens.

(a |b |c | d) Enumerados. La lista de valores permitidos se escribe dentro de paréntesis y separados por barras verticales (|), porejemplo el atributo type en la línea 29 del listado prettyprint linenums lang-xml 2.2.

I D Identificador. Declara que el atributo es un identificador único, es decir, su valor debe cumplir con las restricciones de losidentificadores y en el documento XML no puede haber dos o más atributos con el mismo valor.

I DREF Referencia a un identificador. Declara que el atributo tiene como valor una referencia a un identificador existente. Suvalor puede repetirse muchas veces en el documento XML pero debe respetar las restricciones de los identificadores.

ENTI TY Referencia a una entidad (o atributos de entidad). El valor del atributo debe ser el nombre de una entidad existente en eldocumento XML.

El Def aul t Val ue en la declaración de la l ista de atributos indica si el atributo se puede omitir o no, y el valor por defecto en

caso de que se omita. Puede tomar tres variantes:

Valores por defecto de atributos en un DTD.

Tipo Descripción

#REQUI REDIndica que el atributo es requerido y no se puede omitir, por tanto no tiene un valor por defecto. Son ejemplos name y

versi on de book en el listado prettyprint linenums lang-xml 2.2.

val ue

Un valor que está en el dominio de valores permitido por el tipo de atributo. Indica que ese será el valor que elprocesador XML tome si el autor no especifica uno en el documento. Por ejemplo, según la línea 29 del l istado prettyprintlinenums lang-xml 2.2, si el autor no especifica el tipo del capítulo, el procesador XML asumirá que se trata de uncapítulo de contenido y no uno preliminar.


99 22/09/2015 1



Tipo Descripción

#I MPLI ED Permite al autor omitir el valor del atributo pero sin forzar a escribir un valor por defecto determinado. El procesador XMLasignará algún valor que considere adecuado o lo ignora.

2.3.3 Elementos versus atributos

No es trivial decidir qué aspectos del mundo real deben modelarse como elementos y cuáles como atributos. Tampoco existeun diseño mejor que otro. El autor debe escoger alguna convención que sea coherente y escribir un DTD para obligar atodos los documentos del mismo tipo a cumplir con el diseño escogido. Aunque no hay ninguna regla para decidir qué debemodelarse como un elemento o un atributo, Goldfarb sugiere las siguientes ideas.

Los atributos no pueden contener “subatributos” ni elementos, sino que son pequeños trozos de texto sin estructura o listasde condiciones. Por tanto, si algo del mundo real contiene otras partes que también deben modelarse, debe hacerse conelementos y no con atributos. Los atributos se usan para añadir poca información, sencilla y sin estructura [Gold99].

Los elementos deben respetar el orden y el número de ocurrencias descritos en el DTD, mientras que los atributos puedenaparecer en cualquier orden y no pueden repetirse. Por esto, las “cosas” que deben repetirse o que respetan cierto ordendeben modelarse como elementos y no como atributos [Gold99].

Si las ideas anteriores no son criterio suficiente, puede usarse la siguiente heurística. Los elementos se utilizan pararepresentar partes de los objetos, o datos que son parte del contenido principal, y deben aparecer en todas las impresioneso interpretaciones del documento. Los atributos se uti lizan para representar propiedades de los objetos, es decir,información sobre los datos reales (metadatos) y que no necesariamente debe imprimirse [Gold99].

2.3.4 Entidades XML

Las entidades “permiten al documento dividirse en varios objetos de almacenamiento y son herramientas importantes paravolver a utilizar y mantener el texto... Una entidad es como una abreviatura y se utiliza como una forma corta de algunostextos. La abreviatura se llama nombre de la entidad y la forma larga contenido de la entidad. El contenido puede sertan corto como un carácter o tan largo como un capítulo” [Gold99, 389].

Las entidades se utilizan con referencias de entidades, cuya sintaxis consiste en escribir el nombre de la entidad entre loscaracteres ampersand (&) y punto y coma (; ). Cuando el procesador XML encuentra una referencia de entidad, la reemplaza

por el contenido de la misma, proceso conocido como inclusión. Las entidades se crean con declaraciones de entidad,con una de las dos siguientes notaciones, donde los corchetes indican opcional:

<! ENTI TY [%] I dEnt i dad "cont eni do"><! ENTI TY [ %] I dEnti dad SYSTEM url [ NDATA f or mato]>

Hay tres criterios para clasificar entidades y por tanto, 8 combinaciones de las cuales 5 son válidas. Los criterios son

Analizables o no analizables

Internas o externas

Generales o parámetro

Las entidades cuyo contenido es texto XML que debe ser analizado por el procesador XML reciben el nombre de entidadesanalizables (parsed entities). Si el contenido de la entidad es código ajeno a XML (como imágenes o texto puro) que nodebe analizarse, se denomina entidades no analizables. Las entidades no analizables terminan en NDATA seguido por unindicador del formato, como ocurre con cedul a en el listado prettyprint lang-xml 2.13. Las entidades que no se declaran con

NDATA son analizables.

Las entidades externas son aquellas cuyo contenido está en un recurso fuera de la declaración de la entidad, y por tantodebe proveerse un URL hacia ese recurso precedido por la palabra SYSTEM o PUBLI C, como ocurre con cap01 y cedul a en el

listado prettyprint lang-xml 2.13. Mientras que el contenido de las entidades internas está escrito en la misma declaraciónde la entidad entre comillas, como ocurre con adn y f rase en el listado prettyprint lang-xml 2.13.

Reciben el nombre de entidades generales aquellas que se pueden referenciar en cualquier lugar del documento XML,

como ocurre con &adn; del l istado prettyprint lang-xml 2.13 y las entidades predefinidas, como & que son declaradaspor el procesador XML. Las entidades que sólo se pueden referenciar dentro del DTD se conocen como entidadesparámetro. Es decir, son de uso exclusivo del DTD y no se pueden referenciar desde el documento XML. Se declarananteponiendo un %y se referencian usando la notación %I dEnt i dad; en lugar de &I dEnt i dad; como ocurre con %Sect i onType;

en las líneas 1 y 40 del listado prettyprint lang-xml 2.9.

<! ENTI TY adn "áci do desoxi r r i bonucl ei co"><! ENTI TY f r ase " si <emp>no</emp> t i enes una sol uci ón sos part e de l o que cr i t i cas"><! ENTI TY cap01 SYSTEM "htt p:/ / www. mi si t i o. com/ l i br o/cap01. xml "><! ENTI TY cedul a SYSTEM " cedul a. gi f " NDATA GI F><! ENTI TY % Sect i onType "f orework| pref ace| acknowl edgement s| dedi cati on| cont ent s" >

Los identificadores externos “hacen referencia a información que se encuentra fuera de la entidad en la que tienen lugar” [Gold99, p404]. Existen dos tipos, los identificadores de sistemas (SYSTEM) y los identif icadores públicos (PUBLI C).

Los identificadores de sistemas utilizan la palabra clave SYSTEM y se refieren a un objeto por su localización utilizando un


99 22/09/2015 1



URI (Universal Resource Identifier). Pueden ser direcciones absolutas o relativas a la ubicación de la entidad documento quecontiene el identificador. La siguiente declaración referencia el recurso "htt p: / / www. serv. com/ di r/ cap02.xml " :

<! ELEMENT cap02 SYSTEM "ht t p: / / www. ser v. com/ di r / ">

Los identificadores públicos util izan nombres declarados públicamente para referirse a la información. Estos nombresdeben ser únicos en el mundo. Tienen cuatro partes separadas por dos slash (/ / ). La primera parte es un carácter de suma

(+) si la organización que publica el recurso está registrada en el ISO, sino es un carácter de menos (- ), lo cual ocurre con

mayor frecuencia. La segunda parte es el dueño del recurso. La tercera parte es la descripción del recurso, que permiteespacios en blanco. La última parte es el lenguaje en que está escrito el recurso [Marc00]. Los dos siguientes ejemplos dedeclaraciones de tipo de documento emplean identificadores públicos. El primero de ellos es ficticio.

<! DOCTYPE book PUBLI C "- / / ECCI - UCR/ / DTD book/ / EN" "htt p: / / www. ecci . ucr. ac. cr/ dtd/ book. dt d">

<! DOCTYPE ht ml PUBLI C "- / / W3C/ / DTD XHTML 1. 0 Str i ct / / EN" "htt p: / / www. w3.or g/TR/ xht ml 1/DTD/ xht ml 1- st r i ct . dtd">

2.4 Espacios de nombres (namespaces)

2.5 La familia de tecnologías XMLLas secciones anteriores discutían sobre el núcleo de la especificación del XML 1.0, llamado XML Core, El W3C y otrasorganizaciones continuaron extendiendo la especificación original, definiendo estándares que en conjunto se conocen comola familia de tecnologías XML [Arci02], cuyo estudio sobrepasa los límites de este documento. En los siguientes títulos secitan algunas de las más importantes tecnologías agrupadas en categorías.

2.5.1 Modelaje y validación avanzada

Informalmente, un esquema es un documento que describe otro documento. Por ejemplo, un DTD X es un esquema que

describe la estructura de los documentos que son de tipo X. Los DTD son relativamente simples, ampliamente utilizados,

flexibles y extensibles, pero tan pronto como se util izan, se hace claro sus inconvenientes: no permiten asociaciones yrestricciones complejas entre los datos, no poseen tipos de datos y no utilizan notación XML, entre muchos otros. Por esto,el grupo de trabajo en XML dio origen a la notación llamada XML Schema, que permite al autor incorporar másrestricciones sobre los documentos XML [Walm02].

Además del XML Schema, se han desarrollado otros lenguajes con alto grado de éxito pero que no son oficialmenteapoyados por el W3C. Ejemplos son, Schematron y RELAX NG (Regular Language description for XML) [Arci02].

2.5.2 Ligar y apuntar

Uno de los aspectos más exitosos del HTML es el hipervínculo. El XML extiende este concepto permitiendo la creación devínculos (enlaces) tanto sencillos como altamente complejos. El estándar aprobado por el W3C para ligar recursos se llamaXLink.

El HTML provee el carácter # para hacer referencia a una parte específica dentro de un recurso. En XML, el estándar

XPointer es un lenguaje no ambiguo que permite apuntar a cualquier elemento o atributo dentro de un documento XML.

2.5.3 Interfaces de programaciónCuando un sistema planea utilizar tecnología XML, debe implementar un módulo que se encarga de leer o escribirdocumentos XML. Este módulo no es de fácil desarrollo, más si se quiere que soporte la especificación formal del XML ytecnologías estándar como las descritas en los párrafos anteriores. Además, si cada sistema que requiere XML en el mundoimplementara ese módulo, habría trabajo repetitivo considerable y costoso.

El módulo que se encarga de procesar archivos XML debe aislar a la aplicación del usuario de los detalles técnicos del XML.Este módulo comúnmente se denomina XML parser (analizador XML) y existen muchos gratuitos y de código abierto. Sicada uno tuviera su propia interfaz, obligaría al desarrollador a revisar la documentación del parser que vaya a emplear y, siposteriormente quisiera cambiar de parser, tendría que estudiar el nuevo parser y reescribir su programa para adaptarlo.Por esto, un acuerdo mutuo entre programadores de XML ha dado origen a estándares de interfaz entre la aplicación y elparser. Hay dos API (Application Programming Interface) estándar: SAX y DOM.

El Simple API for XML (SAX) especifica los objetos y sus funciones, tanto los que debe implementar el parser como laaplicación, utilizando el modelo de eventos, el cual funciona de la siguiente forma. El parser recorre el documento XML


99 22/09/2015 1



carácter por carácter, identificando elementos, atributos, datos de carácter, referencias de entidad, etc. Cada vez que elparser identifica uno de esos componentes léxicos, actúa como si fuese un evento y realiza un llamado a la aplicación paraque lo atienda, pasándole como parámetros los lexemas identificados. SAX es un enfoque bastante rudimentario pero esmuy eficiente.

El segundo API estándar es el Document Object Model (DOM) que se basa en el modelo de documento, esto es, el parserrecorre el documento XML construyendo una estructura jerárquica compuesta de nodos, los cuales pueden ser elementos,atributos o datos. Cuando se ha terminado de analizar el documento XML, el árbol de objetos nodo estará construido y sepasará como parámetro a la aplicación, la cual podrá utilizarlo para sus propios fines [Gars02].

2.6 El lenguaje extensible de hojas de estilo (XSL)

Un documento XML sólo sirve para representar datos y su estructura. El estándar XML define una familia de lenguajesllamada lenguaje extensible de hojas de estilo (XSL, Extensible Stylesheet Language), que permiten a los autores darformato a los documentos XML o transformarlos en otros documentos como (X)HTML o PDF (Portable Document Format).XSL se compone de los siguientes tres lenguajes.

XSLT . Es un lenguaje que permite transformar un documento XML en otro documento de texto, como (X)HTML.1.

XSL-FO. Es un lenguaje para especificar el formateo visual de un documento XML.2.

XPath. Un lenguaje de consultas para seleccionar partes (nodos) de un documento XML. Es usado principalmente porXSLT.

3.

2.6.1 Transformaciones XSL (XSLT)

Para transformar un documento XML a otro documento de texto, como (X)HTML, CSV (Comma-Separated Values file), textopuro u otro tipo de documento XML; el autor puede escribir una hoja de estilos, que es un conjunto de instrucciones o reglasen notación XSLT (Extensible Stylesheet Language Transformations) que indican cómo se debe transformar cada pieza deinformación (nodo) presente en el documento XML. Un software l lamado Procesador XSLT (XLST Processor) toma estosdos documentos por entrada, aplica las reglas de la hoja de estilos al documento XML y el resultado es el documentotransformado. Este proceso se ilustra en la figura siguiente.

libro.xml libro_web.xsl

Proces ador XSLT

libro.html

d o c u m e n t o X M L h

o j a d e e s t i l o s

d o c um e n t o t r a n s f o r m a d o

En general el proceso de transformación es como sigue. El procesador XSLT analiza el documento XML y genera un árbol denodos conocido como DOM (Document Object Model). Luego procesa la hoja de estilos. Cada regla definida en ella afecta auno o varios nodos del documento. Una regla consta de dos partes: una consulta (query) que sirve para identificar a cuálesnodos debe aplicarse, y una operación que debe efectuarse en esos nodos. La consulta puede asemejarse a otros lenguajesde consulta como SQL (Structured Query Language), pero emplea una notación especial llamada XPath, mencionadaanteriormente. La operación consta de texto literal que aparecerá en la salida o de trozos del elemento al que se le estáaplicando la regla. La concatenación de todas las salidas constituye el documento transformado que desea el autor.

La forma de invocar al procesador XSLT varía dependiendo de la implementación. Las hay en forma de ejecutables en líneade comandos, como bilbiotecas compartidas (. so, . d l l ), incorporados en un navegador o una mezcla de ellas. Por ejemplo,

libxslt del proyecto GNOME puede usarse como una biblioteca compartida desde cualquier programa, o en línea decomandos como se muestra en el siguiente ejemplo:

xslt proc l i bro_web. xsl l i bro. xml > l i bro. html

La mayoría de navegadores web actuales implementan un procesador XSLT internamente, sin embargo no hay forma deindicarles en un URL la ubicación del documento XML y la hoja de estilos simultáneamente. Pero si el autor indica en elprólogo del documento XML cuál hoja de estilos quiere que se aplique, el navegador hará la trasformación y tratará dedesplegar (rendering) el resultado directamente. Un documento XML declara su hoja de estilos con la instrucción deprocesamiento xml - st yl esheet , por ejemplo:

<?xml ver si on="1. 0" encodi ng="UTF-8" ?>1.<! DOCTYPE book SYSTEM "book. dtd">2.<?xml - st yl esheet hr ef ="book_web. xsl " t ype="text / xs l " ?>3.


99 22/09/2015 1

4.<book name="Mi Li bro" versi on="1. 0">5.

6.</book>7.

2.6.2 Formateo de objetos (XSL-FO)


99 22/09/2015 1



3 El lenguaje de marcado de hipertexto (X)HTML

El lenguaje HTML nació como una aplicación SGML en 1991 y su mayor volumen de estandarización fue en la versión 4.0 de1997. En 1998 el W3C publicó una simplificación de SGML llamada XML. En el 2000 el W3C publicó XHTML 1.0 como unaadaptación de HTML sobre XML y actualizó HTML a 4.01 con el fin de que fuesen cercanamente compatibles. Después deello, parece que el W3C ha centrado su atención en XHTML restando trabajo a HTML. El desarrollador web se puede estarpreguntando cuál de estos dos lenguajes escoger para un sitio en que va a trabajar. Necesitará entender las diferencias parafundamentar su decisión.

HTML es bastante liberal, mientras XHTML es inherentemente estricto. El listado <a> muestra un trozo de código HTML y ellistado <b> el mismo contenido en XHTML. Las principales diferencias entre estos dos lenguajes son las siguientes.

Los identificadores en HTML no son sensitivos a mayúsculas ni minúsculas; mientras que en XHTML lo son y losdefinidos por la recomendación usan minúsculas consistentemente.

1.

HTML permite dejar elementos sin cerrar como p y l i , otros nunca se cierran como br e i mg; mientras que en XHTML

todo elemento debe cerrarse obligatoriamente.

2.

HTML permite minimizar atributos (attribute minimization), esto es, omitir las comillas alrededor de los valores deatributos que sólo contienen letras, números o los caracteres guión (- ), punto (. ), guión bajo ( _ ) o dos puntos (: ).

XHTML exige que todo valor de atributo debe estar encerrado entre comillas.

3.

HTML permite que algunos atributos no tengan valor como noshade en <hr wi dt h=" 50%" noshade>, la presencia del

atributo es suficiente para generar su efecto. XHTML exige que todo atributo tenga un valor entre comillas, y paraestos casos, el Consorcio Web tomó la convención de repetir el nombre del atributo en su valor, ejemplo: <hrwi dt h=" 50%" noshade=" noshade"> [Cast06].

4.

Es evidente que escribir HTML es más relajante que XHTML, si ambos producen el mismo efecto en el navegador ¿por quémolestarse con XHTML? HTML obliga al navegador a programar excepciones y reglas circunstanciales que dilatan elprocesamiento y propician a la ambigüedad. XHTML obliga a una sintaxis restringida que facilita al navegador y otrossoftware XML a interpretar código fácil y eficientemente. Además XML abre un conjunto de funcionalidades y tecnologías

que no están disponibles para HTML, como la posibilidad de incrustar otras especificaciones como SVG y MathML en losdocumentos XHTML.

Si una persona piensa escribir algunas páginas manualmente, quizá HTML sea la mejor alternativa. Si planea que esaspáginas formen parte de un sitio web grande, sean almacenadas en bases de datos o procesadas por algún tipo de software,es mejor que elija XHTML. En general se cumple que código XHTML válido es también código HTML válido, no el recíproco.Por eso este capítulo conferirá énfasis a XHTML y las diferencias importantes con HTML se resaltarán en su contexto.

3.1 Estructura global

Un documento web es muy similar a cualquier otro documento que una persona podría escribir en un procesador depalabras, y por ende tiene títulos, párrafos, tablas, imágenes, enlaces, estilos y otros elementos familiares. La principal


99 22/09/2015 1

diferencia es que un documento web debe seguir estrictamente la sintaxis de (X)HTML. Al hacerlo, cualquier software(X)HTML podrá manipular el documento, sea un navegador, un programa de diseño, un motor de bases de datos y hasta elmismo procesador de palabras mencionado anteriormente. Dado que el navegador es el más común, se usará en este textopor claridad en lugar de software (X)HTML.

Un documento web se compone de cuatro partes: la declaración del tipo de documento, el elemento documento, elencabezado y el cuerpo. El listado prettyprint linenums lang-html 3.1 muestra un ejemplo de documento web con estascuatro partes. Los comentarios utilizan la misma notación de XML y pueden aparecer en casi cualquier lugar del documento.

<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"1."ht t p: / / www. w3. org/ TR/ xht ml 1/ DTD/ xht ml 1-st r i ct . dt d">2.

3.

<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml ">4. <head>5.<meta ht t p- equi v="Cont ent - Type" cont ent ="t ext / html ; char set =utf - 8" />6.<title> Tí t ul o del document o</title>7.

</head>8.9.

<body>10.11.

</body>12.</html>13.

3.1.1 La declaración del tipo de documento

La declaración del tipo de documento, expresada con la etiqueta <! DOCTYPE . . . >, informa al navegador el tipo de documento

(HTML o XHTML) y la versión usada en el resto del documento. Con esto el navegador sabrá cómo interpretar la sintaxis ycontra cual especificación validar su código. La tabla html_doctypes muestra los tipos de documentos y sus versiones

actualmente en uso. [Para una lista completa que incluye tipos de documentos para XHTML-Basic y XHTML Mobile Profile,consulte http://en.wikipedia.org/wiki/DOCTYPE].

Tipos de documento (X)HTML de acuerdo a su versión y variación

Language Ver. Variation Document type

HTML 4.01

strict<! DOCTYPE html PUBLI C "- / / W3C/ / DTD HTML 4. 01/ / EN""htt p: / / www. w3. org/ TR/ html 4/ str i ct. dtd">

transitional<! DOCTYPE html PUBLI C "- / / W3C/ / DTD HTML 4. 01 Tr ansi t i onal / / EN""htt p: / / www. w3. org/ TR/ html 4/ l oose. dtd">

frameset<! DOCTYPE html PUBLI C "- / / W3C/ / DTD HTML 4. 01 Frameset / / EN""htt p: / / www. w3. org/ TR/ html 4/ f rameset . dtd">

XHTML

1.0

strict<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 Str i ct / / EN""htt p: / / www. w3. org/ TR/ xht ml 1/ DTD/ xht ml 1- st r i ct . dt d">

transitional<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 Transi t i onal / / EN""htt p: / / www. w3. org/ TR/ xht ml 1/ DTD/ xht ml 1- t r ansi t i onal . dt d">

frameset<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 Fr ameset / / EN"

"ht t p: / / www. w3. org/ TR/ xht ml 1/ DTD/ xht ml 1-f r ameset. dtd">

1.1 --<! DOCTYPE ht ml PUBLI C "- / / W3C/ / DTD XHTML 1. 1/ / EN""ht t p: / / www. w3. org/ TR/ xht ml 11/ DTD/ xhtml 11. dtd">

(X)HTML 5.0 -- <! DOCTYPE ht ml >

Aunque en HTML es opcional, siempre es conveniente incluir el tipo de documento; y a menos de que se esté usando(X)HTML5 es difícil memorizarlos. Por eso los autores históricamente han tenido una fuente de la cual copiar y pegar lostipos de documentos en sus creaciones, o confiar en un programa de diseño web que haga el trabajo automáticamente.

Si se omite la declaración del tipo de documento, la mayoría de navegadores entran en "quirks mode", un modo decompatibilidad para poder desplegar páginas web obsoletas que contienen errores o "quirks", con resultados dependientesdel navegador. Si la declaración del tipo de documento está presente, el navegador entra en modo estándar, y si eldocumento es válido, el comportamiento debería ser homogéneo entre navegadores.

El W3C ofrece varias herramientas gratuitas para asegurar la calidad (QA, Quality Assurance) de un sitio web. Entre ellas elautor puede someter cualquier documento al W3C's Unified Validator (Unicorn) y recibir retroalimentación de si está bienformado, se conforma al tipo de documento que tiene declarado, no tiene enlaces rotos y los estilos que usa son válidos.

Dado que XHTML es una aplicación XML, todo documento XHTML debe iniciar con la especificación XML como se ve en elcódigo de abajo. El W3C recomienda esta práctica, sin embargo, algunas versiones antiguas de navegadores puedenconfundirse y entrar erróneamente en "quirks mode", por lo que muchos autores omiten la especificación XML en susdocumentos XHTML.

<?xml ver si on="1. 0" encodi ng="UTF-8" ?>1.<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"2.

"htt p: / / www. w3. or g/ TR/ xht ml 1/DTD/ xht ml 1-st ri ct. dtd">3.<html>4.. . .5.</html>6.

Al omitir la declaración XML se pierde la oportunidad de informar sobre la codificación del documento. Como un rodeo, los


99 22/09/2015 1



autores lo hacen en el encabezado (X)HTML con un elemento de metainformación, como se hizo en la línea 6 del listadoprettyprint linenums lang-html 3.1.

3.1.2 El elemento documento

El elemento documento o elemento raíz de un documento (X)HTML es ht ml . Normalmente se escribe sin atributos, lo cual es

válido tanto en HTML como XHTML. Su único atributo exclusivo en XHTML es el espacio de nombres xml ns, el cual sirve para

indicar que sus identificadores pertenecen al espacio de nombres de XHTML y así evitar que colisionen con otrasespecificaciones. Los demás atributos son los comunes para casi todos los elementos XHTML, mostrados en el cuadro[tab:AtributosComunesXHTML], a excepción de cl ass. El elemento raíz ht ml sólo admite dos elementos hijos: un

encabezado (head) y el cuerpo del documento (body).

Atributos comunes para la mayoría de elementos (X)HTML

Atributo Descripción

i d Un nombre que identifica de forma única a un elemento, de tal forma que se le puede hacer referencia posteriomente, enespecial en hojas de estilo y programas de JavaScript.

cl assSirve para agrupar varios elementos bajo un identificador común. A todos los elementos de una misma clase se les puedeaplicar estilos o acceder desde un programa de JavaScript. Por su parte, un elemento puede pertenecer a varias clases, lascuales se separan por espacios en blanco en el valor de este atributo.

xml : l angIndica el idioma en el que se encuentra el contenido del elemento. Su valor es un código de idioma en el estándar[http://www.loc.gov/standards/iso639-2/php/code_list.php||ISO-639]. Sólo está disponible en XHTML. Tiene p rioridadsobre lang.

l ang Igual que xml:lang. Está disponible tanto en HTML como XHTML.

di r La dirección del texto que se encuentra en el contenido del elemento. Puede tomar tomar los valores ltr para izquierda aderecha y rlt para derecha a izquierda.

3.1.3 Encabezado del documento

El encabezado del documento (X)HTML contiene información sobre el documento mismo pero que no es consideradoparte del contenido, a lo que frecuentemente se le llama "metadatos" y son útiles para los navegadores o motores debúsqueda. Los elementos que pueden aparecer en el encabezado son: el título del documento, metadatos, hojas de estilo,programas de JavaScript y otros objetos. En esta sección se estudiarán los dos primeros.

El título del documento se escribe como un texto simple en el contenido del elemento t i t l e y es obligatorio en XHTML.

No es parte del contenido del documento porque las personas lo usarán antes de tener acceso a él. Por eso, es uno de lostextos más importantes y siempre debe escogerse con cuidado, tratando de que sea corto y descriptivo. Aparece en la barrade título del navegador y en los resultados de los motores de búsqueda como Google. Los lectores lo verán en el historial desu navegador y con suerte en sus favoritos.

Los metadatos son detalles sobre el contenido del documento como el autor, palabras clave, codificación del texto, etc. Seescriben en forma de parejas atributo-valor con el elemento vacío met a. El nombre del metadato se escribe en el atributo

name y el valor del metadato en el atributo content . Si el nombre del atributo es el mismo que una de las directivas delencabezado HTTP se puede escribir en el atributo ht t p- equi v en lugar de name. Cuando un documento web es solicitado, el

servidor web puede revisar el encabezado por estos metadatos ht tp- equi v y agregar las respectivas directivas en el

encabezado del mensaje de respuesta HTTP (HTTP Response header) que precede al documento.

La recomendación (X)HTML no define un conjunto de valores válidos para ninguno de los atributos de met a, sino que permite

libremente construir perfiles (profiles) de metadatos. El listado prettyprint linenums lang-html 3.3 muestra un ejemplo deencabezado con título y metadatos comunes. Para más detalles, revísese la especificación HTML 4.01. En versiones másrecientes de (X)HTML, el W3C ha adoptado una notación más elaborada para la especificación de metadatos llamada Marcode descripción de recursos (RDF, Resource Description Framework).

<head>1.<meta ht t p- equi v="Cont ent - Type" cont ent ="t ext / html ; char set =utf - 8" />2.<meta name="author" content="J ei sson Hi dal go- Céspedes" />3.<meta name="copyri ght" cont ent=" © 2011 ECCI - UCR" />4.<meta name=" keywords" cont ent ="desarr ol l o web, cur so, eval uaci ón" />5.<title>Cart a al est udi ant e</title>6.

</head>7.

3.1.4 Cuerpo del documento

El cuerpo del documento contiene el contenido del documento. Esto es lo que ve o escucha el usuario una vez que se hacargado. El contenido del elemento body puede ser texto puro en HTML, pero normalmente es una mezcla de los elementosque se explican en el resto de secciones de este capítulo.

3.2 Elementos de texto


99 22/09/2015 1



En esta sección se presentarán los elementos más comunes para estructurar el texto del documento web: encabezados desecciones (títulos), párrafos, texto preformateado, texto estructurado y listas de elementos.

3.2.1 Encabezados de secciones

Los autores suelen dividir sus creaciones en secciones temáticas. En (X)HTML no hay un elemento para especificar unasección temática completa, pero sí para delimitar el título o encabezado de cada sección. (X)HTML define 6 niveles deencabezados en orden descendente de importancia h1, h2, ..., h6. El navegador u otro software podría usar los encabezados,

por ejemplo, para construir una tabla de contenidos automáticamente.

El formato de cada encabezado es dependiente del navegador. Es usual que empleen tamaños más grandes y mayor pesopara que sean más vistosos. En general esto ocurre con todos los elementos visuales de (X)HTML y es bueno que elnavegador escoja su formato por defecto. De esta forma, el autor se concentra en escribir el contenido del documento y elnavegador escoge el formato ideal para un medio específico, por ejemplo, una limitada pantalla de un dispositivo móvil. Sinembargo, (X)HTML permite al autor controlar el formato utilizando hojas de estilo como se estudiará en el capítulosiguiente.

Es habitual que la primera actividad que realice un autor sea definir la estructura temática de su documento antes deempezar a escribir el contenido de cada sección. El listado prettyprint linenums lang-html 3.4 muestra los encabezados deuna carta al estudiante de un curso de programación web. Un abuso de indentación se hizo para resaltar la jerarquía deniveles de los encabezados de sección.

<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"1."ht t p: / / www. w3. org/ TR/ xht ml 1/ DTD/ xht ml 1-st r i ct . dt d">2.

<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml " xml : l ang="es">3.<head>4.

<meta ht t p- equi v="Cont ent - Type" cont ent ="t ext / html ; char set =utf - 8" />5.

<title>Cart a al est udi ant e</title>6. </head>7.8.

<body>9.<h1>Cart a al est udi ant e</h1>10.

<h2>Descri pci ón</h2>11.<h2>Obj eti vos</h2>12.

<h3>Obj eti vo general </h3>13.<h3>Obj et i vos especí f i cos</h3>14.

<h2>Cont eni do</h2>15.<h2>Metodol ogí a</h2>16.<h2>Eval uaci ón</h2>17.<h2>Bi bl i ograf í a</h2>18.


3.2.2 Párrafos

Un párrafo en (X)HTML se escribe con el elemento p como se aprecia en el l istado prettyprint linenums lang-html 3.5.

Aunque en HTML es opcional cerrarlo, es recomendable siempre hacerlo. A través de hojas de estilo se puede controlar elespaciado entre párrafos, la sangría y otros formatos. No escriba párrafos vacíos <p></ p> para tratar de dejar espacio enblanco en el documento, la especificación (X)HTML recomienda al navegador ignorar estos elementos.

<?xml ver si on="1. 0" encodi ng="UTF-8" ?>1.<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"2.

"htt p: / / www. w3. or g/ TR/ xht ml 1/DTD/ xht ml 1-st ri ct. dtd">3.<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml " xml : l ang="es">4.<head>5.

<title>Pr ogramaci ón en C++</title>6.</head>7.

8.<body>9.<p>10.

Uni ver si dad de Costa Ri ca<br />11.Escuel a de Ci enci as de l a Comput aci ón e I nfor mát i ca<br />12.CI 1201 - Programaci ón I I13.

</p>14.<hr>15.

16.<h1>I ntr oducci ón a l a pr ogr amaci ón</h1>17.<p>La computador a es un ar t ef acto el ectr o-matemáti co que puede ej ecut ar una secuenci a[. . . ] </p>18.

19.<h2>Hol a mundo en C++</h2>20.<p>21.

Desde el l i br o de Kerni ghan y Ri t chi e se ha segui do l a tr adi ci ón del pr i mer programa a22.most r ar s ea uno si mpl e: escri bi r l a cadena "Hol a mundo" en l a pant al l a o al gún ot r o23.medi o. La f orma de deci r "Hol a mundo en C++" se apr eci a en el si gui ente códi go:24.

</p>25.<pre>26.#i ncl ude &l t ; i ostr eam>27.

28.i nt mai n()29.{30.


99 22/09/2015 1



st d: : cout &l t; &l t ; "Hol a mundo" &l t ; &l t ; st d: : endl ;31.}32.</pre>33.</body>34.</html>35.

Párrafos y texto preformateado en (X)HTML. Correr este ejemplo.

A veces se quiere insertar un cambio de línea sin iniciar otro párrafo, por ejemplo, en un poema los versos se separan porcambios de línea y las estrofas por párrafos. Un cambio de línea se representa con el elemento vacío <br / >, y se aconseja

dejar el espacio en blanco antes de la barra inclinada que cierra la etiqueta, con el fin de evitar problemas con navegadoresviejos que no implementan XHTML.

Cuando la longitud de un párrafo excede el ancho de la ventana, el navegador inserta cambios de línea automáticos (wordwrap). Cuando se quiere evitar que el navegador por esta característica separe dos palabras, estas deben separarse por unespacio no divisible (not breaking space) obtenible por la referencia de entidad .

El hecho de que (X)HTML ignore los cambios de línea que usted escribe, no es práctico para escribir código fuente u otrostipos de escritos donde el espaciado en blanco es relevante. Para esas situaciones (X)HTML provee el elemento de textopreformateado pr e, el cual instruye al navegador mantener los espacios en blanco, usar una fuente monoespaciada y

desactivar el ajuste automático de l ínea (word wrap). La especificación recomienda reemplazar tabuladores por 8 espaciosen blanco, lo cual muchas veces resulta molesto, por eso, es recomendable utilizar espacios en blanco en lugar detabuladores en las secciones pre.

El navegador intentará interpretar el marcado (X)HTML que escriba dentro de un elemento pre, por esto debe al menos

reemplazar los tres caracteres especiales (<, > y &) con sus referencias de entidad respectivas (&l t ; , &gt ; y & ), o escribirel texto dentro de una sección CDATA si su documento es XHTML [Desdichadamente la mayoría de navegadores actualesignoran las secciones CDATA].

Un elemento hr (hard return) crea una línea horizontal que sirve para separar párrafos tratando de hacer una separaciónmás visible entre ellos, por ejemplo, para separar los cambios temáticos entre estrofas de un poema. Es un elemento vacío ysu apariencia debe ser estrictamente controlada con estilos.

3.2.3 Texto estructurado

(X)HTML define los elementos de frase (phrase elements) para agregar información a fragmentos de texto. Son elementosque afectan no a un párrafo sino sólo a algunas palabras de un párrafo, por ejemplo, denotan énfasis en una palabra, untrozo de código, una abreviatura, etc. La siguiente tabla lista los elementos de frase definidos en (X)HTML 4.01

Elementos de frase en (X)HTML

Elemento Descripción

abbr Indica una abreviatura, ej.: WWW, HTTP, etc., PhD. Son siglas o palabras reducidas.

acronym Indica un acrónimo, ej.: sonar, codec, JSON. Son abreviaturas que se leen como si fueran una palabra normal.

c i t e Indica una cita o referencia a otras fuentes. No soportado en la mayoría de navegadores.

code Indica un fragmento de código informático.

df n Indica un término que se está definiendo.

em Indica énfasis.

kbd Indica que el texto debe ser ingresado o tecleado por el usuario.

samp Indica salida de programas informáticos.

strong Indica mayor énfasis.

var Indica una variable de un programa informático.

Los dos elementos de frase de uso más común son emy strong. Normalmente los navegadores los despliegan en itálicas y

negritas respectivamente, pero se puede alterar con hojas de estilo. Los demás elementos de frase están orientados adocumentos técnicos. El l istado prettyprint linenums lang-html 3.6 muestra el uso de alguno de estos elementos.

<p>1.Se di ce que <em>l as enti dades</em> descri ben l a <strong>estructura f í s i ca</strong>2.y <em>l os el ement os</em> l a <strong>est r uct ura l ógi ca</strong> de l os document os3.<abbr t i t l e="Lenguaj e de marc ado extensi bl e ( eXt ensi bl e Markup Language) ">XML</abbr>.4.La est ruct ura l ógi ca (el ementos) y f í si ca ( ent i dades) se repr esent a dentr o del5.document o <abbr t i t l e=" Lenguaj e de marc ado extensi bl e ( eXt ensi bl e Markup Language) ">6.XML</abbr> agregando <strong>el marcado</strong>, el cual7.se del i mi t a de <em>l os datos de caráct er</em> encerr ando l a descri pci ón de l os8.el ement os dentr o de paréntesi s angul ares ( "<code>&l t ; </code>" y "<code>&gt ; </code>" ) ,9.que se c onocen como <dfn>eti quet as</dfn> y <em>l as ref erenci as a ent i dades</em> entre10.el si gno "<code>& </code>" y el punto y coma ( "<code>; </code>" ) . Es dec i r , el11.t exto encer r ado dentr o de est os cuat r o car act er es se conoce como <dfn>mar cado</dfn>,12.l o r est ant e como <dfn>dat os de car áct er</dfn>. La combi naci ón del <em>mar cado</em>13.más l os <em>dat os de car ácter </em> son el <dfn>t ext o XML</dfn> [ Gol d99] .14.

</p>15.

Elementos de frase en (X)HTML. Correr este ejemplo.


99 22/09/2015 1



Todos los elementos de frase tienen un atributo t i t l e, en el cual se puede escribir información adicional que aparece

cuando hay cierta interacción con el elemento, normalmente un "tooltip" cuando el puntero del ratón pasa sobre ellos. Estoes útil para expandir el significado de las abreviaturas y acrónimos sin tener que incluir estas definiciones explícitamente enel texto cada vez que se quiere usar la abreviatura. Nótese que esto se hizo en el l istado prettyprint linenums lang-html 3.6para la abreviatura "XML" que aparece dos veces, lo que genera redundancia de código. Teóricamente esta redundancia sepuede evitar en XHTML definiendo entidades generales en el parámetro interno del tipo de documento, sin embargo, losnavegadores actuales las ignoran, por lo que la mayoría de autores prefieren hacer algún tipo de programación del lado delservidor antes de despachar la página web.

Los elementos sub y sup sirven para declarar subíndices y superíndices respectivamente. Aunque tienen utilidad matemática

y en otras notaciones científicas, realmente se mantienen en la recomendación para otros textos. Ejemplos:

Subíndices y superíndices en (X)HTML

Texto Código (X)HTML

El 1ro de la clase El 1<sup>r o</ sup> de l a cl ase

May 3rd, 2011 May 3<sup>r d</ sup>, 2011

C6H12O6 C<sub>6</ sub>H<sub>12</ sub>O<sub>6</ sub>

3.2.4 Listas

(X)HTML permite definir listas de ítemes. Las hay en tres tipos: listas ordenadas, listas no ordenadas, y listas dedefiniciones. Las tres se pueden anidar. El siguiente listado muestra un ejemplo de los tres tipos de listas y su anidamiento:

<h1>Puest o: Desarr ol l ador web</h1>1.<h2>Requi si t os: </h2>2.<ul>3.

<li>Conoci mi ent o de est ándares web</li>4.<li>Pr ogramaci ón en PHP o J SP</li>5.<li>DBMS l i bres: PosgreSQL, MySQL o SQLi t e</li>6.<li>Af i l i ado al col egi o respecti vo</li>7.

</ul>8.9.

<h2>Procedi mi ent o de r ecl utaci ón</h2>10.<ol>11.

<li>Ll enar l a f órmul a RE- TI - C- 2348 a mano</li>12.<li>Present arl a en l as of i ci nas cent r al es</li>13.<li>Si es sel ecci onado:14.

<ol>15.<li>Presentarse a r eal i zar el examen RE- TI - E- 23</li>16.<li>Pr esentar se a r eal i zar el examen RE- LG- E-02</li>17.<li>Si es sel ecci onado: pr esentarse a tr abaj ar</li>18.

</ol>19.</li>20.

</ol>21.

22. <h2>Def i ni ci ones</h2>23.<dl>24.

<dt>DBMS</dt><dd>Dat abase Management Syst em</dd>25.<dt>RE-TI - C- 2348</dt><dd>Fórmul a de cual i dades para TI </dd>26.<dt>RE- TI - E- 23</dt><dd>Examen de t ecnol ogí as web</dd>27.<dt>RE- LG- E- 02</dt><dd>Examen bási co de i ngl és</dd>28.

</dl>29.

Listas de elementos en (X)HTML. Correr este ejemplo.

Las listas ordenadas se escriben con el elemento ol (ordered list). Sirven para indicar que los ítemes en la lista siguen

cierto orden, como en una serie de pasos a ejecutar o cuando se quiere simplemente enumerar ítemes. Cada ítem de la listase escribe dentro del elemento l i (list i tem). Los navegadores les anteponen números arábigos por defecto, pero con estilos

estos se pueden cambiar por números romanos, letras u otras formas.

Las listas no ordenadas se escriben con el elemento ul (unordered list). Sirven para indicar una lista de ítemes que nosiguen un orden inherente. Visualmente se anteceden con una viñeta circular que puede cambiarse con estilos enrectángulos u otras figuras.

Las listas de definiciones se escriben con el elemento dl (definition list). Sirven para escribir glosarios u otros tipos de

estructuras similares. A diferencia de los tipos de listas anteriores, los ítemes de las listas de definiciones constan de parejastérmino-definición. El término se escribe con el elemento dt (definition term) y su definición con el término dd (definition

description).

3.3 Enlaces

Un enlace es un mecanismo que permite acceder desde un documento web a otro documento web o cualquier otro recurso(un archivo de sonido, imagen, película, ejecutables, correos electrónicos, etc). Se escriben con el elemento a y su sintaxis

básica es como sigue:


99 22/09/2015 1

<a href ="desti no. ur l ">cont eni do del enl ace</a>

El valor del atributo href (contracción de hypertext reference) es un URL hacia el recurso que se quiere enlazar. El

contenido del enlace puede ser cualquier cosa, pero típicamente se usa un texto o una imagen. El navegador permitirá alusuario accionar el contenido del enlace, por ejemplo, haciendo click sobre él. Cuando esto ocurre, el navegador trata demostrar el recurso apuntado por el atributo href en la misma ventana donde está el documento con el enlace, y por tanto,

reemplaza a dicho documento. Si el navegador no sabe cómo presentar el recurso, tratará de invocar un programa que sí lohaga o permitirá al usuario guardar el recurso en su sistema de archivos.

Los elementos a nunca deben anidarse. A modo de sugerencia trate de usar como contenido del enlace texto que es parte de

la narrativa original del documento, no un "click aquí".

3.3.1 Anclas

El elemento a también permite darle nombre a un punto específico del documento, al cual se le puede hacer referencia

posteriormente con un URL. A este punto se le llama ancla (en inglés, anchor, de ahí el nombre del elemento a). La

siguiente notación crea un ancla en el documento

<a name=" nombr e_ancl a" />

Para hacer referencia a un ancla, se crea un enlace y se le indica al navegador que su destino es el nombre del ancla peroantecedido por un símbolo de número (#). De esta forma un enlace puede apuntar hacia un documento web, y con el

símbolo de número hacia una sección específica de dicho documento, como se ve en los siguientes ejemplos.



<a href ="#I nt r oducci on">I nt roducci ón</a>



<a href ="gl osari o. html #dtd">DTD</a>

Sin embargo, la practicidad de las anclas ha caído desde que el W3C permitió que cualquier elemento pueda ser identificadode forma única en el documento con el atributo i d, al cual se le puede enlazar utilizando el mismo símbolo de número (#),

como se ve en el siguiente ejemplo.

<h1> Tabl a de cont eni dos</h1>1.<p>2.

<a href ="#i ntr oducci on">I ntr oducci ón</a><br />3.<a href =" #ar q_web">Ar qui t ectur a web</a><br />4.

</p>5.6.

7.8.

<h1 i d="I nt r oducci on">I nt r oducci ón</h1>9.10.

11.<h1 i d="arq_web">Ar qui t ectur a web</h1>12.

3.3.2 Ventana objetivo

Cuando el usuario hace click en un enlace, el navegador reemplaza el documento con el recurso referido. A veces estecomportamiento no es el deseado. El atributo t arget del elemento a permite especificar el nombre de una ventana o frame.

Si no existe ninguna con el nombre especificado, el navegador creará una y mostrará en ella todos los recursos destinados aese nombre. Si se usa "_bl ank" como valor del atributo target , el recurso será siempre cargado en una ventana o pestañanueva del navegador.

<a href ="desti no. ur l " t arget ="vent ana_obj et i vo">cont eni do del enl ace</a>

Aunque el atributo target está disponible en todas las variantes de (X)HTML, es prohibido su uso directo en XHTML-Strict,

debido a que especifica comportamiento y eso es responsabilidad de JavaScript. Ante esta restricción se puede usar elatributo r el que indica la relación semántica entre el documento web y el recurso enlazado, y con JavaScript asignar elatributo target manualmente una vez que el documento se haya cargado. Esto se estudiará luego.

3.3.3 Acceso con el teclado

Los navegadores permiten acceder a los enlaces con el teclado, lo cual es importante para aquellos en modo texto o parapersonas con necesidades especiales. Esto además habilita otras opciones que el desarrollador web debe tener presente.

Se puede asignar atajos de teclado (keyboard shortcuts) a los enlaces más frecuentes de su sitio web con el atributoaccesskey, el cual recibe sólo un carácter, por ejemplo, accesskey="K". El navegador habilitará alguna combinación de teclas,

como Ct rl +K ó Al t +K , que permitirá activar el enlace o al menos seleccionarlo. Es normal que el autor dé una indicación en

el texto de que el enlace tiene un atajo de teclado, ejemplo:


99 22/09/2015 1



<a href ="#xht ml _keyboar d_shor t cuts " accesskey=" k">Acceso con el t ecl ado (Ctr l +K) </a>

Desdichadamente el comportamiento de los atajos del teclado son dependientes del navegador, y en algunos pueden nofuncionar o reemplazar otras operaciones preestablecidas del navegador.

La mayoría de navegadores permiten recorrer los enlaces, controles de formularios y otros elementos con la tecla tabulador.El autor puede alterar este orden con el atributo t abi ndex=" n", donde n es la posición en el orden que se quiere para ese

enlace o elemento. Si se le da un número negativo se sacará de la secuencia. Si dos elementos tienen el mismo valor paraeste atributo, el navegador seguirá el orden de aparición en el documento.

3.4 Imágenes

La característica más notable del hipertexto es el soporte de varios medios, entre los que se incluyen las imágenes, lascuales se almacenan en recursos (archivos) separados al documento web y se referencian desde éste. Para incluir unaimagen se utiliza el elemento vacío i mg, cuyo atributo sr c debe tener el URL que identifica el archivo con la imagen, y

puede ser absoluto o relativo al documento. La sintaxis más básica del elemento img es como sigue.

<img sr c="i magen. ur l " al t ="descri pci ón de l a i magen" />

(X)HTML requiere un texto alternativo que será desplegado cuando la imagen no es cargada por alguna razón, como imageninexistente o porque el usuario ha deshabilitado las imágenes en su navegador. Algunos navegadores muestran este textocomo un "tooltip" cuando el puntero del ratón pasa sobre ellas, pero esa función es realmente responsabilidad del atributotitle, el mismo que se usa en los elementos de frase estudiados en la sección de texto estructurado. Si la imagen se va ausar como una decoración y no se quieren "tooltips", asigne un valor vacío en estos atributos, de la forma <i mg al t =""

t i t l e=" " . . . / >. La apariencia del texto alternativo se puede ajustar con hojas de estilo.

3.4.1 Tamaños de imagen

Cuando el navegador está cargando un documento web y encuentra una etiqueta <i mg sr c="i magen. ur l " al t ="al gún t ext o"/ > con esos atributos, solicita al servidor web que le envíe una copia de la imagen. Mientras ésta llega, el navegador sigue

cargando (rendering) el resto del documento (X)HTML. Es muy probable que termine de mostrar el documento antes de quela imagen llegue y que el visitante empiece a leer el documento. Cuando finalmente la imagen es recibida, el navegador lainsertará en el lugar donde encontró el elemento i mg correspondiente, desplazando el texto que se encuentre debajo. Estoes molesto para el lector, en especial si el documento tiene un considerable número de imágenes o son de gran tamaño oambas.

El problema anterior se soluciona especificando las dimensiones de la imagen en el documento (X)HTML, de tal forma que elnavegador pueda reservar espacio para la imagen antes de que esta sea recibida. Simplemente especifique las dimensionesen pixeles con los atributos wi dth y hi ght .

<img sr c="i magen. ur l " al t ="t exto a lt ernat i vo" wi dt h="320" hei ght ="280" />

Si el valor indicado en los atributos ancho o alto de i mg no coincide con el tamaño real de la imagen, el navegador laescalará. También se puede especificar en ellos un porcentaje de la ventana, algo como wi dt h=" 75%" . Normalmente las

aplicaciones de diseño web se encargan de asignar los valores reales de la imagen en forma automática. El ancho y alto deuna o varias imágenes y otros detalles se pueden controlar con estilos, lo cual es muy úti l para un conjunto grande deimágenes que comparten las mismas dimensiones.

3.4.2 Formatos de imágenes

Aunque existen muchos formatos de imágenes, sólo unos pocos se pueden util izar en el web. La tabla Formatos de imagenmuestra una comparación de los formatos más soportados entre los navegadores actuales. Es tentador publicar imágenes dealta calidad, pero su tamaño será considerable y tardarán en cargarse en proporción inversa al ancho de banda del

visitante. Si una o muchas imágenes hacen lento el cargado de una página web, es una invitación al lector paraabandonarla. El autor debe hacer un balance entre la calidad de la imagen y su tamaño en bytes. Por esto es importanteque conozca la diferencia entre los formatos disponibles y cómo ajustar este balance.

Formatos de imagen soportados por navegadores

Formato Tipo Colores Transparencia Pérdida Utilidad

PNG Escalar 256 / 16M Sí No Ilustraciones

JPEG Escalar 16M No Sí Fotografías

GIF Escalar 256 Sí No Animaciones sencillas

SVG Vectorial 16M Sí No Ilustraciones

Cuando un autor quiere representar alguna pieza de información en forma gráfica, debe decidir si util izar una fotografía,una ilustración o una animación. Esta decisión ayuda en gran medida a delimitar el formato a escoger.


99 22/09/2015 1



Una fotografía tiene millones de colores o grises. Se obtienen por cámaras digitales o escáneres. Ambos dispositivos noproveen información de transparencia. El formato más recomendable para fotografías es el JPEG, creado en 1992 por elJoint Photographic Experts Group. Es un algoritmo de pérdida de calidad que trata de descartar detalles que el ojo humanono percibe con el fin de ahorrar espacio. El formato PNG (Portable Network Graphics) también puede almacenar fotografías,pero sin pérdida de calidad, lo cual es poco recomendable para el web ya que su tamaño compromete la velocidad de cargadel documento.

Una ilustración es una imagen, normalmente en dos dimensiones, que contiene texto o lo complementa. Suelen contenerdiagramas o dibujos hechos en un programa de cómputo, en contraposición a una cámara o escáner. La cantidad de coloresde una ilustración suele se reducida. El formato PNG o SVG (Scalar Vector Graphics) son aptos para ilustraciones, ladiferencia entre ambos es el tipo de imagen: escalar o vectorial respectivamente.

Una imagen escalar es un mapa de bits, es decir, una matriz de tamaño definido donde cada celda o pixel almacena uncolor codificado en forma numérica. "Redimensionar" a menor tamaño una imagen escalar provoca que ésta se deforme enespecial si no se mantiene su proporción. Si se agranda una imagen escalar provocará que los pixeles se propaguen a lasceldas adyacentes, generando zonas de colores poco agradables a la vista humana.

Una imagen vectorial está compuesta por figuras geométricas como puntos, líneas, curvas o polígonos. Sus atributos comoposición y tamaño son los que se almacenan en el archivo. "Redimensionar" una imagen vectorial a cualquier tamañosignifica reajustar las posiciones de las figuras geométricas y volverlas a pintar, lo que provoca que la imagen siempre sevea agradable a la vista humana.

La explicación anterior facilita la decisión hacia SVG como formato de elección para ilustraciones, sin embargo hay quetener en cuenta que, aunque SVG es un estándar abrigado por el W3C, su implementación en los navegadores actuales esparcial y quizá ausente en aquellos de dispositivos móviles, debido a que su despliegue requiere de mayor poder de cómputoque un PNG. Algunos sitios web como Wikipedia usan SVG, pero si el navegador no soporta este formato, el servidor webenvía a cambio un PNG autogenerado.

Si el autor encuentra que una animación es el mejor medio de comunicar algo, puede usar una imagen GIF (GraphicsInterchange Format), que permite animaciones escalares muy sencillas y limitadas a 256 colores. Si se requiereanimaciones vectoriales, el autor podría considerar HTML5 o Adobe Flash. Si se requiere animaciones de más de 256colores, se trata de un video y estos pueden incrustarse con objetos como se estudiará en la sección Objetos multimedia.

Indiferentemente de si se util izan imágenes escalares o vectoriales, el autor debe conseguir reducir el tamaño tanto comose pueda sin que la imagen se vea desagradable al lector. El autor necesita que el editor de imágenes lo apoye en esta labor.Normalmente estos programas proveen una opción que permite variar el tamaño en bytes de la imagen u otros parámetrosy ver el efecto en tiempo real en la visualización de la misma. Es importante que el autor guarde además la imagen originalen un formato con mayor calidad o sin pérdida alguna.

Existe considerable cantidad de editores de imágenes disponibles, desde los renombrados paquetes de Adobe: Photoshoppara imágenes escalares e Illustrator para imágenes vectoriales. Como opciones libres a estos programas se puede citarGimp e Inkscape respectivamente.

3.4.3 Icono de favoritosSe ha convertido en una práctica común proveer un pequeño icono que ayuda al visitante a identificar la página web. A esteicono se le suele llamar icono de favoritos ó simplemente favicon (contracción de favorites icon), porque el navegador loalmacena junto a los favoritos, y lo despliega en la barra de direcciones o en las pestañas. Usualmente el mismo icono seutiliza en todas las páginas de un sitio web, lo que le da identidad al sitio entero y por ende también se le llama icono desitio web (web site icon).

El favicon es un archivo PNG, o uno con extensión . i c o que puede contener imágenes de varios tamaños. Normalmente son

de 16x16 pixeles y util izan fondo transparente. El documento web debe indicar el favicon en su encabezado (head)

utilizando el elemento vacío l i n k e indicar el tipo de imagen y su URL, algo como:

<head> . . .

<link r el ="i con" type=" i mage/png" href ="path/ to/ f avi con. png" /></head>

Véase http://en.wikipedia.org/wiki/Favicon para otros tipos de imágenes y enlaces a usar como favicons

3.5 Tablas

(X)HTML permite organizar datos en forma tabular con el elemento tabl e. Una tabla consta de filas declaradas con elelemento t r (table record). Cada fila se compone de celdas t d (table data). El siguiente ejemplo muestra una tabla sencilla.

Una tabla consta de tres partes: un encabezado de tabla opcional, el cuerpo de la tabla y el pie de tabla opcional. Cada unade esas partes consta de filas.


99 22/09/2015 1



3.6 Formularios

3.7 Objetos multimedia

3.8 Elementos genéricos


99 22/09/2015 1



4 Hojas de estilo en cascada CSS

Un documento (X)HTML sólo debe tener contenido, es decir, los datos que el autor quiere publicar y su estructura. Laapariencia o presentación de un documento web debe especificarse en un archivo externo llamado hoja de estilos que indicacómo debe formatearse la información en la pantalla, en papel u otro medio de salida.

La separación del contenido y la presentación tiene grandes ventajas. Una hoja de estilos puede reuti lizarse en todas laspáginas de su sitio web, lo que les da uniformidad, facilita el mantenimiento y ahorra ancho de banda. Una misma o variaspáginas web pueden ajustarse a diferentes necesidades simplemente cambiando la hoja de estilos. Así el autor puede tenerun juego de hojas de estilo en su sitio web; una para cada necesidad: un diseño avanzado para el navegador, grandescontrastes para personas con necesidades especiales, estilos amigables para impresión en papel (printer friendly), etc. Deesta forma, una misma página web puede verse en formas distintas sin cambiar la información que contiene.

4.1 Generalidades de las hojas de estilo

Una hoja de estilos es un archivo de texto que contiene reglas de formateo de elementos utilizando un lenguaje especialconocido como hojas de estilo en cascada (CSS, Cascading Style Sheets), el cual es estándar y definido por el W3C. Porejemplo, la siguiente regla hace que todos los títulos de un documento web sean de color verde:

h1, h2, h3, h4, h5, h6 { col or: green; }

En general una regla CSS tiene la siguiente sintaxis:


99 22/09/2015 1

sel ector { decl arat i on }

El selector determina cuáles elementos serán afectados por los estilos definidos en la declaración, y puede ser uno o varioselementos separados por comas. La declaración es una l ista de parejas propi edad: val or que serán aplicadas a los

elementos listados en el selector. Dichas parejas se separan por el símbolo punto y coma (; ). Es opcional terminar en punto

y coma la última pareja. Con esto la sintaxis se expande a:

el ement1, el ement2, . . . , el ementN{ property1: val ue1; property2: val ue2;

. . .

propertyN: val ueN;}

Es muy conveniente que escriba comentarios explicando la intención de cada regla, o al menos de aquellas no triviales. Loscomentarios utilizan la misma notación del lenguaje de programación C:

/* Las definiciones deben estar en negritas y no en itálicas como ocurre en ciertos

navegadores. Globalmente se usa verde para definiciones y títulos; azul para enlaces. */

df n{ f ont - wei ght : bol d; f ont - s t yl e: nor mal ; col or: #004444;

}

4.1.1 Ubicación de las reglas de estilo

La recomendación (X)HTML permite declarar reglas de estilo en cinco lugares:

En el elemento mismo, con el atributo s t yl e.1.

En el encabezado del documento web, con el elemento s t yl e.2.

En un archivo .css externo el cual se liga al documento con el elemento l i n k.3.

En una hoja de estilos externa provista por el usuario.4.

En la implementación del navegador web.5.

De los cinco lugares para especificar estilos en la lista anterior, el Consorcio Web (W3C) desalienta el uso los dos primeros,ya que el documento web debe almacenar contenido únicamente, no estilos; y los dos últimos están fuera del control delautor. Por eso, se aconseja al autor declarar las reglas de estilo siempre en una o varias hojas de estilos . c ss externas al

documento web.

El listado prettyprint linenums lang-html 4.1 muestra cómo declarar estilos en los tres lugares donde puede el autor.Supóngase que la línea 17 representa un archivo de texto con extensión . c s s que contiene sólo una regla y se adjunta al

documento web con el elemento l i n k en el encabezado del mismo (línea 4). Si dos o más hojas de estilo se incluyen en el

encabezado, se procesarán en el mismo orden en que se incluyeron.

1.<html>2.

<head>3.<link r el ="st yl esheet " type="t ext/ css" medi a="s cr een" hr ef ="path/t o/ styl es1. css"/>4.<link r el ="st yl esheet " type="t ext/ css" medi a="pr i nt" href ="path/t o/ styl es2. css"/>5.<style t ype="text/css" >6.

p { col or : red }7.</style>8.. . .9.

</head>10.<body>11.

<p s ty le=" col or : bl ue">Loremi psum ad hi s scr i pta b l andi t part i endo. . . </p>12.</body>13.

</html>14.15.16.p { col or: green }17.

El atributo medi a del elemento l i nk indica si las reglas de estilo aplican a un medio específico, como la pantalla (scr een), laimpresora (pri nt ), programas de lectura sintetizada (aur al ), computadoras de mano (handhel d), televisores (t v) y otros. En

el ejemplo anterior, un navegador cargará la hoja styl es1. css y los aplicará al documento web para ser visualizado en la

pantalla. Si el usuario decide imprimir el documento, el navegador cargará styl es2. css y los aplicará en la copia que

enviará a la impresora. El atributo medi a es opcional, y si no se especifica en un elemento, se asume que esa hoja de estilos

aplicará a todos los medios, lo que equivale a darle el valor medi a="al l " . El atributo medi a puede contener varios valores

separados por comas, de esta forma, una hoja de estilos puede aplicarse a varios medios simultáneamente.

El segundo lugar donde se pueden escribir reglas de estilo es en uno o varios elementos s ty le dentro del encabezado (head)

del documento (X)HTML, como se aprecia en las líneas 6 a 8 del l istado prettyprint linenums lang-html 4.1. Nótese que elencabezado head admite combinar hojas de estilo externas y elementos st y l e en cualquier orden. La especificación CSS


99 22/09/2015 1



indica que el navegador debe respetar este orden, de tal forma que las reglas de estilo que se encuentran en un archivo.css, tienen el mismo efecto que si se escribiesen directamente en un elemento s t yl e del encabezado.

El tercer lugar donde se puede especificar reglas de estilo es en el atributo s t yl e del elemento mismo, como se hizo en la

línea 12 del listado prettyprint linenums lang-html 4.1. En este caso, todas las propiedades aplicarán únicamente a dichoelemento por lo que no es necesario especificar un selector, ni agrupar las propiedades dentro de l laves { }.

4.1.2 El principio de cascada

En vista de que hay cinco lugares opcionales donde se especifican estilos, puede ocurrir que para una propiedad no haya

ninguna regla, o bien hayan varias. El navegador necesita un algoritmo que especifique cómo actuar en estos casos, al cualse le llama el principio de cascada y consta de otros tres principios.

Si dos o más reglas compiten para darle estilo a una misma propiedad, recibirá mayor prioridad aquella que tenga mayorespecificidad en su selector. A esto se le llama principio de especificidad.

Si dos reglas compitiendo por la misma propiedad tienen igual especificidad, se tomará la que aparezca de último, es decir,tendrá más peso aquella que se encuentre más cerca del elemento. A esto se le llama el principio de ubicación.

Cuando por el contrario, no se especifican reglas para una propiedad, el navegador debe seguir un principio más, elprincipio de herencia, el cual indica que ante la ausencia de una regla de estilo, el navegador debe aplicar el estilo delelemento padre. No todos las propiedades son heredables por defecto. Por ejemplo, la fuente lo es pero no el margen. Deesta forma, al asignar la fuente al elemento body, todos los párrafos la heredan, lo cual es deseable; pero si se asigna unmargen grande al body para mantener una separación visual con los bordes de la ventana del navegador, sería indeseable si

este borde se aplicara entre párrafo y párrafo.

El uso de los tres principios: ubicación, especificidad y herencia para determinar cuál regla debe aplicar a una propiedad de

estilo de un elemento se conoce como principio de cascada. Los navegadores implementan este principio dándole puntos opesos a cada regla de estilo siguiendo un cálculo propuesto en la especificación CSS, que cualitativamente se puede resumiren lo siguiente:

Ante la ausencia de una regla, el estilo se hereda del elemento padre si la propiedad es heredable, si no, se usael estilo por defecto del navegador. Si dos o más reglas compiten por darle estilo a una misma propiedad, setomará aquella con mayor especificidad de su selector, independientemente de dónde esté ubicada. Con dosreglas de igual especificidad, ganará la que aparezca de último.

A modo de ejemplo, el listado prettyprint linenums lang-html 4.2 muestra un documento web que tiene dos párrafos yestilos definidos en tres lugares: una hoja de estilos externa (cascadi ng1. css) enlazada en la línea 4; un elemento s ty le en

el encabezado (líneas 5 a 7), y un atributo s t yl e en el segundo párrafo (línea 18). Se estudiará el efecto de estos estilos en

tres propiedades: el color, la fuente y el margen.

<html>1.<head>2.

<title>Esti l os en conf l i ct o: cascada</title>3.<link r el ="st yl esheet" type="text/css" href ="cascadi ng1. css"/>4.<style t ype="t ext/ css">5.

p { col or: t eal ; }6.</style>7.

</head>8.9.

<body>10.<p>Est e es el pr i mer párr afo. Ni nguna regl a de est i l o para <code>p</code>11.especi f i ca l a fuent e, por l o que <em>hereda</em> l a f uente de su el emento padre12.<code>body</code>. Aunque hay una hoj a de est i l os ext erna que especi f i ca que el col or13.del t ext o de l os párr afos debe ser r oj o, éste es <strong>verde azul ado</strong>14.porque hay una regl a en el encabezado del document o, que est á más cer ca de est e15.pár raf o. </p>16.

17.<p s ty le="col or : green; ">Est e es el segundo párr af o. Ti ene un at ri but o de est i l o que18.sobrescri be el col or del t exto a <strong>verde</strong>, ya que por19.<em>especi f i c i dad</em> est á más cerca del el ement o. Ni nguna r egl a de est i l o f ormatea20.l a separ aci ón vert i cal entr e párr af os, por l o que se apl i ca l a que el navegador t enga21.i mpl ementada i nt ernamente. </p>22.


Ejemplo de estilos en cascada. Correr este ejemplo.

body{ f ont - f ami l y: Verdana, Geneva, Arial, Helvetica, sans- ser i f ; margi n: 2. 5cm;}

p { col or : r ed; }

Archivo cascadi ng1. css referenciado en el ejemplo anterior.

La fuente es una propiedad heredable de acuerdo a la especificación CSS. La mayoría de navegadores asumen una fuente


99 22/09/2015 1



con serifas, como Ti mes New Roman. Al cargar la hoja de estilos el navegador procesa la regla que indica que la fuente del

cuerpo (body) del documento debe mostrarse en Ver dana, que es por el contrario una fuente sin serifas (sans-seri f );cualquier regla del autor tiene más prioridad que el valor por defecto del navegador y por ende el navegador debe usarVer dana para formatear el texto del body, el cual es vacío.

Al desplegar el primer párrafo, el navegador no encuentra una regla de fuente para dicho elemento de párrafo. Como es unapropiedad heredable, el navegador toma la fuente del padre del párrafo que es el elemento body, y por ende despliega el

texto del párrafo en Verdana. Esto mismo ocurre recursivamente para los elementos hijos del párrafo, como em, strong y

code; y luego para el párrafo siguiente. De esta forma, todo el documento aparece en Verdana como el autor podría esperar.

La propiedad de margen (margi n) no es heredable de acuerdo a la especificación CSS. El navegador web asume un margen

nulo o minúsculo para el body, por lo que el texto se suele pegar con los extremos de la ventana del navegador. Al encontrar

la regla margi n: 2. 5cm, el navegador la aplica al elemento body, haciendo que el margen del documento sea de 2.5centímetros. Sin embargo, al no ser una propiedad heredable, el navegador no aplica un margen de 2.5 centímetros a lospárrafos ni a los elementos em, strong y code, sino que asume el margen por defecto, que es de unos cuantos pixeles para

párrafos y de 0 pixeles para los otros elementos citados.

El color es una propiedad heredable según la especificación CSS. El navegador no encuentra una regla para el color de bodyy asume el por defecto del navegador, que es negro. La regla p { col or: r ed; } en la hoja de estilos cascadi ng1. css, indica

al navegador que pinte todos los párrafos en rojo. Pero en la línea 6 del documento web del listado prettyprint linenumslang-html 4.2 compite por la misma propiedad: establecer el color de los párrafos en verde azulado (t eal ). Estas dos reglas

están en conflicto, y ganará la que tenga mayor especificidad en el selector, sin embargo ambas tienen el mismo selector; yen tal caso el navegador deberá aplicar la que aparezca de último de acuerdo al principio de ubicación, y por ende, losparrafos aparecerán en verde azulado.

Al pintar el segundo párrafo que inicia en la l ínea 18 del listado prettyprint linenums lang-html 4.2, el navegador encuentrauna regla para la propiedad col or en su atributo s t yl e. De acuerdo al principio de especificidad esta regla tiene la mayorprioridad y por ende, el segundo párrafo aparecerá en verde simple en lugar de verde azulado.

4.1.3 El operador @

4.2 Selectores

4.3 Valores de propiedades

Los valores que pueden tomar las propiedades son de muy diversa naturaleza. Sin embargo, existen algunos dominios

comunes que se resumen en la siguiente tabla y a los cuales se les hará referencia luego en este documento.

Dominios comunes de ciertas propiedades CSS

Dominio Descripción Ejemplos

i nher i tDele el valor i nher i t a una propiedad cuando usted

explícitamente quiere especificar que esa propiedad tome elmismo valor que la del elemento padre.

p { mar gi n: i nher i t ; }

<l ength>

Son magnitudes compuestas siempre de un valor y una unidad,como 2. 5cmlas cuales no deben estar separadas por espacios. La

unidad se puede omitir sólo cuando la magnitud es 0. Hay dos

tipos de unidades:

Absolutas: centímetros (cm), milímetros (mm), pulgadas

(i n), puntos (pt ) y picas (pc).

Relativas: tamaño de fuente (em), tamaño de la letra x en

la fuente actual (ex), pixeles (px), y porcentajes del valor

de la propiedad del elemento padre (%).

body { margi n: 2. 5cm; }

h1{ margi n- t op: 2em; margi n- bot t om: 0;}

pre { f ont - si ze: 85%; }

<number > Son números sin unidades. di v. cont ent { z- i ndex: 2; }

<ur l >

URL hacia otro recurso, como una imagen, sonido, etc. Si el URLes relativo, lo será con respecto a la hoja de estilos y no aldocumento (X)HTML. Encerrar el URL entre comillas es opcional.No separe la palabra ur l del paréntesis que abre.

body{ backgr ound: ur l ( water . png) r epeat ;}

<col or>

Hay tres formas de especificar colores en CSS:

Nombres predefinidos. Hay 16 colores predefinidos comose ve abajo. Los nombres no son sentivos a mayúsculas yno se deben especificar dentro de comillas.

Notación rgb(). Permite construir un color con la cantidadde rojo, verde y azul, sea con valores entre 0 y 255 (o sucorrespondiente hexadecimal), o porcentajes. No se debeseparar la palabra r gb de los paréntesis que abren.

body { background: bl ack; }h1 { col or: rgb(245, 255, 250) ; }h2 { col or: r gb( 100%, 75%, 50%) ; }pr e{ border: sol i d 1px; border - col or : #80c0a0 #000 #000 #80c0a0; backgr ound: #EFE;}


99 22/09/2015 1



Dominio Descripción Ejemplos

Notación #. Se especifica las cantidades de rojo, verde yazul en notación hexadecimal antecedidos por un símbolode número, de la forma #r r ggbb, o #r gb si los dígitos de

cada componente se repiten. Las letras hexadecimalespueden estar en mayúsculas o minúsculas o ambas.

4.4 Propiedades

4.4.1 El modelo de fuente

4.4.2 El modelo de color

4.4.3 El modelo de caja

4.4.4 El modelo de visualización

5 Comportamiento con JavaScript

JavaScript es un lenguaje interpretado por el navegador web que permite al autor manipular dinámicamente el documento,sus estilos y la ventana misma del navegador, para hacer la experiencia del lector más natural y amena.

JavaScript fue creado en 1995 por Brendan Eich cuando trabajaba para Netscape. Un año después Microsoft produjo supropia versión llamada JScript. También en 1996, Netscape sometió JavaScript a la asociación Ecma International paraconsideración como estándar de la industria, el resultado fue ECMAScript.

ECMAScript es un estándar internacional de un lenguaje genérico de "scripting" para extender la funcionalidad de unprograma cualquiera, no sólo navegadores web. Hay un número creciente de implementaciones basadas en ECMAScript queademás extienden su funcionalidad, como el inicial JavaScript de Netscape, JScript de Microsoft, ActionScript de Macromedia

(adquirida por Adobe), SpiderMonkey y Rhino de Mozilla, etc. Sin embargo, el nombre ECMAScript no tomó popularidad, ycuando la mayoría de la gente dice "JavaScript" está haciendo referencia al lenguaje en forma general, no a laimplementación de Netscape, y así se hará en este documento.

JavaScript es un lenguaje genérico que puede utilizar cualquier software que quiera permitir al usuario automatizar tareaspropias; como ocurre en la actualidad para programación de dispositivos móviles, acceso a bases de datos orientadas adocumentos, animación digital y otros. Pero su uso más difundido ha sido históricamente el web, en la programación en ellado del cliente y más recientemente en el servidor web. En este documento se presentará este lenguaje ligado alnavegador web.

5.1 Generalidades

JavaScript es un lenguaje similar a C/C++/Java. Es sensitivo a mayúsculas y minúsculas, por lo que resulta más consistente

con XHTML que con HTML. Aunque no es obligatorio, cada sentencia en JavaScript debe terminar en punto y coma, y seconsidera una mala práctica omitirlos. Los comentarios utilizan la notación de C++:

// comentario hasta el final de línea

/* comentario que puede

extenderse varias líneas */

El código JavaScript puede aparecer en cuatro lugares: en el elemento scr i pt , en un archivo . j s externo, en un evento

intrínseco, y con el pseudoprotocolo j avasc r i pt : .

5.1.1 Código JavaScript en el elemento script

Se puede escribir código JavaScript en el contenido del elemento scr i pt , el cual debe ser hijo directo de head o body. El

siguiente ejemplo muestra los cuadrados de los primeros 20 números naturales:


99 22/09/2015 1



<body>1.<h1>Cuadrados natural es 1</h1>2.<script t ype="text / j avascr i pt" >3.<! - -4.

document . wr i te( ' <ul >\ n' ) ;5.for ( var n = 1; n <= 20; ++n )6.

document . wr i te( ' <l i >' + n + ' <sup>2</ sup> = ' + ( n * n) + ' </ l i >\ n' ) ;7.document . wr i te( ' </ ul >\ n' ) ;8.

- - >9.</script>10.

</body>11.

Un elemento scr i pt en el cuerpo del documento. Correr este ejemplo.

Mientras el navegador está cargando un documento web, va mostrando sus elementos (títulos, párrafos, imágenes, tablas,etc.), a medida que los encuentra. Lo mismo pasa con los scripts. Inmediatamente que el navegador encuentra un elementoscr i pt , ejecuta su código.

En el ejemplo anterior, se invoca al método wri te() del objeto document que representa al documento ante JavaScript. La

salida del método document . wr i t e() es insertada como código (X)HTML inmediatamente después del elemento scr i pt que lo

invoca. Una vez que el scr i pt ha terminado su ejecución, el navegador continúa procesando el resto del documento comode costumbre, y procesará tanto el código insertado con document . wr i t e() así como el provisto por el autor en el documento

original.

Como se puede deducir del ejemplo anterior, JavaScript interpreta el texto entre apóstrofes (' ' ) como cadenas de

caracteres. El operador de suma (+) cuando alguno de sus operandos es una cadena, hace concatenación. Las variables no

se declaran precedidas por su tipo de datos, sino por la palabra reservada var . Y el ciclo f or tiene la misma sintaxis de C.

5.1.2 Código JavaScript en un archivo externo

El elemento scr i pt permite escribir código JavaScript en su contenido, pero el Consorcio Web recomienda sacar el

comportamiento del documento web a un recurso reutil izable, por convención, un archivo con extensión . j s. Este es el

segundo lugar donde se puede escribir código JavaScript. El mismo elemento scr i pt permite hacer la inclusión del archivo

externo con el atributo sr c. El siguiente ejemplo tiene el mismo efecto que el ejemplo anterior:

<body>1.<h1>Cuadrados natural es 2</h1>2.<script t ype="text / j avascr i pt" sr c="squares_ l i s t2. j s "></script>3.

</body>4.

El código JavaScript puede estar en un recurso externo y ser importado con el atributo sr c del elemento scr i pt . Correr este

ejemplo.

document . wr i te( ' <ul >\ n' ) ;for ( var n = 1; n <= 20; ++n ) document . wr i te( ' <l i >' + n + ' <sup>2</ sup> = ' + ( n * n) + ' </ l i >\ n' ) ;

document . wr i te( ' </ ul >\ n' ) ;

El archivo JavaScript squares_ l i s t2. j s referido en el ejemplo anterior.

La especificación (X)HTML dice que si un elemento scr i pt tiene tanto código JavaScript en el contenido como un archivo

referido en el atributo sr c, el contenido será ignorado por completo en favor del archivo externo.


99 22/09/2015 1



5.1.3 Código JavaScript en los eventos intrínsecos

El tercer lugar donde se puede especificar código JavaScript es en los eventos intrínsecos de ciertos elementos, tales comoonl oad, onmouseover y onc l i ck. Por ejemplo:

<body>1.<h1>Event os en J avaScr i pt </h1>2.<button onc l i ck="al er t ( ' No me t oque' ) ; ">Un botón! </button>3.

</body>4.

El autor puede proveer código JavaScript se que ejecuta cuando un evento ha ocurrido, como presionar un botón en estecaso. Correr este ejemplo.

5.1.4 Código JavaScript en el pseudoprotocolo javascript:

El cuarto lugar donde se puede ejecutar código JavaScript es en la barra de direcciones del navegador, con elpseudoprotocolo j avascr i pt : , que es seguido por una o varias instrucciones JavaScript separadas por punto y coma. El

resultado de estas instrucciones, si lo hay, se toma como un string, y es desplegado en la ventana del navegador. Ejemplos:

j avasc r i pt : 5%2 j avasc r i pt : x = 3; ( x < 5) ? ' x i s l e ss ' : ' x is great er ' j avasc r i pt : d = new Date( ) ; typeof d j avasc r i pt : for( i =0, j =1, k=0, f i b=1; i >5; i ++, f i b= j +k, k= j , j =f i b) al ert ( f i b) ; j avasc r i pt : s=' ' ; for( i i n navi gat or) s+=i +' : ' +navi gat or [ i ] +' \ n ' ; al ert ( s) ;

5.2 Tipos de datos y variables

JavaScript define siete tipos de datos: booleanos, números, cadenas de caracteres (strings), funciones, objetos, arreglos, yvalores especiales. En las siguientes secciones se explorará cada uno de ellos.

5.2.1 Números

JavaScript no hace diferencia entre números enteros y de punto flotante. Todos son representados internamente comopunto flotante de 64bits (IEEE 754). Las constantes numéricas de JavaScript siguen las mismas convenciones de C, exceptolos números octales que no son parte de ECMAScript.

Cuando un valor flotante llega a ser más grande que el más grande de los representables, se almacena con el valor especialI n f i n i t y o su opuesto negativo. Cuando se hace una operación indefinida, se genera un número especial NaN (not-a-

number), el cual nunca es igual a nada, incluso ni a él mismo, por eso debe usarse la función especial i sNaN( ) . Otra función

práctica es i s Fi ni t e( ) , que prueba si un número no es I n f i n i t e y no es NaN. A continuación una lista de constantesnuméricas especiales:

I n f i n i t y. Valor especial usado en lugar de un número gigante que no cabe en un doubl e de 64 bits, por ejemplo el

resultado de la expresión 17/ 0.

NaN. Acrónimo de "not-a-number". Es un valor especial usado cuando una expresión no genera un número válido,

como la división 0/ 0 o tratar de convertir un string no apto a un número como par seI nt( "ci nco") .

Number . MAX_VALUE. El número más grande representable en un doubl e de 64 bits.Number . MI N_VALUE. El número decimal más pequeño (cercano a cero) representable en un doubl e de 64 bits.

Number . NaN. Igual a NaN.

Number. POSI TI VE_I NFI NI TY. Igual a +I nf i ni ty.

Number. NEGATI VE_I NFI NI TY. Igual a - I nf i ni t y.


99 22/09/2015 1



5.2.2 Cadenas de caracteres (strings)

Las cadenas literales en JavaScript se encierran entre comillas dobles o simples y se pueden anidar éstos. Ya que es comúnescribir código HTML dentro de JavaScript y viceversa, es conveniente uniformar las comillas para cada cual. Por ejemplo:

<a href =" " onc l i ck=" al er t ( ' You\ ' r e wel come' ) "> Thanks</a>

A diferencia de otros lenguajes de programación, Las cadenas literales tienen que ser escritas en una única línea, no puedenromperse en dos o más de ellas.

Igual que en C/C++, JavaScript emplea secuencias de escape iniciadas en backslash (\ ) para representar caracteres

especiales, tales como \ n para el cambio de línea, \ r para el retorno de carro, \ " para comillas dobles, \ ' para apóstrofe o

comilla simple, \ 0 para el carácter nulo y \ \ para la barra invertida (backslash).

No se debe utilizar el backslash frente a un cambio de línea para tratar de continuar un string en varias líneas; JavaScriptprobablemente lo ignorará. En JavaScript las cadenas de caracteres o strings son un tipo de datos atómico, no un arreglo decaracteres. De hecho JavaScript no tiene el concepto de carácter (char ) como sí ocurre en otros lenguajes de programación.

Un carácter se representa como un string de longitud 1. El método s t r . charAt( i ) permite obtener un string con el carácter

que está en la posición i de st r , donde el índice i está basado en cero, es decir, 0 representa el primer carácter de la

cadena. El siguiente código muestra varias operaciones con strings:

var s t r = ' Wel come ' + vi si t orName; // concatenación

var l en = st r . l engt h; // longitud de cadena

var l astChar = st r . char At( st r . l ength - 1) ; // obtener un caracter de la cadena

var sub = st r . substr i ng( 3, 4) ; // obtiene 'come'

var i = st r . i ndexOf ( ' e' ) ; // Encuentra la posición de la primera letra 'e' en str

Aunque algunas implementaciones permiten el uso del operador [] para acceder a un carácter específico del string, esrecomendable evitar su uso, ya que no forma parte del estándar ECMAScript.

5.2.3 Conversiones entre números y strings

Cuando un número aparece en un contexto donde se requiere un string, JavaScript lo convierte automáticamente. Porejemplo, si uno de los operandos de + es una cadena y el otro es un número, el operador + actuará como el operador de

concatenación y convertirá el número en una cadena.

var hdd_gb = 500; // 500 GB

var hdd_gi b = 500 * Math. pow( 10, 9) / Math. pow( 2, 30) ; // 465.661287 GiB

var text = ' Un di sco duro de ' + hdd_gb + ' GB equi val e a ' + hdd_gi b + ' Gi B' ;document . wr i te( ' <p>' , t ext , ' </ p>\ n' ) ;

El operador de concatenación convierte números a cadenas automáticamente. Correr este ejemplo.

Las conversiones explícitas se pueden hacer con el constructor St r i ng( numer o) , y varios métodos de la clase Number :numero. t oSt r i ng( base) , numero. t oFi xed(deci mal es) , numero. t oExponent i al ( deci mal es) y numero. t oPr eci si on( deci mal es) .

Ejemplos:

hdd_gi b + "" ; // "465.66128730773926"

String( hdd_gi b) ; // "465.66128730773926"

hdd_gi b. toStr i ng( ) ; // "465.66128730773926"

hdd_gi b. toStr i ng( 2) ; // "111010001.1010100101001010001"

hdd_gi b. toStr i ng( 16) ; // "1d1.a94a2"

hdd_gi b. t oFi xed( 0) ; // "466"

hdd_gi b. t oFi xed( 2) ; // "465.66"

hdd_gi b. t oExponent i al ( 0) ; // "5e+2"

hdd_gi b. t oExponent i al ( 3) ; // "4.657e+2"

hdd_gi b. t oPreci s i on( 4) ; // "465.7"

hdd_gi b. t oPreci s i on( 7) ; // "465.6613"


99 22/09/2015 1



Cuando un string se utiliza en un contexto donde se requiere un número, será traducido automáticamente por JavaScript,por ejemplo:

var product = "21" * "2" ; // product == 42.

Con la notación anterior no se podrá sumar un string a un número con el operador +, ya que será interpretado comoconcatenación. El constructor Number( st r ) convierte el string st r en un número, siempre que st r tenga formato de número

en base 10 y no inicie con espacios en blanco. Las funciones par seI nt (st r, base) y parseFl oat (st r, base) asumen que st r

está en base base (10, si se omite) y lo convierten en un número entero o real respectivamente. Ejemplos:

parseI nt( "3 bl i nd mi ce") ; // Returns 3

par seFl oat ( "3. 14 met ers " ) ; // Returns 3.14

parseI nt( "12. 34" ) ; // Returns 12parseI nt( "0xFF") ; // Returns 255

parseI nt( "11" , 2) ; // Returns 3 (1*2 + 1)

parseI nt( " f f " , 16) ; // Returns 255 (15*16 + 15)

parseI nt( "zz" , 36) ; // Returns 1295 (35*36 + 35)

parseI nt( "077", 8) ; // Returns 63 (7*8 + 7)

parseI nt( "077", 10) ; // Returns 77 (7*10 + 7)

parseI nt( "el even") ; // Returns NaN

par seFl oat ( "$72. 47" ) ; // Returns NaN

Si la cadena a convertir inicia con "0x" se interpreta que está en hexadecimal. Si inicia con 0 su resultado es indefinido, ya

que algunas implementaciones podría interpretar octal o decimal, por lo que es conveniente siempre especificar la base. Sino se puede convertir a un número, estas funciones retornan NaN.

5.2.4 Booleanos

Los valores booleanos sólo pueden contener los valores literales f a l s e o t rue. Cuando se usa un booleano en un contexto

numérico, se convierten automáticamente a los valores 0 y 1. Si se usan en un contexto string, JavaScript los convierteautomáticamente a " f al se" y "true" respectivamente. El recíproco también es válido. Los valores especiales NaN, nul l ,

undef i ned y la cadena vacía (" " ) siempre se convierten a f a l s e; todos los demás a t rue (como I n f i n i t y). Para hacer

explícita la conversión, es recomendable emplear la función Bool ean( ) :

var x_as_bool ean = Boolean( x) ;

5.2.5 Funciones

El programador puede declarar sus propias funciones con la palabra reservada f uncti on, el nombre opcional de la función,

los parámetros sin tipos entre paréntesis ( ) , y el cuerpo de la función entre llaves { }. Las funciones en JavaScript son un

tipo de datos más, por ende, una función es un valor; así, las funciones se pueden almacenar en variables, miembros deobjetos, arreglos, y pasarse por parámetros en una forma más natural que en C/C++. Cuando una función se asigna a unobjeto como un miembro, recibe el nombre especial de método. En caso de asignarse a una variable, puede omitirse elnombre de la función, lo que en JavaScript se llama función literal o función lambda en homenaje al lenguaje Lisp quefue uno de los primeros en permitir funciones sin nombre:

// una función nombrada

function square1( x) { return x*x; }

// una función literal o "lambda"

var square2 = function( x) { return x*x; }

// una función construida a partir de strings

var square3 = new Function( "x" , "r et ur n x*x; " ) ;

// invoca la función a través de la variable square2

square2( 2. 5) ;

Una tercera forma de definir una función es pasar sus argumentos y cuerpo como strings a la función constructoraFunct i on( ) , lo cual es poco usado e incluso, menos eficiente. Cuando el valor de una variable es una función, se puedeinvocar ésta usando el operador () tras el nombre de la variable, como se hizo en el ejemplo anterior con square2.

5.2.6 Objetos

Un objeto es una colección de valores nombrados, que usualmente se les refiere como propiedades, campos o miembros delobjeto, y se les accede utilizando el operador punto. Por ejemplo:


99 22/09/2015 1



i mage. wi dthi mage. hei ghtdocument . myf or m. but t ondocument . wr i te( " wr i t e es un mét odo: una pr opi edad cuyo ti po de dat os es una f unci ón" ) ;

El operador punto permite acceder a las propiedades utilizando identificadores. Pero JavaScript permite también usarcadenas de caracteres para acceder a las propiedades, con el operador corchetes [ ] . Esta segunda notación permite ver a losobjetos como arreglos asociativos. Ejemplos:

i mage[ "wi dt h" ]i mage[ "hei ght " ]document [ "myf or m" ] [ "but t on" ]document [ "wri t e" ] ( " wr i t e es un mét odo: una pr opi edad cuyo ti po de dat os es una f unci ón" ) ;

Los objetos se crean llamando funciones constructoras con el operador new, después de lo cual se usan como de costumbre.Estos objetos son almacenados en memoria dinámica por el navegador, el cual incorpora un recolector de basura (garbagecollector), de tal forma que ahorra al programador la responsabilidad de liberar la memoria de cada objeto creado.

var now = new Date( ) ;var patt ern = new RegExp( " \ \ s j ava\ \ s " , " i " ) ;

var poi nt = new Object( ) ;poi nt. x = 2. 3;poi nt. y = - 1. 2;

En el ejemplo anterior el objeto poi nt se creó como un objeto vacío, y sus propiedades se fueron agregando luego con el

operador de asignación. Existe una notación para definir objetos literales, útil para inicializaciones:

{ propert y1: val ue1; "pr opert y2": val ue2; . . . ; propert yN: val ueN }

Las llaves {} en JavaScript indican la creación de un objeto literal. Los nombres de las propiedades pueden declararse comoidentificadores o como strings. Los valores de cada propiedad pueden ser de cualquier tipo de datos de JavaScript (booleano,numérico, string, función, arreglo, u objeto), sea como valores literales o como resultado de una expresión aritmética. Así los objetos se pueden anidar como es de esperar:

var poi nt = { x: 2. 3, y: - 1. 2 };

var act i vo1 ={

"t i po" : "di sco_dur o" ,"preci o" : 30000, // colones

' t amanno' : 500 * Math. pow( 10, 9) / Math. pow( 2, 30) // GiB

};

var rect angl e ={ col or : "#a4f 0ca",

backgr ound:{

col or : " l i ght gray" , i mage: "i mg/bri cks. png" , r epeat : "r epeat "

},

geomet r y:{

t opLef t : { x: 45, y: 10 }, ext end: { wi dth: 21. 93, hei ght : 38. 34 }

}};

Si un objeto se emplea en un contexto Boolean, se traduce a true si no es null. Si el contexto es string se llamará al metodotoStr i ng( ) y si es numérico a val ueOf ( ) .


99 22/09/2015 1



5.2.7 Arreglos

En JavaScript un arreglo es una colección de datos enumerados. Se acceden con un índice entero, basado en 0, escritoentre corchetes tras el nombre del arreglo. El siguiente ejemplo obtiene el ancho en pixeles de la segunda imagen en eldocumento:

document . i mages[ 1] . wi dt h

Los arreglos pueden tener datos heterogéneos. Así un elemento del arreglo puede contener otro arreglo, pero no hayarreglos multidimensionales. Los arreglos se crean con el constructor Array() y sus elementos se pueden agregar

simplemente asignándolos a sus índices o bien, como parámetros del constructor Array() ; pero si se pasa un único entero a

este constructor, de la forma Ar r ay( N) se creará un arreglo con N elementos indefinidos. Ejemplos:

var a = new Array( ) ; // Arreglo vacío, lo mismo que: var a = [];

a[ 0] = 1. 2; // Un elemento es insertado en la posición 0

a[ 1] = "J avaScri pt" ;a[ 2] = true;a[ 4] = { x: 1, y: 3 }; // La posición 3 tiene un elemento con el valor undefined

a[ 5] = function( x) { return x*x; }; // a[5](7) retornará 49

a[ 6] = new Array( ) ; // Elemento a[6] almacena un arreglo vacío

a[ 6] [ 0] = - Infinity; // Inserta un elemento en el arreglo que está en a[6]

var b = new Array( 1. 2, " J avaScri pt " , true, { x: 1, y: 3 }) ; // 4 elementos

var c = new Array( 10) ; // Arrreglo de 10 elementos indefinidos

JavaScript permite crear arreglos literales, preferiblemente utilizados para inicialización, y son una lista de valoresseparados por comas dentro de corchetes, que se asignan secuencialmente empezando en 0. Los elementos también puedenser indefinidos lo cual se logra omitiendo el valor entre comas:

var b = [ 1. 2, " J avaScri pt " , true, { x: 1, y: 3 } ] ;

var mat r i x = [ [ 1, 2, 3] , [ 4, 5, 6] , [ 7, 8, 9] ] ; // matrix[2][1] == 8

var base = 1024;var tabl e = [ base, base+1, base+2, base+3] ;

var spar seAr r ay = [ 1, , , , 5] ;

5.2.8 Valores especiales

El valor especial nul l se utili za para indicar que un objeto no tiene valor. El valor especial undef i ned indica que una variable

u objeto nunca ha sido declarado o nunca se le ha asignado un valor.

5.2.9 Objetos especiales

JavaScript provee varios objetos útiles: Dat e, RegExp, Bool ean, Number y Str i ng. El objeto Dat e sirve para obtener y

manipular fechas u horas, como se aprecia en el siguiente ejemplo.

var text = ' ' ;var now = new Date( ) ;


99 22/09/2015 1



// Los meses inician en 0. Diciembre es el 11

if ( now. getMonth( ) == 11 && now. get Date( ) == 25 ){ text = ' Hoy es navi dad! ' ;}else{

// Fijar en un objeto Date la proxima navidad

var chr i st mas = new Date( now. get Ful l Year ( ) , 11, 25, 00, 00, 000 ) ;if ( now. getMonth( ) == 11 && now. getDate( ) > 25 ){

chr i st mas. set Ful l Year( now. get Ful l Year ( ) + 1 ) ; text = ' l a pr óxi ma ' ;

}// Convertir la cantidad de milisegundos que faltan para navidad en dias

var di as = ( chri st mas. getTi me( ) - now. getTi me( ) ) / ( 1000 * 60 * 60 * 24) ; text = ' Fal tan ' + di as. toFi xed( 0) + ' dí as par a ' + text + ' navi dad' ;}

document . wr i te( ' <p>' , t ext , ' </ p>\ n' ) ;

Ejemplo de uso del objeto Dat e. Correr este ejemplo.

El objeto especial RegExp permite manipular expresiones regulares en JavaScript, siguiendo la misma notación de Perl.

Ningún valor primitivo en JavaScript tiene métodos, sin embargo, en algunos ejemplos anteriores, se han invocado algunosa través de valores primitivos. Esto es posible ya que JavaScript define tres clases correspondientes a cada uno de los tiposde datos primitivos, llamadas wrapper objects: Number , Str i ng y Bool ean. Cuando a un valor primitivo se le invoca un

método, JavaScript automáticamente construye un objeto temporal de la clase correspondiente y lo inicializa con el datoprimitivo y luego invoca el método. Es decir, cuando se escribe algo como

var s = " Hol a mundo!" ;var l en = s. l engt h;

La propiedad length no proviene del string s, sino de un objeto temporal String inicializado con s, una copia, que después deusarse, se desecha. Este comportamiento también aplica para los datos primitivos de Number y Bool ean.

5.2.10 Por valor o por referencia

En JavaScript los datos se manipulan por valor y por referencia. Automáticamente JavaScript sigue esta regla: valores

primitivos (booleanos y números) son manipulados por valor; los objetos, arreglos y funciones, por referencia. No existeuna notación especial para que el programador pueda decidir cuáles manipular por referencia y cuales por valor. Debeajustarse a las reglas expuestas y tener los cuidados respectivos.

La manipulación tiene tres escenarios: cuando se copia un dato, cuando se pasa por parámetro a una función y cuando secompara. Cuando se invoca a una función, las copias y referencias simplemente se harán de acuerdo al tipo de datoenviado. Por ejemplo:

var n = 1; // Es un número, el literal 1 se copia por valor a n

var t = n; // t será un número, se copia también por valor

// Los parametros de la funcion no tienen tipo de datos, reciben por valor o referencia

// de acuerdo a los datos enviados en la invocacion

function addto( tota l , val ue) { to tal += val ue; }

// Se invoca con dos numeros, al llamar a addto, total y value tendrán copias por valor

// así que la funcion no tendra el efecto que quiere conseguir, y por ende, t se mantendra

// intalterado con su valor 1

addt o( t , n) ;

// La comparacion se hace por valor, es decir, se comparan byte a byte variables distintas

if ( t == n ) document . wr i te( ' Los números son copi ados' ) ; // Se evaluará como true

Cuando los datos se manipulan por referencia, se hace una copia de la dirección del objeto. Es decir, se copian, pasan porparámetro y comparan direcciones que apuntan a lo mismo, de forma similar a los punteros C. Por ejemplo:

// Crea un objeto y su direccion la copia a hoy

var hoy = new Date( ) ;

// Copia la direccion de hoy a navidad, ambas variables refieren al mismo objeto

var navi dad = hoy;

// Modifica al objeto apuntado, por ende, 'hoy' tambien referirá al 25 de diciembre

navi dad. set Month( 11) ;navi dad. set Dat e( 25) ;


99 22/09/2015 1



// Si se comparan, se hará una comparación de direcciones, y se evaluará como true

if ( hoy == navi dad ) document . wr i te( ' Hoy es navi dad! ' ) ;

// se crea otro objeto distinto pero con iguales datos

var navi dad2 = new Date( navi dad. get Ful l Year ( ) , 11, 25) ;

// Esta comparacion evaluara como falsa, ya que tienen direcciones distintas

if ( navi dad == navi dad2 ) document . wr i te( ' La navi dad es uni vers al ! ' ) ;

// Una funcion recibira por valor o referencia dependiendo de como se le invoque

function addDays( dat e, days){

dat e. set Dat e( dat e. getDate( ) + days ) ;}

// En esta invocacion, date recibira una copia de direccion de navidad y days una copia del

// literal 6 logrando el efecto deseado para navidad, pero 'hoy' se vera afectado tambien.

addDays( navi dad, 6) ;

// Esta funcion no provoca el efecto deseado pero ilustra como trabajan las direcciones

function addDaysB( dat eB, daysB){

var t mpDat e = new Date( dat eB) ; t mpDat e. set Dat e( t mpDat e. getDat e( ) + daysB ) ; dateB = t mpDat e; // Esto solo modifica la direccion de dateB y no al objeto real

}

// Al hacer esta invocacion la funcion addDaysB crea otro objeto internamente y lo asigna a su

// parametro temporal dateB y no a navidad2. Al salir de la función, navidad2 permanece

// inalterada. Esto tambié explica cómo actuar cuando no se quiere alterar datos que son pasados

// por referencia: haciendo copias

addDaysB( navi dad2, 6) ;

Los strings no caben en ninguna de esas dos categorías. Una vez creado un string, JavaScript no permite modificarlo, esdecir, son inmutables. Asi que no tiene importancia saber si se pasa por copia o por referencia. Puede pensarse lo segundopor razones de eficiencia. Lo único que se puede averiguar es si se comparan por valor o por referencia, de esta forma:

// Determining whether strings are compared by value or reference is easy.

// We compare two clearly distinct strings that happen to contain the same

// characters. If they are compared by value they will be equal, but if they

// are compared by reference, they will not be equal:

var s1 = "hel l o" ;var s2 = " hel l " + " o" ;document . wr i te( s1 == s2 ? " Str i ngs compar ed by val ue" : " Str i ngs compar ed by r ef erence") ;

5.2.11 Variables

Una de las primeras diferencias con otros lenguajes como C es que las variables de JavaScript no tienen un tipo de datos,por lo que es perfectamente válido asignarles un valor de un tipo y luego otro de diferente naturaleza:

var i = 16;i = "di ec i séi s ";

Antes de que usted pueda usar una variable, tiene que haberla declarado con la palabra reservada var , o JavaScriptdeclarará una implícitamente por usted. Lo cual puede traer efectos secundarios. En la declaración se deben inicializar lasvariables, sino JavaScript lo hará con el valor undef i ned.

Si una variable se declara dos veces en secciones var distintas y la segunda declaración tiene inicialización actúa como unasimple asignación. Todas las variables declaradas en una sección var son permanentes, es decir, no se pueden eliminar con

el operador del et e. La primera sección de la cláusula f or o f o r / i n, permite también declarar variables.

for( var i = 0; i < 10; ++i ) document . wr i te( i , ' \ n' ) ;for( var i i n obj ) document . wr i te( i , ' \ n' ) ;

Cuando se trata de leer una variable que no existe, se genera un error y el navegador detiene la ejecución del script. Si sele trata de asignar algo a una variable inexistente, se creará una variable global implícita. Las variables globales son visiblesen cualquier lugar donde haya código JavaScript.

Las variables locales son aquellas creadas en secciones var en los cuerpos de las funciones, incluyendo a los parámetros. Las

variables locales se superponen a las globales. A diferencia de C y Java, JavaScript no tiene diferente alcance (scope) encada bloque. Mejor dicho, los bloques de JavaScript lo definen las mismas funciones y no las parejas { }, así todas las

variables de una función comparten el mismo alcance, indiferentemente del nivel de anidamiento de llaves en que sedeclaren las variables. En el siguiente ejemplo; las variables o, i, j, k comparten el mismo scope.

function test ( obj ){

var i = 0; // i is defined throughout function

if ( typeof obj == "obj ect" ){


99 22/09/2015 1



iguales y tienen el mismo tipo de datos. Sus opuestos respectivos son el operador de desigualdad (! =) y de no identidad

(! ==). Por ejemplo:

"0" == false // produce true

"0" === false // produce false

"037. 50" == 37. 5 // produce true

"037. 50" === 037. 50 // produce false

Los operadores de comparación <,<=,>,>= actúan como de costumbre si sus operandos son del mismo tipo, sino setratan de convertir a números, y si esta conversión falla se generará NaN, que siempre se evalúa como f a l s e en expresiones

lógicas.

1 + 2 // Addition. Result is 3.

"1" + " 2" // Concatenation. Result is "12".

"1" + 2 // Concatenation; 2 is converted to "2". Result is "12".

11 < 3 // Numeric comparison. Result is false.

"11" < "3" // String comparison. Result is true.

"11" < 3 // Numeric comparison; "11" converted to 11. Result is false.

"one" < 3 // Numeric comparison; "one" converted to NaN. Result is false.

Los operadores lógicos son los mismos de C/C++/Java: &&, || y !. Pero guardan una diferencia. Los operandos se

convierten a Boolean temporalmente para hacer la evaluación del operador, pero el resultado del operador no es Boolean,sino del tipo de datos del operando izquierdo. A esto se le puede sacar ventaja. En el siguiente ejemplo, la variable maxadquirirá el primer valor numérico que no sea nul l en lugar de un valor booleano.

// If max_width is defined, use that. Otherwise look for a value in

// the preferences object. If that is not defined use a hard-coded constant.

var max = max_wi dt h | | pref erences. max_wi dt h | | 500;

El operador ternario ?: funciona igual que en C. Los operadores de bits (bitwise operators): and (&), or (|), xor (^), not(~), shift left (<<), shift right con signo (>>) y shift right with zero fill (>>>), sólo trabajan con enteros de 32 bits y su usoes inusual en JavaScript.

El operador in recibe al lado izquierdo un string y al derecho un objeto o arreglo. Se evalúa como true si el string es el

nombre de una propiedad del objeto al lado derecho, incluso si es heredada. Ejemplos:

var poi nt = { x: 1, y: 1 }; // Define an object

var has_x_ coord = " x" i n poi nt ; // Evaluates to truevar has_y_ coord = " y" i n poi nt ; // Evaluates to true

var has_z _coor d = " z" i n poi nt ; // Evaluates to false; not a property of point

var t s t r = "t oSt r i ng" i n poi nt ; // Inherited property from Object; evaluates to true

El operador instanceof espera al lado izquierdo un objeto y al lado derecho el nombre de una clase (realmente una funciónconstructora). Evalúa a t rue si el lado izquierdo (el objeto) es una instancia de la clase.

var d = new Date( ) ; // Create a new object with the Date( ) constructor

d i nst anceof Date; // Evaluates to true; d was created with Date( )

d i nst anceof Object; // Evaluates to true; all objects are instances of Object

d i nst anceof Number; // Evaluates to false; d is not a Number object

var a = [ 1, 2, 3] ; // Create an array with array literal syntax

a i nst anceof Array; // Evaluates to true; a is an array

a i nst anceof Object; // Evaluates to true; all arrays are objects

a i nst anceof RegExp; // Evaluates to false; arrays are not regular expressions

El operador unario typeof genera un string con el nombre del tipo de datos de su argumento a la derecha, que puede o no

estar entre paréntesis. Típicos resultados son "number " , "s t r i ng" , "bool ean" , "obj ect" (incluye los arreglos y nul l ),

"f unct i on" y "undef i ned" cuando el parámetro no ha sido declarado. Ejemplo:

typeof undefined // retorna "undefined"

typeof false // retorna "boolean"

typeof ( 3 / 1. 1) // retorna "number"

typeof ' 0' // retorna "string"

typeof {} // retorna "object"

typeof [ ] // retorna "object"

typeof null // retorna "object"

typeof function( ) {} // retorna "function"

return typeof val ue == "str i ng" ? " ' " + val ue + "' " : val ue;

Ya que t ypeof retorna "obj ect " para objetos de tanta naturaleza, su utilidad se reduce a saber si su operando es o no de un


99 22/09/2015 1



tipo de datos primitivo. Para saber la clase de un objeto hay que recurrir a otras técnicas como el operador i nst anceof , o la

propiedad Obj ect. const ruct or , como se verá luego.

Igual que en C++ y Java, el operador new crea un objeto vacío, invoca un constructor para que lo inicialice, y retorna la

dirección de memoria del objeto. Si el constructor no recibe parámetros, puede omitirse sus paréntesis.

o = new Object; // Optional parentheses omitted here

d = new Date( ) ; // Returns a Date object representing the current time

function Point( x, y) { this. x = x; this. y = y; } // Una función constructora

p = new Point( 3. 0, 4. 0) ; // Crea un objeto vacío y lo inicializa con la función constructora

El operador delete intenta eliminar una propiedad de un objeto, un elemento de un arreglo o la variable especificada comooperando. Retorna true si la el iminación fue exitosa. Algunas variables o propiedades no pueden ser eliminadas, como lasdeclaradas en secciones var . Si el único argumento de del ete no existe, se retorna true. Ejemplos:

var o = {x: 1, y: 2}; // Define a variable; initialize it to an object

delete o. x; // Delete one of the object properties; returns true

typeof o. x; // Property does not exist; returns "undefined"

delete o. x; // Delete a nonexistent property; returns true

delete o; // Can't delete a declared variable; returns false

delete 1; // Can't delete an integer; returns true

x = 1; // Implicitly declare a variable without var keyword

delete x; // Can delete this kind of variable; returns true

x; // Runtime error: x is not defined

Nótese que del et e no se trata de eliminar memoria dinámica como ocurre en C++, lo cual se hace en JavaScript con el

garbage collector, no hay otra forma. El del ete de JavaScript elimina una propiedad, es decir, deja de existir; no es que se leasigne undef i ned:

var my = new Object( ) ; // Create an object named "my"

my. hi re = new Date( ) ; // my.hire refers to a Date object

my. f i r e = my. h i r e; // my.fire refers to the same object

delete my. hi re; // hire property is deleted; returns true

document . wr i te( my. f i r e) ; // But my.fire still refers to the Date object

5.3.2 Sentencias

Las sentencias en JavaScript deben terminar en punto y coma, aunque no es obligatorio. Las estructuras de controlcondicional son las mismas de C: i f , el se y swi tch, como muestra el siguiente ejemplo.

if ( user name ! = null) al er t ( "Hel l o " + user name + "\ nWel come to my bl og. " ) ;else if ( askname ){

user name = pr ompt ( "Wel come! \ n What i s your name?" ) ; al er t ( "Hel l o " + user name) ;}else al er t ( "Hel l o there") ;

La estructura de control swi t ch es más flexible que en C. Al ser un lenguaje interpretado, los casos del swi t ch son

expresiones, no sólo constantes. El parámetro del swi tch se compara contra cada case utili zando el operador de identidad

===, hasta encontrar una coincidencia o el def aul t si fue provisto por el programador.

function transfer ( f i l e, met hod){

switch( met hod){

case ' none' : break;

case ' f t p' :return t rans fe r_ f tp( f i l e) ;

case ' rsync' :default:

return transfer_rsync( f i l e) ;}

}

Los ciclos f or , whi l e y do/whi l e tienen la misma sintaxis de C. Por ejemplo:

// Llenar un arreglo con 20 factoriales: del 0 al 19

var f ac tor i al s = new Array( 20) ;for( var i = 0; i < fa cto r i al s. l ength; ++i ) f ac tor i al s[ i ] = i ? i * f ac tor i al s[ i - 1] : 1;

// Imprimir el arreglo en el documento


99 22/09/2015 1



for( var i = 0; i < fa cto r i al s. l ength; ++i ) document . wr i te( i , ' ! = ' , f acto r i al s[ i ] , ' <br >' ) ;

Ejemplo del ciclo f or en JavaScript. Correr este ejemplo.

JavaScript agrega un tipo de ciclo más, el ciclo for/in, cuya sintaxis es:

for ( propert y_name i n obj ect ) st at ement ;

donde pr oper t y_name se refiere al nombre de una variable, una declaración var , un elemento de un arreglo, la propiedad de

un objeto, o incluso una expresión. obj ect se refiere a un objeto o una expresión que evalúa en un objeto. El cuerpo del

for/in, se ejecuta una vez por cada propiedad del objeto y en cada iteración, proper t y_name adquiere el nombre lapropiedad, es decir, un string. Por ejemplo:

for ( var pr op_name i n my_obj ect ) document . wr i te( " name: " + pr op_name + "; val ue: " + my_obj ect [ pr op_name] , " <br / >" ) ;

Ya que pr oper t y_name puede ser una expresión arbitraria, cada vez que se itera se podría evaluar de forma diferente. Porejemplo, este código copia los nombres de un objeto en un arreglo:

var obj = {x: 1, y: 2, z: 3};var a r r = new Array( ) ;var i = 0;for( ar r [ i ++] i n obj )

;

// Imprime cada nombre en el arreglo

for( i i n ar r ) al ert ( i ) ;

No hay forma de especificar en un f o r / i n el orden de recorrido, es dependiente de la implementación de JavaScript; lo

único que asegura el estándar es que se recorrerán todas las propiedades enumerables del objeto. Una propiedad esenumerable si es definida por el objeto mismo, es decir, no es heredada.


99 22/09/2015 1



5.4 Arreglos y funciones como objetos

En JavaScript los arreglos y las funciones son objetos, y por ende tienen propiedades heredadas de las pseudoclases Array y

Funct i on respectivamente. A su vez, estas pseudoclases heredan de Obj ect . Esta sección da una introducción de algunaspropiedades que estas clases proveen.

5.4.1 Propiedades de Object

Cuando se crea un objeto se guarda una referencia a la función que se util izó para inicializar el objeto, en la propiedadconst r uct or. Por ejemplo:

var d1 = new Date( ) ;d1. constructor == Date // Se evalúa como true

La propiedad const r uct or sirve para saber si un objeto es instancia directa de una psudoclase particular, mientras que el

operador i nst anceof sirve para determinar si el objeto es descendiente de una pseudoclase dada. Por ejemplo:

var d1 = new Date( ) ;d1. constructor == Date // true

d1. constructor == Object // false

d1 i nst anceof Date // true

d1 i nst anceof Object // true, todo objeto es descendiente de Object

d1 i nst anceof Array // false

var o1 = new Object( ) ;var o2 = {};o1. constructor == Object // true

o2. constructor == Object // true

o1 i nst anceof Object // true

o2 i nst anceof Object // true

var a1 = new Array( ) ;var a2 = [ ] ;a1. constructor == Array // true

a2. constructor == Array // true

a1. constructor == Object // false

a2. constructor == Object // false

a1 i nst anceof Array // true

a2 i nst anceof Array // true

a1 i nst anceof Object // true

a2 i nst anceof Object // true

function f 1( ) {};var f 2 = function( ) {};var f 3 = new Function( ' ' , ' ; ' ) ;f *. constructor == Function // true

f *. constructor == Object // false

f * i nst anceof Function // true

f * i nst anceof Object // true

El método toStr i ng() heredado de la pseudoclase Obj ect es invocado automáticamente por JavaScript cuando necesitaconvertir el objeto en un string. La implementación por defecto retorna la cadena "[ obj ect Obj ect] " que es poco

significativa. Por ende, este método debería ser sobrescrito por clases descendientes.

El método val ueOf ( ) es invocado automáticamente por JavaScript cuando el objeto se utiliza en un contexto numérico.

También debería ser sobrescrito para clases descencientes.

5.4.2 Propiedades de Array

La propiedad más natural de un arreglo es l ength que indica la cantidad de elementos que hay almacenados en él. De hecho

es la principal diferencia entre un arreglo y un objeto tradicional. La siguiente tabla muestra una lista de métodosheredados de la pseudoclase Array.

Métodos de Array

Método Detalles


99 22/09/2015 1



Método Detalles

push( el ems)Inserta los elementos enviados por parámetro al final del arreglo. Retorna la cantidad de elementos que quedan enel arreglo.[1, 2, 3] . push( 9, nul l ) / / retorna 5, dej a [ 1, 2, 3, 9, nul l ]

pop( ) Elimina y retorna el último elemento del arreglo. Si está vacío, retorna undefined.[1, 2, 3] . pop() / / dej a [ 1, 2]

unshi f t ( el ems)Inserta los elementos enviados por parámetro al inicio del arreglo. Retorna la cantidad de elementos que quedanen el arreglo.[1, 2, 3] . unshi f t ( 9, nul l ) / / reto rna 5, dej a [9 ,nul l , 1, 2, 3]

s hi f t ( ) Elimina y retorna el primer elemento del arreglo[1, 2, 3] . shi f t ( ) / / dej a [2, 3]

j oi n( sep)

Retorna un string resultado de concatenar todos los elementos en el arreglo, separados por la cadena sep, o comas

si se omite.[1, 2, 3] . j oi n( ) / / genera "1, 2, 3"[1, 2, 3] . j oi n( ' ; ' ) / / genera "1; 2 ; 3"

t oStr i ng()Está sobrescrito para hacer lo mismo que j oi n( ) .

[1, [8 ,9 ] , 2] . toStr i ng( ) / / re torna "1, 8, 9, 2"

reverse() Invierte el orden de los elementos en el arreglo.[1, 2, 3] . reverse() / / genera [3, 2, 1]

sor t ( comp)

Ordena los elementos en el arreglo de acuerdo a la función comparadora comp( ) , sino los ordena alfabéticamente

invocando t oSt r i ng( ) a cada uno de sus elementos.

[7, 200, 81] . sor t () / / genera [ 200, 7, 81][7, 200, 81] . sor t (f uncti on( a, b) {r eturn a- b; }) / / genera [7,81, 200]

s l i c e ( i , j )Retorna un nuevo subarreglo con los elementos encontrados desde la posición i hasta j - 1, es decir, el que está

en j no se incluye.

[1, 2, 3, 4, 5]. s l i ce(1, 3) / / genera [ 2, 3]

5.4.3 Propiedades de Function

En JavaScript las funciones son objetos y por ende también tienen propiedades. Una función puede ser invocada con igual,menos o más argumentos de los esperados por la función. En JavaScript es fácil, incluso, implementar una función quereciba una cantidad arbitraria de parámetros.

Cada vez que se invoca una función, JavaScript llena un objeto-arreglo ar gument s que es accesible desde la función. Como

es de esperar argument s. l ength indica la cantidad de argumentos con que se invocó la función y argument s[ i ] accede al

argumento i + 1 en la lista. El siguiente es un ejemplo de una función tradicional:

// Sea una funcion que espera dos parametros, ignora los demas

function mi n( a, b) { return a < b ? a : b; }

// En JavaScript es completamente valido invocarla con menos o mas parametros

mi n( 3, 0. 07, - 0. 5) ; // retorna 0.07

// Al hacer la invocacion anterior en min() ocurre lo siguiente:

// a == 3

// b == 0.07

// arguments[0] == 3

// arguments[1] == 0.07

// arguments[2] == -0.5

// arguments.length == 3

// min.length == 2 // la cantidad de argumentos declarados en la funcion

Como se ve en el ejemplo anterior, la invocación de mi n() con tres parámetros falla el resultado esperado por el llamador. Lafunción mi n podría detectar esto con la propiedad l engt h, heredada de Funct i on, la cual indica la cantidad de parámetros

especificados en la declaración de la función. Por ejemplo:

// Esta version de min solo trabaja con dos parametros

function mi n( a, b){

// Si el numero dado de argumentos es diferente del esperado, lance un error

if ( ar gument s. l engt h ! = mi n. l ength )throw new Error( ' mi n() : expect ed ' + mi n. l engt h + ' argument s, sent ' + argument s. l engt h) ;

// Solo dos parametros fueron provistos como se esperaba

return a < b ? a : b;}

try{ mi n( ) ; // Lanza excepcion

mi n( 3) ; // Lanza excepcion

mi n( 3, 0. 07) ; // Retorna 0.07

mi n( 3, 0. 07, - 0. 5) ; // Lanza excepcion

}catch( exc){ document . wr i te( exc) ;}

Una función que exige un número estricto de argumentos. Correr este ejemplo.


99 22/09/2015 1



Sin embargo, en JavaScript es fácil escribir una función que trabaje con un número arbitrario de parámetros, como se ve acontinuación.

function mi n( ){

var resul t = ar gument s. l engt h ? Number. MAX_VALUE : undefined ;for ( var i = 0; i < ar gument s. l engt h; ++i )

if ( ar gument s[ i ] < resul t ) resul t = ar gument s[ i ] ;

return resul t ;}

mi n( ) ; // retorna undefined

mi n( 3) ; // retorna 3

mi n( 3, 0. 07, - 0. 5) ; // retorna -0.5

Una función que recibe un número arbitrario de argumentos. Correr este ejemplo.

Ya que una función es un objeto, puede tener propiedades, como la propiedad l ength que es creada por la pseudoclase

Funct i on, y el arreglo ar gument s visto anteriormente. El programador también puede crear sus propias propiedades, las

cuales tendrán el efecto de ser "variables estáticas" de la función. El siguiente ejemplo muestra una función que reporta elnúmero de veces que ha sido invocada.

// Crea una "variable estática" como propiedad de la función. JavaScript "parsea" el código// antes de ejecutarlo, por lo que el nombre de la función puede usarse antes de ser declarada

count Cal l s. count = 0;

function countCal l s( ){

// Usar la propiedad como si fuese una variable estática

document . wr i te( ' <p>countCal l s( ) ha si do l l amada ' + ++count Cal l s. count + ' veces</ p>' ) ;}

count Cal l s( ) ; // Imprime "countCalls() ha sido llamada 1 veces"



Simular una variable estática dentro de una función. Correr este ejemplo.

5.5 Pseudoclases

JavaScript no tiene el concepto de clase como sí C++ o Java, sino que las clases se simulan con funciones inicializadoras,objetos y prototipos de objetos. Una función constructora o función inicializadora es una función cualquiera que recibeun objeto por parámetro t h i s y le crea propiedades y métodos. Por ejemplo:

// Construye un rectángulo. Recibe un objeto en el parámetro oculto this

function Rectangle( w, h){

// Declara propiedades y las inicializa

this. wi dth = w;this. hei ght = h;

// También puede crear métodos

this. area = function( ) { return this. wi dth * this. hei ght ; }}

Las funciones constructoras son invocadas con el operador new. Este operador hace lo siguiente. Crea un objeto vacío, sinpropiedades. Invoca a la función constructora pasándole el objeto vacío por parámetro para que lo incialice. Finalmenteretorna la dirección de memoria del nuevo objeto.

var rect1 = new Rectangle( 2, 4) ; // rect1 = { width:2, height:4 };

var rect2 = new Rectangle( 8. 5, 11) ; // rect2 = { width:8.5, height:11 };

document . wr i te( "Area of rect2: " + rect2. area( ) ) ; // Imprime "Area of rect2: 93.5"

Todos los objetos que sean inicializados con la función Rectangl e( ) tendrán un wi dt h y un hei gth, el desarrollador puede

utilizar con confianza estas propiedades. La función constructora no debe retornar un valor, ya que reemplazará el resultadode la expresión new. Nótese que nunca hubo una clase, sino una función constructora y objetos tradicionales que son

inicializados con ella. Por esto se les llama pseudoclases y la función constructora es quien da nombre a la pseudoclase.

Como es de esperarse, todos los objetos inicializados con Rectangl e() tienen su propia copia independiente de wi dt h y

hei ght . Esto implica que en el ejemplo anterior, si a r ect 2. wi dt h se le asigna otro valor, no afectará al valor de r ect 1. wi dth,


99 22/09/2015 1



como el programador naturalmente espera. Sin embargo, esto mismo ocurre con los métodos: cada objeto inicializado con lafunción constructura Rectangl e() tendrá su propia copia independiente del método area() , lo cual es ineficiente. Esta

redundancia se elimina con los objetos prototipo.

Todas las funciones que el programador defina, tendrán automáticamente otra propiedad llamada pr ot otype creada porFunct i on, de la misma forma que l engt h y ar gument s. La propiedad protot ype es un objeto, definido como una "variable

estática" y por tanto, todas las invocaciones a la función tendrán acceso al mismo protot ype.

Como la funciones constructoras son funciones normales, también tienen una propiedad pr otot ype, y cada vez que se invoca

el operador new, éste implícitamente agrega una propiedad al nuevo objeto para que apunte al protot ype de la función

constructora. El siguiente pseudocódigo explica lo que hace el operador new internamente:

// El programador define una función constructora

function Constructor( a, b) { this. prop1 = a; this. prop2 = b; }

// La pseudoclase Function inserta una propiedad length en la función implícitamente

Constructor. l ength = 2;

// La pseudoclase Function inserta una propiedad prototype en la función implícitamente

Constructor. prot otype = {};

// El programador crea un nuevo objeto con su función constructora

var obj 1 = new Constructor( a, b) ;

// El operador new hace esto internamente:

// 1. Crea un objeto vacío

var newObj ect = {};

// 2. Crea una propiedad prototype en el objeto que apunta al prototipo de la función

newObj ect . prot otype = Constructor. prototype;// 3. Invoca a la función constructora para que inicialice el nuevo objeto, la cual

// creará las propiedades prop1 y prop2

Constructor. cal l ( newObj ect , a, b) ;

// 4. Retorna el objeto recién inicializado

return newObj ect ;

// obj1 tendrá al final las siguientes propiedades:

obj 1. prop1obj 1. prop2obj 1. protot ype

El lenguaje JavaScript especifica que cualquier propiedad asignada al objeto Constr uctor. pr otot ype, será automáticamente

una propiedad compartida por todos los objetos construidos con la función Const r uctor , incluso, aunque dicha propiedad sea

asignada después de que los objetos fueron creados. De esta forma, las propiedades creadas por la función constructoradirectamente en el objeto serán copias independientes en cada objeto, y las propiedades creadas en el prototipo de la

misma, serán propiedades compartidas por todos los objetos (lo que en C++ y Java se conoce como miembros estáticos).Por ejemplo:

// Construye un rectángulo. Recibe un objeto en el parámetro oculto this

function Rectangle( w, h){

// Cada objeto tendrá una copia independiente de estas propiedades

this. wi dth = w;this. hei ght = h;

}

// Este método será compartido por todos los objetos creados con new Rectangle()

Rectangle. pr otot ype. area = function( ) { return this. wi dth * this. hei ght ; }

Nótese que el método area() no se definió dentro de la función constructora. Si eso se hubiera hecho, se haría la asignación

por cada rectángulo creado durante la ejecución del programa, lo cual es ineficiente.

El pr ototype es el lugar ideal para definir métodos, constantes y variables compartidas por todos los objetos de una misma

pseudoclase. El programador querrá la mayor parte del tiempo tratar estas propiedades como de sólo lectura. Si modificauna propiedad en el prototipo directamente, el cambio afectará a todos los demás objetos inmediatamente; pero si intentamodificar la propiedad a través de un objeto cualquiera, creará una nueva propiedad en ese objeto que oculta la delprototipo. Por ejemplo:

// El programador define una pseudoclase con una función constructora

function Circle( r adi us) { this. radi us = radi us; }

// Y un método que será compartido por todos los objetos creados con new Rectangle()

Circle. pr ototype. area = function( ) { return Math. PI * this. r adi us * this. radi us; }

// circle1 y circle2 tienen su respectivo radius, son copias independientes

var c i rc l e1 = new Circle( 7) ;var c i rc l e2 = new Circle( 2. 5) ;

// circle1 y circle2 comparten el mismo método area()


99 22/09/2015 1



if ( c i r c l e1. area === c i r c l e2. area ){ document . wr i te( ' c i r c l e1. area( ) = ' , c i r cl e1. area( ) ) ; // Imprime 153.94

document . wr i te( ' c i r c l e2. area( ) = ' , c i r cl e2. area( ) ) ; // Imprime 19.63

}else document . wr i te( ' Ci r cl es do not shar e t he same ar ea( ) method! ' ) ;

// El programador trata de modificar el método area() a traves de un objeto

ci r c l e 2. area = function( ) { return Math. PI * this. radi us * this. r adi us / 2; }

// Lo anterior crea una propiedad area() sólo en circle2 que tapa la del prototipo

document . wr i te( ' c i r c l e 1. are a( ) = ' , ci r c l e1. area( ) ) ; // Imprime 153.94


// Al modificar una propiedad del prototipo afecta a todos los objetos, creados o nuevos

Circle. pr ototype. area = function( ) { return 0; }

// Un nuevo objeto aparece

var c i rc l e3 = new Circle( 3. 1) ;

// Todos los objetos reflejan el cambio excepto aquellos que han sobrescrito la propiedad

document . wr i te( ' c i r c l e 1. are a( ) = ' , ci r c l e1. area( ) ) ; // Imprime 0


document . wr i te( ' c i r c l e 3. are a( ) = ' , ci r c l e3. area( ) ) ; // Imprime 0

Conflicto de propiedades en el objeto y el prototipo. Correr este ejemplo.

Idealmente cuando un programador define una pseudoclase, debe redefinir algunos métodos heredados de la pseudoclaseObj ect . El método toSt r i ng( ) debe regresar una representación "string" del objeto. Opcionalmente puede redefinir el

método parse() . Si su pseudoclase se puede convertir en un valor primitivo, implemente también val ueOf ( ) .


99 22/09/2015 1



5.6 Programación del navegador

JavaScript es un lenguaje genérico que cualquier software puede implementar para permitir al usuario programarlo. Aunqueel número de sistemas que implementan JavaScript va en crecimiento, han sido los navegadores web el ejemplo históricomás evidente. El navegador web utiliza el lenguaje de programación JavaScript para exponer cierta funcionalidad al autorde un sitio web, quien debe aprovecharla sólo para mejorar la experiencia del usuario con su obra, haciéndole másfácil obtener o transmitir información. Por ejemplo, creando efectos visuales que guíen al usuario, ordenando los valores deuna tabla para ayudarle a encontrar lo que necesita, ocultado o mostrando información que le es de interés, ointercambiando información con el servidor de tal forma que el usuario no se confunda con una recarga completa de lapágina.

Ha ido ganando popularidad una corriente llamada Unobtrusive JavaScript (JavaScript no impertinente). Este paradigmasustenta que JavaScript no debería tratar de llamar la atención a sí mismo. No consiste en una variación del lenguaje, sinoen un conjunto de prácticas recomendadas, por ejemplo:

Accesibilidad al contenido (X)HTML. Si JavaScript dificulta al usuario el acceso al contenido; por ejemplo,lanzando ventanas emergentes; el usuario tendrá excelentes provocaciones para deshabilitar el intérprete deJavaScript en su navegador.

Graceful degradation. Significa que en caso de que el usuario tenga deshabilitado JavaScript en su navegador, oéste no sea compatible en su totalidad, siempre se pueda tener acceso al contenido (X)HTML.

Separación del contenido y el comportamiento. El programador debe escribir su código JavaScript en un archivoexterno e incluirlo en el documento (X)HTML con un elemento <scr i pt sr c="program. j s">. Esto ahorra ancho de

banda, permite reutilizar el comportamiento a lo largo del sitio y facilita el mantenimiento del código.

5.6.1 El ambiente de desarrollo del navegador

Utilizando JavaScript, el navegador pone a disposición del autor un conjunto de objetos que permiten manipular ventanas,cambiar el URL, modificar el contenido o estilo del documento, comunicarse con el servidor web, y otras operaciones úti les.

El objetivo primordial de un navegador web es desplegar al usuario documentos (X)HTML en una ventana. De ahí nacen losdos objetos más importantes para el programador: la ventana del navegador (wi ndow), la cual contiene al documento web

(document ) del autor.

El objeto wi ndow es quizá el más importante, porque no sólo es un simple objeto, es el objeto global . Todas las propiedades

del objeto global son variables globales, y viceversa: las variables globales que el programador defina se crearán comopropiedades del objeto global wi ndow. Así, las dos siguientes declaraciones hacen esencialmente lo mismo:

var answer = 722;wi ndow. answer = 722;

De lo anterior se obtiene que da lo mismo escribir wi ndow. document que simplemente document . Dicho de otra forma, el

objeto wi ndow es el más importante porque todos los demás objetos que existen se acceden a através de él, como se ve en lasiguiente jerarquía parcial:

wi ndow parent t op navi gator l ocat i on hi s tory scr een document anchors[ ] l i nks[ ] i mages[ ] appl et s[ ] f orms[ ] el ements[ ]

La jerarquía que nace del objeto document ha sido estandarizada por el Consorcio Web (W3C) en lo que se llama Document

Object Model (DOM), de tal forma que permite a los programadores JavaScript escribir código portable entre navegadorespara manipular el documento y sus estilos.

Como se indicó al iniciar este capítulo, el código JavaScript puede correr en cuatro lugares: en un elemento scr i pt , en un

archivo . j s externo, en atributos manejadores de eventos y en el pseudoprotocolo j avasc r i pt : . Todos comparten el mismo

objeto global wi ndow y su descendencia; por ende, cualquier propiedad definida en uno de estos lugares, es accesible en

todos los demás. En el siguiente ejemplo, la función global genRandom( ) es definida en el primer script y usada en el segundo

script.

<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml "><head>

<title>Gl obal pr oper t i es</title><script type="text / j avascr i pt" >

// Global property, same as window.genRandom = function() {...}

function genRandom( maxVal ue)


99 22/09/2015 1



{return Math. f l oor ( Math. r andom( ) * maxVal ue) ;

}</script>

</head>

<body>

<p>Su númer o de l a suert e es:<script type="text / j avascr i pt" >

// genRandom() is defined in another script. It can be called here

// because both scripts share the same global object: window

var num = genRandom( 100) ; // Same as window.num = window.genRandom(100);

document . wr i te( num == 13 ? ' ( no j uegue l oterí a esta semana) ' : wi ndow. num ) ;</script>

. </p></body>

</html>

Variables globales son propiedades del objeto wi ndow. Correr este ejemplo.

5.6.1.1 El modelo de ejecución de JavaScript

El código almacenado en los elementos scr i pt se ejecuta sólo una única vez: cuando el documento (X)HTML es cargado en

el navegador. Una vez que se ha completado la carga, la interacción se realiza mediante eventos. Cuando ocurre un evento,normalmente generado por el usuario, el navegador puede invocar código JavaScript del autor que reaccione al evento, elcual se asocia al objeto que genere eventos a través de atributos intrínsecos. En el siguiente ejemplo, cuando el usuariohace click en la imagen se invoca el método next() del objeto wi ndow. pl ayer , y mientras el mismo botón se mantiene

presionado, se invoca el método f or ward del mismo objeto.

<img onc l i ck=" pl ayer . next ( ) ; " onmousedown="pl ayer. f orward( ) ; " sr c="i mg/ but t on_next. svg">

El modelo de ejecución de código JavaScript sigue esta regla. El código que aparece en los elementos scr i pt es ejecutado

en el mismo orden en que aparecen, durante la carga (parsing) el documento web. Cuando un elemento scr i pt termina de

ejecutarse, es reemplazado por su salida, la cual es el resultado de las posibles invocaciones a document . wr i t e() que se

hayan hecho. Inmediatamente el navegador continúa analizando esta salida como cualquier otro código (X)HTML, yposteriormente el resto del documento web.

Una vez que el documento ha terminado de analizarse, todos los elementos scr i pt se habrán ejecutado y el contenido

externo, como imágenes o sonidos, habrá sido cargado; el navegador dispara el primer evento: onl oad. El código manejadorde este evento se escribe como valor del atributo onl oad del elemento body. El código ejecutado en este punto, puede hacer

modificaciones libremente sobre la estructura del documento, ya que éste se encuentra totalmente cargado y analizado(parsed); pero no debe invocar a document . wr i t e() , ya que hará algo inesperado, como reemplazar el documento porcompleto.

Después de cargar el documento, correr los elementos scr i pt y atender el evento onl oad, el navegador entra en la fase de

manejo de eventos (event-driven phase), ejecutando el código JavaScript que se haya asociado a los atributos intrínsecossegún los vaya disparando el usuario. Estos manejadores de eventos tampoco deben invocar a document . wr i t e() , ya que

construirán un nuevo documento, remplazando el anterior.

Finalmente, cuando el usuario abandona la página, el browser dispara el evento onunl oad también de body, dando unaoportunidad final al código JavaScript de correr. Este debe ser eficiente y silencioso, por ejemplo para hacer alguna limpiezanecesaria, evitando demoras que confundan al usuario. La siguiente tabla resume los eventos intrínsecos que el autordispone para mejorar la comunicación con el lector.

Eventos intrínsecos

Evento Descripción

oncl i ckonc l i ck se dispara cuando el usuario hace click sobre el elemento. Si oncl i ck retorna false, el browser no

efectúa la operación por defecto asociada al elemento, por ejemp lo, no seguirá el hiperlink en caso de un enlace(a), o no enviaría un formulario en caso de un botón submit .

onmousedown,

onmouseup

onmous edown es disparado cuando el usuario presiona el ratón sobre un elemento y onmouseup cuando suelta el

botón del ratón. Si ambos eventos ocurren sobre el mismo lugar de un elemento, se generará un onc l i ck. La

mayoría de elementos (X)HTML implementan estos dos eventos.

onmouseover ,onmouseout

onmouseover se dispara mientras el cursor del ratón está sobre un elemento (X)HTML y onmouseout cuandosale de él.

onchangeEl manejador onchange se dispara en los elementos que permiten ingresar texto, como i nput , sel ect y

textarea cuando el usuario cambia el valor desplegado del elemento y después mueve el foco hacia otro

elemento.

onl oad El evento onl oad sólo se puede asociar a body y es lanzado cuando el documento y su contenido externo,

incluyendo imágenes, han sido completamente cargados.

Supóngase que en una ventana del navegador el documento actual es reemplazado por otro, por ejemplo, cuando el usuarioescribe un nuevo URL. El nuevo documento no puede acceder a las propiedades que el documento previo creó en laventana, ya que el objeto wi ndow es reestablecido (reset) por el navegador. Esto implica que todas las funciones ypropiedades que los scripts definan, durarán mientras el documento actual se mantenga activo.


99 22/09/2015 1



5.6.1.2 Consideraciones de seguridad

El hecho de que código ajeno sea ejecutado en su máquina a través de un navegador, da oportunidad a que intencionesmalignas puedan llevarse a cabo. Por esto, los navegadores simplemente no soportan ciertas funcionalidades que en otroslenguajes son naturales, como la capacidad de leer, escribir o el iminar archivos en la computadora cliente.

Otras funcionalidades están l imitadas. Por ejemplo, JavaScript puede emplear el protocolo HTTP para intercambiarinformación con el servidor pero no puede abrir un socket o util izar alguna primitiva de programación de red. Algunas deestas restricciones son controlables por el usuario, ajustando la política de seguridad del navegador. De acuerdo a estaconfiguración su programa JavaScript:

Podría abrir nuevas ventanas pero sólo en respuesta a un evento del usuario (onclik).

Podría cerrar ventanas, pero sólo las abiertas por sí mismo.

No puede ocultar el texto en la barra de estado cuando el cursor se mueve sobre un enlace.

No puede crear una ventana de área pequeña o muy grande, sin barra de título ni estado.

No puede leer ni modificar documentos cargados de servidores diferentes (same-origin policy).

La política del mismo origen (same-origin policy) indica que un script puede acceder únicamente a contenido que tiene elmismo origen que el documento que contiene el script. Es decir, que su código no puede acceder a otro documento quetenga cargado su navegador en otra ventana obtenido de otro sitio web. También dicta que el código JavaScript puedecomunicarse a través del objeto XMLHt t pRequest sólo con el servidor web de donde se obtuvo el documento.

5.6.2 El objeto window

El objeto global wi ndow provee varios métodos y otras propiedades para manipular el navegador, ventanas, direcciones, el

historial y similares.

5.6.2.1 Temporizadores y animaciones

El método wi ndow. set Ti meout( code, del ay) ejecuta el código JavaScript enviado en el parámetro code, del ay milisegundos

después de que se hace la invocación. Retorna un identificador opaco que necesitará el programador si desea cancelar dichotemporizador con el método wi ndow. cl ear Ti meout( ) . El código es invocado sólo una vez. Si se quiere que ocurra

repetitivamente, el código en code debe volver a establecer un set Ti meout( ) o bien usar el método t i mer =wi ndow. setI nt erval ( code, peri od) , el cual ejecuta el código code repetitivamente en intervalos de peri od milisegundos,

hasta que se invoque wi ndow. cl earI nt erval (t i mer ) . Esto es muy útil para realizar animaciones, como el siguiente relojdigital.

<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml ">1.<head>2.

<title>Di gi ta l c l ock</title>3.

<style t ype="t ext/ css">4. body { background: bl ack; margi n: 4cm0; text - al i gn: cent er; }5.#clock { font-size: 6em; color: #151520; text-shadow: 2px 2px 7px lightgray; }6.

</style>7.</head>8.

9.<body>10.

<div i d="cl ock">HH: MM: SS</div>11.<script t ype="text / j avascr i pt" >12.

wi ndow. setI nt er val ( ' updateCl ock() ' , 1000 ) ;13.function updat eCl ock( )14.{15.

var dat e = new Date( ) ;16.document . get El ement ByI d( ' c l ock' ) . i nner HTML = date. t oLocal eTi meStr i ng( ) ;17.

}18.</script>19.


Un reloj digital animado con JavaScript. Correr este ejemplo.

En el documento anterior, el elemento con identificador cl ock de la línea 11 será util izado para desplegar la hora local delnavegador. Cuando el navegador carga el cuerpo de este documento, mostrará el di v como de costumbre, aplicándole los

estilos que se declararon en la parte superior. Luego encontrará un elemento scr i pt y lo ejecutará como es sabido. La

invocación a set I nte rval ( ) en la línea 13 le indica al navegador que debe ejecutar el código updat eCl ock() dentro de 1

segundo, cada segundo. Al ser invocada, la función updat eCl ock() debe cambiar el contenido del <di v i d="cl ock">. . . </ di v>

con el valor actual de la hora. JavaScript requiere una referencia al objeto di v que tiene el identificador cl ock, y la consigue

invocando el método document. getEl ement ByI d( ) que se estudiará luego. Una vez obtenida la referencia al elemento di v, se

cambia su contenido con la hora actual en el navegador obtenida en forma de string.


99 22/09/2015 1



El siguiente ejemplo muestra un texto moverse de izquierda a derecha, en un ancho de 320 pixeles. Esta vez no se modificael contenido de un elemento particular, sino su posición, lo cual es responsabilidad de la presentación, por lo que el códigoJavaScript debe modificar el estilo CSS del elemento con identificador t ext dinámicamente. El estilo de un elemento se

accede en JavaScript a través de su propiedad s t yl e, la cual es un objeto cuyas propiedades tienen el mismo nombre que

las propiedades CSS en notación "camelCase" (mar gi n, mar gi nTop, etc.), y sus valores son siempre un string -esto se

estudiará con más detalle luego-. En este ejemplo, cada vez que se invoca, ani mateText ( ) calcula en la variable global

textLef t la nueva posición del texto (líneas 18 y 19); y en la línea 21 asigna el resultado de este cálculo a la propiedad

st y l e. l ef t , cuyo efecto es el mismo a haber escrito #t ext { l ef t : textLeft; } en CSS. Para que esto funcione, elelemento #t ext debe "flotar" sobre el documento, lo cual se hizo en la l ínea 6 indicando que su posición es absoluta.

<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml ">1.<head>2.

<title> Text o ani mado</title>3.<style t ype="t ext/ css">4.

body { mar gi n: 0; background: #ccc; color: #C8C8C8; font-size: 3em; }5.#text { position: absolute; top: 2em; text-shadow: 1px 1px white, -1px -1px #444; }6.

</style>7.</head>8.

9.<body>10.

<div i d="text">Su nombr e aquí </div>11.<script t ype="text / j avascr i pt" >12.<! - -13.

wi ndow. setI nt er val ( ' ani mateText( ) ' , 50 ) ;14.var textLeft = 0;15.function ani mat eText ( )16.{17.

textLef t += 5;18.if ( textLef t > 320 ) textLeft = - 320;19.var el ement = document . get El ement ByI d( ' t e xt ' ) ;20.el ement . s t yl e. l e f t = Math. abs( t extLef t ) + ' px' ;21.

}22.- - >23.</script>24.

</body>25.

Un texto animado con JavaScript para desplazarse en vaivén de izquierda a derecha. Correr este ejemplo.

5.6.2.2 Información del navegador, la ventana y la pantalla

El objeto global wi ndow tiene varias propiedades de sólo lectura que informan el tamaño de la ventana, el tamaño del

documento y la posición del navegador en el escritorio:

Propiedades para obtener la geometría del navegador

Propiedad Descripción

wi ndow. out er Wi dth,

wi ndow. out er Hei ghtAncho y alto de la ventana del navegador.

wi ndow. scr eenX,

wi ndow. scr eenY Posición del navegador en el escritorio del usuario.

wi ndow. i nner Wi dth,

wi ndow. i nner Hei ght

Tamaño del área donde el documento se despliega (también llamada área cliente o viewport .Equivale al tamaño de la ventana del navegador sin las barras de menú, herramientas, scrollbars,etc.

wi ndow. pageXOf f set ,

wi ndow. pageYOf f setEl segmento del documento actualmente desplegado en la ventana del navegador, expresadocomo la posición de las barras de desplazamiento (scrollbars).

El objeto wi ndow. scr een provee información sobre la pantalla del usuario, por ejemplo: las dimensiones en pixeles del

escritorio (screen. wi dth y scr een. hei ght ), la profundidad de color en bits por píxel (scr een. pi xel Dept h), el área usable del

escritorio sin incluir la barra de tareas (screen. avai l Wi dt h y scr een. avai l Hei ght ). Con estas propiedades el programador

puede escoger qué imágenes presentar, centrar una venana en el escritorio o tareas similares.

El objeto wi ndow. navi gat or contiene información sobre el navegador mismo, como su nombre (navi gator . appName), versión

(navi gat or. appVersi on), el nombre codificado (navi gator . appCodeName, el sistema operativo para el que se compiló el


99 22/09/2015 1



navegador (navi gator. pl atf orm), si tiene habilitados los cookies (navi gat or. cooki eEnabl ed), y la identificación que el

browser envía en sus encabezados HTTP (navi gat or. user Agent ). No es recomendable utili zar esta información para escribir

funcionalidad dependiente del navegador, sino para propósitos de estadísticas o bitácoras.

5.6.2.3 Abrir y manipular ventanas

JavaScript permite al autor crear nuevas ventanas de navegador en las que puede cargar documentos existentes de suservidor web o generar un nuevo documento dinámicamente. Sin embargo, el abuso que ha cometido la publicidad y otrosfines, ha obligado a los fabricantes de navegadores a restringir esta funcionalidad de acuerdo a la política de seguridad, porejemplo, a permitir abrir ventanas sólo en respuesta a un evento del usuario.

Una invocación al método wi ndow. open( url , name, f eat ures, r epHi st ory) crea y retorna una referencia hacia una nueva

ventana, y por ende, un nuevo objeto wi ndow con toda su descendencia de objetos. La nueva ventana cargará un documento

si se especifica un ur l , de lo contrario, tendrá un documento vacío. El parámetro name le da un nombre a la ventana, si ya

existe una con ese nombre simplemente se reutiliza, y en tal caso, si repHi st or y es t rue el historial de navegación en esa

ventana es reemplazado; si es f a l s e o se omite, el nuevo documento es simplemente agregado al historial. El siguiente

ejemplo crea una pequeña ventana emergente de ayuda cuando se presiona el botón, y la cierra cuando se vuelve apresionar con el método wi ndow. cl ose( ) que cierra gráficamente la ventana pero no destruye el objeto wi ndow.

<button i d="hel pBut t on" onc l i ck=" t oggl eHel p( ) ">Ayuda</button>

<script t ype="text / j avascr i pt" >var hel pWi ndow;function t oggl eHel p( ){

if ( hel pWi ndow ){

hel pWi ndow. cl ose( ) ; hel pWi ndow = undefined ; document . get El ementByI d( ' hel pButt on' ) . i nnerHTML = ' Ayuda' ;

}else{

hel pWi ndow = wi ndow. open( ' hel p. html ' , ' hel p_wi ndow' , ' wi dt h=400, hei ght =350, st at us=yes, r esi zabl e=yes' ) ; document . get El ementByI d( ' hel pButt on' ) . i nnerHTML = ' Cerr ar ayuda' ;

}}

</script>

Abrir una ventana en JavaScript. Correr este ejemplo.

El parámetro f eatures permite especificar el tamaño de la nueva ventana y otras decoraciones gráficas. Si se omite, se ledará tamaño estándar y todas las decoraciones existentes (barra de menú, barra de estado, ...). Algunas combinaciones sonrestringidas por razones de seguridad, por ejemplo, una ventana muy pequeña o situada en una zona no visible.

El objeto retornado por wi ndow. open( ) se puede manipular como cualquier otro objeto wi ndow. El siguiente ejemplo, genera

un documento dinámicamente en una nueva ventana.

var subwi ndow = wi ndow. open( ) ; // Create a new window with no content

var subdoc = s ubwi ndow. document ; // Get its Document object

subdoc. open( ) ; // Start a new document (optional)

subdoc. wr i te( " <h1>Hel l o wor l d! </ h1>" ) ; // Output document content

subdoc. cl ose( ) ; // End the document

Nótese que tanto document como wi ndow tinen métodos open( ) y cl ose( ) . El document. open( url ) carga un documento a partir

del ur l o genera uno vacío si se omite ur l . Invocar a document . wr i t e() es seguro en una ventana nueva ya que eldocumento se está cargando (parsing). El método document . cl ose( ) indica al navegador que el documento ha terminado de

cargarse (parsing), el cual responde deteniendo la animación de carga. Sino nunca se llama a document . cl ose( ) , elnavegador creerá que está ante un documento incompleto.

El objeto wi ndow tiene métodos para mover y redimensionar la ventana, lo cual es una pobre práctica, ya que esto debe ser

un privilegio del usuario. Son los siguientes: wi ndow. moveTo(x, y) mueve la esquina superior izquierda a las coordenadasdadas; wi ndow. moveBy( despX, despY) mueve la ventana tantos pixeles relativos a la posición actual;

wi ndow. resi zeTo( wi dth, hei ght ) y wi ndow. r esi zeBy( addToWi dth, addToHei ght ) cambian el tamaño de la ventana.


99 22/09/2015 1



El método wi ndow. f ocus( ) hace que la ventana sea la activa, y wi ndow. bl ur ( ) hace que renuncie a serlo. Es común llamar a

focus() después de hacer un wi ndow. open( ) , ya que las ventanas recién creadas no lo tienen por defecto.

Es común querer abrir un documento existente en una nueva ventana y luego hacer que ésta se desplace a diferentesfragmentos del documento dinámicamente. Si los fragmentos están identificados con el atributo i d (como en <di v

i d="f r ag1">. . . </ di v>) o con anclas (<a name="f r ag2" >. . . </ a>), se puede cambiar la ubicación del documento con un una delas siguientes instrucciones:

var subwi ndow = wi ndow. open( ' hel p. ht ml ' , ' hel p_wi ndow' ) ;subwi ndow. l ocat i on. hash = " #f r ag1"; // crea una entrada en el History de subwindow

subwi ndow. l ocat i on. r epl ace( "#f r ag1") ; // no crea una entrada en el History de subwindow

5.6.2.4 Ubicación del documento

La propiedad wi ndow. l ocat i on de una ventana representa el URL del documento que está desplegado en dicha ventana. Es

un objeto que tiene las siguientes propiedades:

Propiedades del objeto wi ndow. l ocat i on


href Es un string con el texto completo del URL.

prot ocol , host ,

pat hname, search Representan partes individuales del URL.

r el oad( ) Recarga la página como si el usuario lo hiciera en el navegador.

repl ace( url )Reemplaza el documento actual en la ventana por uno nuevo cuyo URL es dado por parámetro. No generauna entrada en el historial de la ventana, de modo que el usuario no tiene forma de regresar al documentoprevio.

Al objeto mismo wi ndow. l ocati on se le puede asignar un string, de la forma wi ndow. l ocati on = url , que causa el mismo

efecto que llamar su método wi ndow. l ocat i on. r epl ace(url ) , con la diferencia de que se agrega una entrada al historial de

navegación de la ventana, de tal forma que el usuario puede retornar al documento previo.

5.6.2.5 Cuadros de diálogo

El objeto wi ndow provee tres métodos para desplegar cuadros de diálogo. wi ndow. al er t ( msg) despliega un mensaje y espera

que el usuario lo acepte. wi ndow. conf i r m( msg) presenta un mensaje y solicita al usuario que decida si lo acepta o cancela, locual se retorna como un boolean. wi ndow. prompt( msg, def aul t Val ue) presenta el mensaje msg y espera que el usuario

ingrese un string el cual es retornado o nul l si cancela. Obligatoriamente.

Deben usarse con moderación, o mejor aún, nunca. La mayoría de usuarios se sentirá molesta al experimentarlos yrecuerde que ellos tienen el poder de cerrar el navegador. Así que estos métodos son de ligera util idad para el programadordurante el proceso de desarrollo. Hace varios años, el navegador reportaba errores de JavaScript utilizando diálogos, lo cualera impertinente: le reclamaba al usuario errores que no eran de él. Los navegadores han cambiado a ocultar los errores yel programador debe buscarlos en alguna bitácora o similar.

5.6.3 El objeto document

En esencia un navegador es un programa que despliega un documento web en una ventana. La sección anterior explicacómo manipular con JavaScript esa ventana. Esta sección explica cómo manipular dinámicamente el documento en ella.

Las propiedades más conocidas del objeto document , son los métodos wri t e() y wri te l n( ) . Ambos reciben una cantidadarbitraria de parámetros y los escriben en el documento para que sean analizados (parsed) por el navegadorposteriormente. Por eso, estos métodos sólo se deben invocar mientras se está cargando (parsing) el documento. Como esde esperar, wri te l n( ) después de imprimir todos sus parámetros, agrega un carácter de cambio de línea. Otras propiedades

útiles de document son:

Propiedades del objeto wi ndow. document


document . t i t l e Accede al título del documento que se encuentra en el encabezado del mismo.

document . l ast Modi f i ed Contiene un string con la fecha de última modificación del documento.

document . URL Es un string con el URL completo de donde se obtuvo el documento.

document . r ef err er Es un string con el URL del recurso a través del cual el usuario llegó al documento actual.

document . domai n Indica el dominio al cual pertenece el documento, y es usado por la política del mismo origen (sameorigin policy).


99 22/09/2015 1



Las propiedades anteriores permiten, por ejemplo, escribir un pie de página dinámico, como el siguiente:

document . wr i te l n( ' <addr ess>' ) ;document . wr i te( ' <st r ong><a hr ef =" ' , document . URL, ' ">' , document . t i t l e, ' </ a></ st r ong>' ) ;document . wr i te l n( ' . Úl t i ma actual i zaci ón: ' , doc ument . l astModi f i ed, ' . <br/ >' ) ;document . wr i te( ' © ' , new Date( ) . get Ful l Year ( ) ) ;document . wr i te( ' <st r ong><a href ="htt p: / / ' , document . domai n, ' ">Mi Si t i o</ a></ st r ong>' ) ;document . wr i te l n( ' . Todos l os der echos r eser vados. ' ) ;document . wr i te l n( ' </ address>' ) ;

Un pie de página dinámico con propiedades del objeto document . Correr este ejemplo.

5.6.3.1 El modelo de objetos del documento (DOM)

Cuando el navegador carga un documento (X)HTML crea un objeto JavaScript por cada elemento, comentario, o trozo detexto que encuentra en el archivo. Estos objetos se asocian entre sí en una jerarquía llamada modelo de objetos deldocumento (DOM: Document Object Model), la cual es accesible y modificable a través de JavaScript. Es decir, el DOM esuna representación interna del documento utilizando objetos. Un cambio en el DOM se refleja de inmediato en el navegador,lo que permite al autor ajustar el documento dinámicamente para mejorar la comunicación con sus lectores. Es quizá lafuncionalidad más importante que un autor busca de JavaScript.

Los objetos en la jerarquía del DOM reciben el nombre genérico de nodos, construidos con la pseudoclase Node. El nodo raíz

es siempre el documento, el cual contiene nodos opcionales (declaración XML, declaración de tipo de documento,comentarios) y el nodo del elemento ht ml . Este último tiene dos hijos: el nodo del encabezado (head) y el nodo del cuerpo

del documento (body). Los hijos del nodo body varían de acuerdo al documento. Por ejemplo, la siguiente i lustración muestra

un documento sencillo y el árbol de nodos que el navegador genera a partir de él.


99 22/09/2015 1

<html>

<head>

<title>Documento simple</title>

</head>

<body>

<h1 class="TituloGeneral"> Árbol de nodos</h1>

<p>Un <em>documento minimalista</em> para estudiar sus nodos.</p>

</body>

</html>

#document(Document node)

Un documento simple(Comment node)

html(Element node)

head (Element node)

body(Element node)

Documento simple(Text node)

Árbol de nodos(Text node)

Un(Text node)

documento minimalista(Text node)

para estudiar sus nodos.(Text node)

Las relaciones jerárquicas entre nodos implican que un nodo puede tener cero o más nodos hijos (child nodes), nodoshermanos (siblings), un nodo padre (parent), nodos descendientes y nodos ancestros. Estas relaciones se implementancomo propiedades de la pseudoclase Node. Dado un nodo se puede acceder a los otros nodos con los que está relacionado.

Estas y otras propiedades se resumen en la siguiente tabla.

Propiedades de la pseudoclase Node del XML DOM


Node. chi l dNodes[]

Un arreglo que contiene los hijos del nodo actual en el mismo orden en que fueron definidos en el

documento. Si el nodo actual no tiene hi jos, este arreglo estará vacío.Node. f i rst Chi l d El primer nodo hijo del nodo actual, o nul l si no tiene hijos.

Node. l astChi l d El último nodo hijo del nodo actual, o nul l si no tiene hijos.

Node. next Si bl i ngEl nodo hermano que continúa al actual o nul l si es el último hijo del nodo padre (parent Node). Equivale

al nodo que sigue al actual en el arreglo parentNode. chi l dNodes[ ] .

Node. pr evi ousSi bl i ngEl nodo hermano que precede al actual o nul l si es el primer hijo del nodo padre (parent Node). Equivale

al nodo que precede al actual en el arreglo par ent Node. chi l dNodes[] .

Node. parent NodeEl nodo padre o contenedor del nodo actual. Es nul l en el caso del nodo raíz, nodos que han sido

separados (removidos) del documento, o nodos creados libremente que aún no han sido insertados en eldocumento.

Node. nodeType Un entero que indica el tipo de nodo, por ejemplo: elemento (1), texto (3), comentarios (8).

Node. nodeNameUn string con un posible nombre para el nodo. Si el nodo es un elemento se utiliza el nombre del elemento("body" , "div" , " p" , etc.). Para los demás tipos de nodos se utiliza un texto generado de concatenar el

símbolo de número con el tipo de nodo, por ejemplo "#t ext " , " #comment " , " #document " , etc.


99 22/09/2015 1

Node. nodeVal ueSi el nodo es de texto (nodeType == 3) o comentario (nodeType == 8), esta propiedad tendrá un string

con dicho texto; de lo contrario el valor nul l .

Node. t extContentContiene el texto si el nodo es de texto (nodeType == 3) o comentario (nodeType == 8), en la misma

forma que nodeVal ue. Para un elemento (nodeType == 1) contiene el texto resultado de concatenar

todos los nodos de texto descendientes.

Node. owner Document Una referencia hacia el documento que contiene este nodo. Sirve, por ejemplo, para saber si dos nodos sonparte del mismo documento.

El siguiente código recorre recursivamente todos los nodos del documento e imprime algunas de las propiedades heredadasde la pseudoclase Node. La cantidad de nodos está fuertemente influenciada por el espacio en blanco que se utilice para

indentar el marcado, ya que el parser lo interpretará como datos de carácter y los almacenará en nodos de texto. [Para esteejemplo, la impresión con document . wr i t e( ) debe hacerse en un documento distinto, ya que si se hace sobre el mismo,

generará una recursión infinita].

function pri ntNodes( node, doc){ pr i ntPropert i es( node, doc) ;

for ( var i = 0; i < node. chi l dNodes. l engt h; ++i ) pri ntNodes( node. chi l dNodes[ i ] , doc ) ;}

function pr i nt Propert i es( node, doc){

var pr oper t i es = [ ' f i r s t Chi l d' , ' l as tChi l d' , ' previ ousSi bl i ng' , ' nextSi bl i ng' ,' nodeName' , ' nodeType' , ' nodeVal ue' , ' t extContent ' ] ;

for ( var i = 0; i < pr opert i es. l engt h; ++i ) doc. wr i te l n( propert i es[ i ] , ' : ' , node[ proper t i es[ i ] ] ) ;}

Una función recursiva que recorre el árbol de nodos del documento e imprime propiedades heredadas de la pseudoclaseNode. Correr este ejemplo con indentación, o sin espacios en blanco.

Además de las propiedades para acceder a nodos relacionados, la pseudoclase Node provee métodos para modificarlos:

Métodos de la pseudoclase Node del XML DOM


Node. appendChi l d(newChi l d)Agrega el nodo newChi l d al final del arreglo chi l dNodes[ ] . El cambio se ve reflejado de

inmediato en el documento cargado en el navegador. Si newChi l d ya forma parte del

documento, será removido de su posición actual y reinsertado en la nueva posición.

Node. i nser t Befor e( newChi l d,r ef erenceChi l d)

Inserta el nodo newChi l d en el arreglo chi l dNodes[] justo antes que el nodo

r eferenceChi l d, el cual obligatoriamente debe existir y ser hijo del nodo al cual se le invocó

este método. Si ref er enceChi l d es nul l , newChi l d se insertará al final. Si newChi l d ya es

parte del documento, será removido de su posición actual y reinsertado en la nueva posición.

Node. r epl aceChi l d(newChi l d,ol dChi l d)

Reemplaza ol dChi l d con newChi l d. Si newChi l d ya es parte del documento, será removido

de su posición actual y reinsertado en la nueva posición. ol dChi l d es separado deldocumento y el cambio se refleja en el navegador. El objeto ol dChi l d no es eliminado de la

memoria, sino que sigue vigente y puede ser reinsertado en el documento posteriormente.

Node. r emoveChi l d( chi l d)Quita al nodo c hi l d del arreglo chi l dNodes[ ] y del documento (el cambio se refleja

visualmente en el navegador). El objeto nodo c hi l d no es eliminado de la memoria, y puede

ser reinsertado en el documento posteriormente.

Node. cl oneNode(r ecur si vel y)

Retorna una copia del nodo al cual este método es invocado. No clona los hijos ydescendientes del nodo a menos que se envíe t rue en el parámetro recurs i vel y. El nodo

retornado no es parte del documento, por lo que debe ser insertado posteriormente si sequiere que sea visible al lector.

Node. i sEqual Node(ot her )Retorna true si el nodo es idéntico al enviado por parámetro, es decir, tienen los mismosvalores para sus propiedades de datos (como el nombre y tipo), y así recursivamente paratodos sus hijos.

Los métodos anteriores permiten mover nodos existentes de un lugar a otro, o clonarlos. El siguiente ejemplo ordena losnodos existentes de una l ista alfabéticamente.

<body>

<h1>Reubi car nodos en el documento</h1><ol i d="sor t abl e_ l i s t ">



<li>Los</li><li>12</li><li>el ementos</li><li>de</li><li>esta</li><li>l i s t a</li><li>serán</li><li>or denados</li><li>al f abét i cament e</li><li>si n contar</li><li>Mayúscul as</li><li><p>I ncl uyendo <strong>est e párr afo</strong>. </p></li>


99 22/09/2015 1



</ol>

<p><button i d="sort_button" onc l i ck="s or t _ l i st ( ) ">Or denar </button></p><script t ype="text / j avascr i pt" ><! - -

function s or t _ l i st ( ){

// Get the parent node whose children will be sorted

var l i st _el ement = document . get El ement ByI d( ' sor ta bl e_ l i s t ' ) ;

// Do not sort list_element.childNodes[] in place to avoid flickering

// Get an array of the elements to be processed and work with this array

var el ements = [ ] ;

// Fill the working array with only the desired nodes to be sorted

for ( var chi l d = l i st _el ement . f i r s t Chi l d; chi l d; chi l d = c hi l d. nextSi bl i ng )if ( chi l d. nodeName. t oLowerCase( ) == ' l i ' ) el ements. push( chi l d) ;

// Function used to sort the array

function sort _el ement s( nodeA, nodeB){

var t ext A = nodeA. t extContent . t oLowerCase( ) ;var t ext B = nodeB. t extContent . t oLowerCase( ) ;return t ext A < textB ? - 1 : t ext A > textB ? 1 : 0;

}

// Sort the elements alphabetically

el ements . sort ( sort _el ement s) ;

// Now elements are sorted in the array, not in the document, reinsert them

// in the desired order. Note, each node will be dettached from its current

// position and reinserted in the desired position automatically

for ( var i = 0; i < el ements. l engt h; ++i ) l i st _el ement . appendChi l d( el ements[ i ] ) ;

}- - ></script>

</body>

Reubicar nodos en el documento. Correr este ejemplo.

Nótese que en el ejemplo anterior se construyó un arreglo temporal (llamado el ement s[ ] ), el cual se llenará únicamente conlos elementos que deben ser ordenados, y luego serán reinsertados en el documento. ¿Por qué no se hizo este cambiodirectamente en l i st_ el ement . chi l dNodes[] ? Hay varias razones. La más importante es porque chi l dNodes[ ] no es

realmente un arreglo, sino un objeto que se comporta como tal definiendo la propiedad l ength y una propiedad con nombrenumérico para cada elemento que se inserte en él. A estos objetos se les llama "objetos que aparentan ser arreglos"(array-like objects), y su propósito es proveer un arreglo controlado, casi de sólo lectura. Por ejemplo, el programador nopuede invocar a l i st_ el ement . chi l dNodes.sort ( ) porque el array-like object no implementa este método.

La segunda razón es que el arreglo l i st _el ement. chi l dNodes[ ] muy probablemente contiene otros hijos que no son de

importancia ordenar, como nodos de texto (surgidos de los espacios en blanco usados para indentar el código fuente) ocomentarios. Por esto, es una práctica común construir un nuevo arreglo escogiendo los nodos que realmente se quierenmodificar, afectar al arreglo y cuando el procesamiento esté listo, actualizar el documento. Esto reduce además undesagradable efecto de parpadeo (flickering) que confunde al lector al ver partes del documento cambiar arbitrariamente.

Cuando se debe crear un nuevo nodo en el documento, no se debe hacer con el operador new, sino utilizar los métodosdocument. cr eateXxx( dat a) de la pseudoclase Document . Por ejemplo, document . cr eat eEl ement( t agName) crea un nodo

elemento con la etiqueta t agName; document . cr eat eText Node(st r i ng) crea un nodo de texto con el string como contenido;

document. cr eateComment ( st r i ng) crea un comentario. Todos ellos crean un nuevo nodo el cual no está asociado al

documento. El programador debe insertarlo posteriormente en la jerarquía de nodos para que sea visible al lector, usandoalguno de los métodos de la pseudoclase Node como appendChi l d() , i nser t Before() o repl aceChi l d() . El siguiente ejemplo

inserta nodos en una lista ordenada.

<body>

<h1>Cr ear e i nsert ar nodos en el documento</h1><p><button onc l i ck=" cr eat e_node( ) ">Agr egar nodo</button></p><ol i d="dynami c_l i st ">

<li>Presi one el botón par a agregarl e el ement os a l a l i st a</li></ol>

<script t ype="text / j avascr i pt" >var counter = 0;function creat e_node( ){

var l i s t _i t em = document . cr eateEl ement( ' l i ' ) ;var t ext _node = document . cr eateTextNode( ' El ement o autogenerado ' + ++counter ) ;

l i s t _ i t e m. appendChi l d( t ext_ node ) ; document . get El ementByI d( ' dynami c_ l i st ' ) . appendChi l d( l i s t _ i t e m) ;

}


99 22/09/2015 1



</script>

</body>

Crear e insertar nodos en el documento. Correr este ejemplo.

Los nodos pueden ser de distinta naturaleza: elementos, atributos, comentarios, texto, etc. La propiedad Node. nodeType

indica el tipo de un nodo particular; es un entero que puede tomar el valor de una de las siguientes constantes:

Tipos de Node del XML DOM

Valor Constante Pseudoclase XML Pseudoclase HTML

1 Node. ELEMENT_NODE El ement HTMLEl ement

2 Node. ATTRI BUTE_NODE At t r

3 Node. TEXT_NODE Text

4 Node. CDATA_ SECTI ON_ NODE Char act er Dat a

5 Node. ENTI TY_REFERENCE_NODE Ent i tyRef erence

6 Node. ENTI TY_NODE Ent i t y

7 Node. PROCESSI NG_I NSTRUCTI ON_NODE - -

8 Node. COMMENT_NODE Comment

9 Node. DOCUMENT_NODE Document

10 Node. DOCUMENT_TYPE_ NODE - -

11 Node. DOCUMENT_FRAGMENT_NODE DocumentFr agment12 Node. NOTATI ON_NODE - -

El siguiente ejemplo muestra una función que recorre recursivamente todos los nodos del documento contando cuántos deellos son elementos:

<ht ml xml ns="ht t p: / / www. w3. org/ 1999/ xht ml "><head>

<t i t l e>Conteo de el ement os</ t i t l e > <scr i pt t ype="t ext / j avascr i pt " >

<!- -function count El ements( node){

var count = 0;if ( node. nodeType == Node. ELEMENT_ NODE )

++count ;for ( var i = 0; i < node. chi l dNodes. l engt h; ++i )

count += count El ements( node. chi l dNodes[ i ] ) ;return count ;

}

function f i l l Count ( ){

document . get El ementByI d( ' count' ) . i nner HTML = count El ements( document ) ;}

- - ></sc r i pt>

</ head>

<body onl oad=" f i l l Count ( ) " ><h1>Conteo de el ement os</ h1>

<p>El <em>númer o de el ement os</ em> present es en est e documento es:<str ong i d="count " ></ strong></ p>

</ body></ ht ml >

Una función recursiva que recorre el árbol de nodos del documento y retorna cuántos de ellos son de tipo elemento. Correreste ejemplo.

Por cada tipo de nodo hay una pseudoclase hija de Node, que aparece en la tercera columna de la tabla anterior. Por

ejemplo, cuando el navegador carga el documento y encuentra un comentario, construye un objeto de la pseudoclaseComment , la cual es hija de Node, y cuando encuentra un párrafo creará un objeto El ement que es también hijo de Node. Esta

jerarquía de pseudoclases se ilustra a continuación.


99 22/09/2015 1



Node

Entity Element CharacterData AttDocument

Text Comment

HTMLDocument HTMLElement

HTMLHeadElement HTMLTitleElement HTMLBodyElement HTMLParagraphElement

XML DOM

HTML DOM

Cada subclase agrega propiedades a la pseudoclase Node. Por ejemplo, la pseudoclase El ement define las siguientes

propiedades útiles:

Propiedades de El ement en el XML DOM


El ement . t agName String con el nombre del elemento, por ejemplo: "body" , "p" , etc.

El ement . at t r i butes[] Accede a los atributos del elemento en el orden en que fueron definidos.

El ement . get At t r i but e( name) Retorna el valor del atributo name como un string, o nul l si el elemento no tiene esteatributo.

El ement . set At t r i but e( name,val ue)

Asigna el string val ue al atributo con nombre name del elemento. Si el atributo no existe, lo

crea.

El ement . r emoveAtt r i but e(name) Elimina el atributo con nombre name del elemento. No produce ningún error si el atributo no

existe.

El ement . get Att r i but eNode( name) Retorna un objeto de tipo Attr que permite por ejemplo saber si el atributo fue definido o se

está usando su valor por defecto.

El ement . i d El valor del atributo i d="val ue" , si fue definido para este elemento.

El ement . cl assName El valor del atributo cl ass="val ue" , si fue definido para este elemento.

El ement . chi l dr en[ ]Un arreglo que contiene únicamente los elementos hijos de este elemento, en lugar de todoslos nodos como ocurre con el arreglo chi l dNodes heredado de Node. Quizá chi l dEl ement shubiese sido un nombre más apropiado.

El ement . chi l dEl ement Count La cantidad de elementos hijos. Equivale a chi l dren. l engt h.

El ement . i nnerHTMLUn string que con el marcado HTML o XML que representa el contenido del elemento. Si seasigna otro string, será "parseado" por el navegador, el resultado reemplazará a los nodoshijos del elemento, y el efecto será inmediatamente visible en el documento.

El ement . outerHTML

Un string que con el marcado HTML o XML que representa el elemento mismo más sucontenido. Si se asigna otro string, será "parseado" por el navegador, el resultadoreemplazará al elemento y sus nodos hijos. El efecto será inmediatamente visible en eldocumento.

El ement . styl e Un objeto CSSStyleDeclaration con los estilos definidos en el documento para este elemento.Se puede modificar dinámicamente. No contiene los estilos computados.

El objeto Attr representa un atributo de un elemento particular, aunque casi nunca se utiliza, ya que el objeto El ement tiene

propiedades y métodos para manipular sus atributos. Quizá su propiedad más útil es Att r . spec i f i ed que permite

determinar si el valor del atributo fue explícitamente escrito en el documento, sino se está tomando el valor por omisión.

Los navegadores realmente implementan dos modelos de objetos del documento (DOM), uno para XML y otro especializadopara HTML. Dado que JavaScript utiliza XML para transferir datos entre el servidor y el cliente, requiere poder manipularestos documentos a través de una jerarquía de objetos. El DOM que se ha presentado hasta el momento se l lama XMLDOM, compuesto de objetos bastante genéricos como lo es también XML.

Sin embargo, el navegador provee un conjunto de pseudoclases especializadas para HTML, que componen lo que se llamaHTML DOM y que heredan de las pseudoclases presentes en el XML DOM. Algunas de estas pseudoclases se presentan enverde en la figura {ver arriba}. El principal distintivo del HTML DOM es que define la pseudoclase HTMLEl ement para todos los

elementos que sólo tienen los atributos comunes (em, span, dt , etc.) y una pseudoclase HTMLXxx El ement para cada elemento

Xxx que tiene atributos propios, como HTMLDocument , body (HTMLBodyEl ement ), p (HTMLPar agr aphEl ement ), ul(HTMLULi st El ement ), etc.

Las pseudoclases HTMLXxxEl ement definen propiedades homónimas a los atributos (X)HTML que son de lectura y escritura.

Por ejemplo HTMLI mageEl ement define el string sr c que puede cambiarse dinámicamente con JavaScript. Los nombres son

homónimos a XHTML, en minúsculas, excepto el atributo cl ass="" que en JavaScript se renombra cl assName debido a que


99 22/09/2015 1



cl ass es una palabra reservada. El tipo de datos de cada atributo es el adecuado, por ejemplo, HTMLI mageEl ement . sr c es un

string, HTMLI mageEl ement . wi dth es un entero y HTMLBodyEl ement . onl oad es una función de JavaScript.

El autor puede utilizar estos atributos definidos por las pseudoclases HTMLXxxEl ement directamente con el operador punto o

el operador corchetes, si está seguro de que el objeto es del tipo xxx adecuado. También puede emplear los métodosgetAt t r i but e(name) y setAtt r i but eVal ue( name, val ue) heredados de El ement en el XML DOM; que a diferencia de los

atributos de HTMLXxxEl ement , sólo retornan y reciben valores string.

5.6.3.2 Localizar elementos en el documento

De todos los tipos de nodos el elemento es incuestionablemente el más importante para el autor, tanto que el objetoDocument del XML DOM y HTMLDocument del HTML DOM, proveen varios métodos útiles para localizar elementos por algún

criterio. Estos se resumen en la siguiente tabla.

Métodos de HTMLDoc ument para localizar elementos

Método Descripción

document . getEl ementByI d(i d)Localiza el único elemento que tiene el identificador i d en su atributo

homónimo. Retorna el objeto HTMLEl ement que tiene este identificador o

nul l si ningún elemento en el documento está identificado con el string i d.

document . get El ement sByTagName( t agName)

Selecciona todos los elementos en el documento que fueron creados con laetiqueta t agName, y los retorna en un arreglo que tiene el mismo orden en

que aparecen en el documento. Por ejemplo,

document . get El ementsByTagName( ' t abl e' ) retorna un arreglo con todaslas tablas del documento. La búsqueda se hace sin importar mayúsculas yminúsculas por compatibilidad con HTML, y si se envía un asterisco ' * ' en

t agName retorna todos los elementos del documento.

document . getEl ementsByCl assName( cl assVal ue)

El atributo cl ass="c1 c2 . . . cN" indica que el elemento pertenece a una o

más clases separadas por espacios (y no por comas). Una clase es unaagrupación de elementos que comparten características comunes; porejemplo, una clase ej er c i c i o podría usarse para distinguir todos los párrafos

que representen ejercicios en un libro (<p cl ass="ej erci ci o">. . . </ p>) y

aplicarles estilos diferenciados. En JavaScript se puede tener un arreglo contodos los elementos del documento que pertenecen a una o a varias clasescon el método document . getEl ementsByCl assName( ) , que recibe un string

con la lista de clases separadas por espacios sin importar el orden.

document. querySel ect orAl l ( sel ect or )

CSS tiene una notación estándar para seleccionar elementos a los cualesaplicarles reglas de estilo; por ejemplo, el selector ". ej empl o" recupera

todos los elementos que tienen el atributo cl ass="ej empl o" y " #cap01a[r el =' external ' ] " selecciona a todos los enlaces que tienen el atributo

<a r el ="ext ernal "> y que son descendientes del elemento identificado con

i d="cap01" . En JavaScript el métododocument. querySel ectorAl l ( sel ect or ) retorna un arreglo con todos los

elementos que satisfacen el selector enviado por parámetro.

document . querySel ector ( sel ect or)Hace lo mismo que querySel ect orAl l () , pero sólo regresa el primer

elemento que satisface el sel ect or en lugar de una lista de elementos.

document . get El ement ByName( name)

El atributo name sirve para identificar varios objetos relacionados,especialmente una familia de botones de radio (radio buttons). Ya que varioselementos pueden tener el mismo nombre, este método retorna un arreglo deelementos que comparten dicho nombre.

La pseudoclase El ement también define los métodos El ement . get El ementsByTagName( t agName) y

El ement. get El ementsByCl assName( cl assVal ue), que hacen lo mismo que sus contrapartes de Document , con la diferencia deque en lugar de buscar en todo el documento, buscan únicamente en el subárbol del elemento al cual el método esinvocado.

Por conveniencia la pseudoclase HTMLDocument define las propiedades document . head, document . body ydocument . document El ement , que hacen referencia a sus respectivos elementos, como es de esperar:

document . head == document . get El ement sByTagName( ' head' ) [ 0] ;document . body == document . get El ement sByTagName( ' body' ) [ 0] ;document . document El ement == document . get El ement sByTagName( ' ht ml ' ) [ 0] ;

5.6.3.3 Manejo de eventos

El manejo de eventos estático consiste en que el autor asocie una función o código JavaScript a un atributo mientras escribeel documento. Por ejemplo:

<body onl oad=" f i xExternal L i nks( ) ; i nser t I ndex( ) ; ">

Esto es una mala práctica, ya que el documento (X)HTML sólo debe especificar contenido y no estilo o comportamiento. Así


99 22/09/2015 1

que la asignación debería hacerse con JavaScript, lo cual es muy simple, por ejemplo:

document . body. onl oad = function( ) { f i xExternal L i nks( ) ; i nser t I ndex( ) ; }

Aunque la asignación anterior se hizo con JavaScript y no en el documento (X)HTML, el esquema anterior tiene variosproblemas. Supóngase que la asignación anterior se hizo por un archi vo1. j s que es parte de una biblioteca 1. Un

programador que estuviese creando una biblioteca 2 en JavaScript que es independiente de la anterior, probablementenecesitará invocar una función suya cuando el documento (X)HTML se ha cargado. En nuestro ejemplo esto implicaría tenerque agregar una tercera función al evento onl oad de body ¿Cómo hacer para agregar esta tercera función y mantener lasotras funciones que pueda ya tener asociadas?. Es deseable disponer de algún mecamismo que diga simplemente "agregueeste manejador al evento onl oad" sin importar cuántos eventos tiene ya asociados. De esto se encarga el método

addEvent Li st ener( ) .

El método el ement . addEventLi st ener( event, f unct i on, phase) hace que la función f uncti on sea invocada cuando el

elemento el ement produce el evento event . El nombre del evento en el primer parámetro es un string sin el prefijo ' on' , porejemplo "mousedown" . El segundo parámetro es una función que debe recibir sólo un parámetro: un objeto de tipo Event y

debe retornar nada. El tercer parámetro es un booleano, con true indica que el evento puede ser atendido por uno de sus

ancestros, mientras que con f a l s e se le da primero oportunidad al elemento antes de que a sus ancestros (el por defecto).

Esto se explicará más adelante. El siguiente ejemplo muestra un archivo . j s que al ser incluido por un documento (X)HTML,

invoca dos funciones cuando éste termina de cargarse.




<title>Eventos del DOM 2</title><script sr c="onl oad_event _dom2. j s" ></script>

</head>

<body>

<h1>Manej o de event os del DOM l evel 2</h1></body>

</html>

// onload_event_dom2.js

function showI nf o( ){ wi ndow. al er t ( ' Esta f unci ón J avaScri pt f ue l l amada si n que el document o hi ci er e' +

' nada especi al , mas que i ncl ui r est e ar chi vo . j s' ) ;}

function addI nfo( ){

var text = ' Est e pár r af o es pr oducto de un segundo manej ador de eventos. ' ;var paragraph = document . cr eateEl ement( ' p' ) ;

paragr aph. appendChi l d( document . cr eat eText Node( text ) ) ; document . body. appendChi l d( par agraph ) ;}

wi ndow. addEvent Li st ener( ' l oad' , showI nfo, false) ;wi ndow. addEvent Li st ener( ' l oad' , addI nfo, false) ;

Un archivo . j s que al ser incluido por un documento, agrega dos manejadores de eventos. Correr este ejemplo.

El método El ement . addEventLi st ener( ) es parte de lo que se conoce como DOM Level 2, el establece que cuando un evento

ocurre en un elemento, éste puede antenderlo o alguno de sus elementos padres, es decir, el evento se propaga por la jerarquía de elementos y puede ser atendido llama en una de las siguientes tres fases:

Capturing phase. El evento recorre desde el documento hasta el elemento esperando ser atendido.

At target phase. El elemento que generó el evento tiene oportunidad de atenderlo.

Bubbling phase. el evento retorna desde el elemento hacia el documento.

El tercer parámetro del método el ement . addEventLi st ener( ) controla la fase en la que será atendido del evento. Si es t rue

se atenderá en la fase de captura, si es f a l s e en la fase objetivo o fase de ascenso (bubbling).

Otra ventaja de usar addEvent Li st ener( ) en lugar de asignar manejadores de eventos directamente a los atributosintrínsecos (DOM Level 0), es que una misma función puede menejar eventos generados en distintos lugares deldocumento. Por ejemplo, si quiere hacer algo cuando el cursor del ratón pase sobre cualquier párrafo del documento, en elDOM Level 0 tendría que recorrer todos los elementos p y asignarles la función manejadora; mientras que en el DOM Level

2, simplemente registra la función en el elemento document . body con addEvent Li st ener( ) .

Tanto en DOM Level 0 como DOM Level 1, la función que se asigna al atributo intrínseco o que se pasa en el segundoparámetro de el ement . addEvent Li st ener( ) se convierte en una propiedad del elemento al cual se hizo la asignación o

invocación. Es decir, esa función se convierte en un método del elemento. Cuando éste se invoca por el navegador, se harácomo una invocación a un método normal del elemento, así la palabra reservada t hi s hará referencia a dicho elemento, por

lo que se puede usar dentro del código del manejador. El siguiente ejemplo muestra una mínima implementación de un juego de estallar una bolsa de burbujas. Nótese cómo la función popBubbl e es asignada a cada imagen de burbuja al evento

oncl i ck, lo que la convierte en un método, el cual util iza el parámetro t h i s para cambiar el origen de la imagen presionada

por una burbuja estallada.


99 22/09/2015 1




<title>Est al l ar bur buj as</title><style type="text/css" >

body { margi n: 2cm; }#wrap { width: 600px; height: 216px; margin: 0 auto; border: 5px solid #64859e;

background: #a4c5de; position: relative; }

#wrap img { position: absolute; border: 0; }

</style>

<script t ype="text / j avascr i pt" sr c="bubbl e_wr ap_mi n. j s"></script></head>

<body>

<div i d=" wr ap"></div></body></html>

// bubble_wrap_min.js

// Fills the game area with bubble images

function l oadGame( ){

// Get the game area

var wr ap = document . get El ement ByI d( ' wr ap' ) ;

// Assume the bubble image dimensions and area dimensions

var i mgWi dt h = 75;var i mgHei ght = 72;var r ows = 3;var col s = 8;

// Fill the game area creating img elements with onclick attribute set

for ( var i = 0; i < r ows; ++i )

{ for ( var j = 0; j < col s; ++ j ){

// Create the image as a new node

var i mg = document . cr eateEl ement( ' i mg' ) ; i mg. src = ' ai r . j pg' ;

// Position the image, CSS must specify 'position:absolute' for img

i mg. s t yl e. t op = ( i * i mgHei ght ) + ' px' ; i mg. s t yl e. l e f t = ( j * i mgWi dt h) + ' px' ;

// When user clicks this image, replace it for a popped image

i mg. oncl i ck = popBubbl e;

// Insert the new image as child of the game area

wr ap. appendChi l d( i mg) ;}

}}

// Called when a image is clicked function popBubbl e( ){

// Replace the current image for a popped one

this. src = ' pop. j pg' ;

// This image cannot be popped again

this. oncl i ck = null;

// Play an auditive feedback

var snd = new Audio( ' pop. mp3' ) ; snd. pl ay( ) ;}

// Initializes the game when the document is loaded

wi ndow. addEvent Li st ener( ' l oad' , l oadGame, false) ;

Un ejemplo del juego de estallar una bolsa de burbujas. Correr este ejemplo: versión minimalista, o juego completo.

La función que se envía en el segundo parámetro de el ement . addEvent Li st ener( ) recibe un objeto Event por parámetro. Enel ejemplo del juego de la bolsa de burbujas, el método popBubbl e( ) ignora este parámetro. El objeto Event tiene varias

propiedades útiles, entre las que sobresalen curr ent Tar get que es una referencia al objeto que generó el evento

(equivalente a t hi s); el método st opPropagat i on( ) que al ser invocado evita que otros nodos sigan procesando el evento; y

pr event Defaul t ( ) que cancela el efecto que tendría normalmente el evento en el navegador, como por ejemplo seguir un

enlace si el elemento fuera un hipervínculo. En algunos eventos el navegador envía un objeto MouseEvent que contieneinformación sobre el puntero del ratón, como su posición (c l i entX, c l i entY), el botón usado (but t on), si hubo teclas

modificadoras presionadas en el teclado y otros.


99 22/09/2015 1



6 El servidor web

Un servidor web es un programa que responde peticiones HTTP en algún puerto TCP, normalmente el 80. Existe en laactualidad varias implementaciones populares, entre las que sobresalen Apache HTTP Server, Microsoft Internet InformationServices (IIS), y nginx. Este laboratorio pretende que el estudiante instale, configure y utilice uno de estos servidores paraconstruir un pequeño sitio web dinámico utilizando FastCGI. En este texto se utilizará nginx.

6.1 Instalación y ejecución del servidor web

La instalación de un servidor web es un proceso muy dependiente de la implementación escogida y de las necesidades delautor. En el caso de los servidores web libres, el método ideal es obtener el código fuente, instalarlar sus pre-requisitos,configurarlo, compilarlo, e instalarlo. Este procedimiento tipicamente se documenta con detalle en el sitio del servidor web.Por otra parte, tanto los servidores web libres como propietarios distribuyen binarios que son relativamente fáciles deinstalar, pero los módulos que traen son los escogidos por quien generó el ejecutable.

Una vez instalado el servidor web es necesario ponerlo en marcha. En el caso de nginx basta con invocar su ejecutable. Elusuario notará que al hacerlo el programa termina inmediatamente dando la sensación de que nada ocurrió, sin embargo,nginx habrá iniciado al menos dos procesos homónimos en segundo plano (background), los cuales estarán esperandosolicitudes HTTP en el puerto 80. Esto se puede probar con un navegador que acceda a la dirección http://localhost.


99 22/09/2015 1



Desde el punto de vista de la interacción con el usuario hay dos tipos de programas. Los programas en primer plano(foreground) cuando son ejecutados mantienen un diálogo con el usuario. La mayoría de personas creen que todos losprogramas son así. Sin embargo, en ese mismo instante el sistema operativo estará ejecutando un número, probablementemayor, de programas en segundo plano (background) que no esperan una interacción directa con el usuario, como porejemplo, el núcleo del sistema operativo, servicios de acceso a la red, demonios que ejecutan tareas programadas,servidores de correo, FTP, etc. El servidor web cabe en esta segunda categoría.

Cuando nginx es ejecutado arranca al menos dos procesos. El primero se llama nginx master process y debe ser

ejecutado con permisos de administración, ya que por política de Unix, sólo procesos iniciados por el superusuario puedenabrir sockets en cualquier puerto, mientras que los iniciados por usuarios normales, sólo pueden escuchar en puertossuperiores a 1024. El segundo y demás procesos reciben el nombre de nginx working processes, son procesos iniciadospor nginx a nombre de un usuario cualquiera (especificado en la configuración de nginx) que atienden un cliente web encualquier otro puerto, con el fin de liberar el puerto 80 para que esté disponible y poder aceptar más conexiones.

Si se invoca el ejecutable de ngi nx sin parámetros, tratará de iniciar el servidor web. Si se invoca por segunda vez sin

parámetros, fallará ya que el puerto 80 estará en uso. Si se invoca con el parámetro ngi nx - h brindará ayuda. La opción

ngi nx - V permite ver la versión y los módulos con que fue compilado el ejecutable. La opción ngi nx - s sirve para controlar

al servidor en ejecución. Otras opciones se discutirán más adelante.

6.2 Configuración del servidor web

Una vez instalado el servidor web, el autor querrá configurarlo para hacer funcionar su sitio. Tareas como indicarle alservidor web dónde están los documentos que conforman el sitio, si debe o no habilitar PHP, y cuánto es el número máximode conexiones (visitantes) que debe permitir simultáneamente, son las que se establecen en la configuración.

La mayoría de servidores web se configuran con directivas en archivos de texto. Desdichadamente cada uno tiene suspropias convenciones, en lugar de existir un estándar. En el caso de nginx, el archivo principal de configuración se l lamangi nx. conf y su ubicación depende de los parámetros con que se compiló el código fuente, o de las convenciones de la

distribución de Linux. Por ejemplo, en Ubuntu puede ubicarse bajo la carpeta / etc/ ngi nx/ . La nomenclatura de las directivas

de configuración de nginx puede visualizarse con el siguiente pseudocódigo:

# Est o es un comentar i onombre_directiva val ores;

# Un modul o se conf i gur a con un bl oque de di r ect i vasnombre_modulo{

directiva2 val or;directiva3 val or1 val or2;

# . . .}

Las directivas constan de un término que significa alguna característica para nginx, seguido por uno o más valores. Eltérmino y los valores se separan por espacios en blanco. Como es de esperar, nginx está dividido en muchos módulos: core,webdav, fastcgi, mail, etc., y cada uno tiene directivas para configurarlos. Las directivas de cada módulo se escriben en elarchivo de configuración agrupadas dentro de llaves { }, lo que forma un bloque de directivas (directive block), y son

precedidos por el nombre del módulo. Esta práctica mantiene el orden e incrementa la legibilidad. El siguiente listadomuestra un fragmento de un archivo de configuración de nginx.

user www- dat a;1.worker_processes 4;2. pid / var/ r un/ ngi nx. pi d;3.

4.events5.{6.

worker_connections 768;7.# multi_accept on;8.

}9.10.

http11.{12.

# Basic settings13.include / et c/ ngi nx/ mi me. t ypes;14.default_type appl i cat i on/ oct et - stream;15.

16.# Logs17.access_log / var/ l og/ ngi nx/ access. l og;18.


99 22/09/2015 1



error_log " / var / l og/ ngi nx/er r or . l og" ;19.20.

# Virtual host configs21.include / et c/ ngi nx/ conf . d/*.conf;22.include /etc/nginx/sites-enabled/*;23.

}24.

Del listado anterior se puede leer lo siguiente. La directiva en la l ínea 7 sólo afecta al módulo de eventos (Events Module)de nginx. Las directivas que no están dentro de llaves (líneas 1 a 3) se dice que están en el bloque principal (main block) ytienen un efecto global en el servidor web. Algunas directivas esperan valores numéricos como worker_ processes en la línea

2, otras cadenas de caracteres como access_l og y err or_ l og en las líneas 18 y 19. Las cadenas se pueden escribir

literalmente, pero si tienen espacios en blanco, puntos y comas, u otros caracteres especiales, deberán encerrarse entre

comillas dobles o simples.

Los módulos de nginx son opcionales, es decir, se pueden instalar o no, y si están instalados se pueden habilitar o no; aexcepción de tres módulos: Cor e modul e, Event s modul e y Conf i gur ati on modul e, los cuales siempre están instalados y

siempre habilitados, ya que proveen la funcionalidad mínima de nginx.

6.2.1 La directiva include

Una instalación de un servidor web puede utilizarse para uno o más sitios web. No es aconsejable que la configuración detodos esos sitios se haga en el mismo archivo, puesto que se hará voluminoso y difícil de mantener. En su lugar, serecomienda distribuir la configuración en varios archivos que contengan directivas coherentes, al menos un archivo por cadasitio web que deba servir la instalación de nginx.

La directiva i ncl ude recibe un nombre de un archivo (el cual debe existir) y le indica a nginx que debe insertar el contenidode dicho archivo en el lugar de la directiva i ncl ude. La línea 14 del listado anterior muestra un ejemplo. El nombre del

archivo puede ser un patrón con los caracteres comodines * y ? (filename globbing), que indica a nginx incluir, no unarchivo, sino todos aquellos que cumplan el patrón. Por ejemplo, la línea 22 del l istado anterior indica a nginx importar enese lugar todos los archivos que terminan en *. conf que se encuentran en la carpeta / et c/ngi nx/conf . d/ .

6.2.2 El módulo HTTP Core

El módulo HTTP de nginx es opcional, por lo que puede deshabilitarse, sin embargo, es quizá el más requerido por el autor yel que querrá configurar primero para hacer funcionar su sitio web. Es también el módulo más extenso de nginx y suconfiguración se hace con tres bloques: http, server y l ocat i on. Tómese el siguiente ejemplo:

http1.{2.

gzip on;3.4.

server5.{6.

server_name mi empr esa. com www. mi empr esa. com;7.listen 80;8.root / home/ s i t es/ mi empr esa. com;9.

10.location / downl oad/11.{12.

gzi p off ;13.}14.

}15.16.

server17.{18.

server_name portal . mi empr esa. com;19.root / home/ s i t es/ por t al . mi empresa. com;20.index i ndex. php i ndex. ht ml ;21.

}22.23.

server24.{25.

server_name svn. mi empr esa. com;26.root / home/ svn;27.

}28.}29.

Las directivas que se escriban directamente en el bloque ht t p { . . . } afectan a todo el módulo HTTP, como la línea 3 dellistado anterior, que indica a nginx comprimir los recursos antes de enviarlos al cliente.

6.2.2.1 Servidores virtuales

Un servidor web puede alojar uno o varios sitios web, los cuales se acceden con diferentes dominios. Por ejemplo, unamisma instalación de nginx podría servir la página pública de la empresa (www. mi empr esa. com), un sitio para empleados,clientes y proveedores de la empresa (por t al . empr esa. com), y un sitio con repositorios de Subversion (svn. mi empresa. com).

Es deseable poder configurar cada uno de esos sitios independiente de los demás. Por ejemplo, cada uno debe tener undiferente directorio físico donde se encuentran sus recursos, para los dos primeros podría ser importante tener PHP


99 22/09/2015 1



habilitado, mientras que para el segundo el módulo WebDAV, y así por el estilo.

nginx, y en general todos los servidores web, representan cada sitio web como un servidor virtual, es decir, como unpequeño servidor web que corre bajo el auspicio del servidor web real, con su propia configuración independiente de losdemás servidores virtuales. Si sólo se quiere montar un único sitio web en un servidor web, lo normal es crear un servidorvirtual para dicho sitio, con el bloque de directivas server { . . . } dentro del bloque ht t p { . . . }.

El listado anterior define tres servidores virtuales y por ende tres sitios web. La directiva l i s t e n le indica a nginx en cuál

puerto TCP, o dirección IP, espera conexiones para ese sitio web, de esta forma se puede tener dos sitios web con igualdominio pero diferenciados por el puerto. Si se omite, se asume el puerto 80.

La directiva ser ver _name hace que el servidor virtual responda a uno o más nombres de dominio. Cuando nginx recibe un

mensaje de solicitud, revisa el atributo Host : en el encabezado HTTP, y compara su valor contra todos los servidoresvirtuales para determinar cuál debe responder. En nuestro ejemplo, si nginx recibe el siguiente mensaje HTTP (recuerde quelos cambios de línea son importantes):

GET / l ogi n. php?r emember _us er =yes1.Host: portal . mi empr esa. com: 802.User- Agent: Opera/ 11. 01 ( i OS)3.

4.5.

no podrá utilizar el puerto o la dirección IP como criterio para seleccionar el servidor virtual, pero sí el dominio. En estecaso, sólo el segundo servidor virtual atiende el dominio por t al . mi empr esa. comen el puerto 80, por lo que nginx cargará el

recurso / home/ si t es/ por t al . mi empresa. com/ l ogi n. php?remember _user =yes y lo retornará en un mensaje de respuesta HTTP.

La directiva ser ver _name acepta comodines, por lo que un servidor virtual podría antender todos los dominios que terminenen o tengan una cadena particular, como:

server_name *. mi empr esa. com; # or

server_name *mi empr esa. *; # or

server_name *mi empr esa*;

La directiva root le indica a nginx dónde se encuentran físicamente los recursos que deben ser servidos a través de un

servidor virtual. Es seguido por una ruta, normalmente absoluta, de lo contrario se tomará como relativa al directorio dondeestá instalado nginx.

La directiva i ndex le indica a nginx cuál recurso o archivo escoger para retornar al cliente cuando se solicita un directorio. Si

se especifican varios archivos, se retornará el primero que se encuentre. A este recurso se le suele llamar index page. Porejemplo, si el servidor web recibe la siguiente solicitud HTTP

GET / admi n/1.Host: portal . mi empr esa. com: 802.User- Agent: Opera/ 11. 01 ( i OS)3.

4.5.

nginx intentará encontrar el archivo / home/ si t es/ por t al . mi empresa. com/ admi n/ i ndex. php, si no lo encuentra, intentará con

/ home/ si t es/ por t al . mi empresa. com/ admi n/i ndex. html , y si tampoco existe, responderá con un código de estado de error,posiblemente 404 NOT FOUND. Si en un servidor virtual no se especifica la directiva i ndex, se asumirá i ndex. html .

6.2.2.2 El bloque location

A veces dentro de un servidor virtual, es deseable aplicar una configuración diferente a ciertos recursos del sitio. Losbloques l ocati on patt ern { . . . } permiten escoger un subconjunto de recursos que coincidan con el patrón pattern y

aplicarles la configuración que aparece dentro de llaves. El patrón es sensitivo a mayúsculas/minúsculas si el sistema dearchivos del sistema operativo lo es también.

6.2.2.3 MIME types

Cuando el cliente solicita un recurso, el servidor web lo localiza o genera, y debe retornarlo en un mensaje de respuesta

HTTP, en el cual debe indicarle al cliente de qué tipo de datos es dicho recurso para que lo pueda interpretaradecuadamente, utilizando una notación estándar llamada extensiones multipropósito de correo de internet (MIME,Multipurpose Internet Mail Extensions), ideadas para el intercambio de archivos por Internet. Por ejemplo, t ext/ html indica

un documento HTML, i mage/ png una imagen codificada con el formato PNG, y appl i cati on/ xht ml +xml un documento XHTML.

Póngase en los zapatos del servidor web. Dado un archivo que debe retornar al cliente ¿cómo sabe cuál tipo MIME asignarleen el mensaje de respuesta? nginx se guía por la extensión del archivo, y si no la tiene, asume un tipo MIME por defecto.nginx le permite configurar las asociaciones entre extensiones y los tipos MIME utilizando el bloque types { . . . }, como en

el siguiente ejemplo:

http{

types{

t ext / html html ht m sht ml ; t ext / css css;


99 22/09/2015 1

t ext / xml xml r ss ; appl i cat i on/ xht ml +xml xht ml ; appl i cat i on/ x- j avascr i pt j s; i mage/ gi f gi f ; i mage/ j peg j peg j pg;

# ...

}

default_type appl i cat i on/ octet - stream;}

La directiva def aul t _t ype le indica a nginx cuál MIME type asumir cuando la extensión no se encuentra en el bloque types {. . . } o cuando el recurso simplemente no tiene extensión.

6.2.3 Server Side Includes module

nginx -y en general todos los servidores web- pueden extender su funcionalidad con módulos, escritos por el equipo oficial,terceros, o incluso usted. En esta y siguientes secciones se explorarán algunos de ellos.

El módulo Server Side Includes (SSI) le indica al servidor web que antes de servir un recurso al cliente, analice (parse)dicho recurso en búsqueda de comandos para el servidor web, los cuales tienen la notación:



Por ejemplo, al servir el siguiente documento

<html>

<head>

<title>Mi empresa</title></head>

<body><div i d=" whol e">





<div i d="content" ><p>Bi enveni dos al . . . </p>

</div>

</div>

</body>

</html>

el servidor web localizará todos los comentarios que inicien con <- - # y tratará de ejecutar el comando que sigue. El

comando i ncl ude le indica al servidor cargar el archivo que se encuentra en el atributo f i l e=" ur l " , o si es un programa,ejecutarlo. El contenido del archivo o el resultado del programa será insertado en el documento servido, reemplazando elcomando dentro del comentario.

El autor que quiera utili zar Server Side Includes, deberá habilitar el módulo ss i en la configuración de nginx, e indicarle en

cuáles tipos de recursos (MIME types) quiere que el servidor procese esos comandos, de lo contrario se asumirán sólo lost ext/ html . Por ejemplo:


99 22/09/2015 1



server

{server_name mi empr esa. com www. mi empr esa. com;root / home/ s i tes/ mi empr esa. com;

ssi on;ssi_types text / ht ml appl i cati on/ xht ml +xml appl i cat i on/ x- j avascr i pt ;

}

Aunque SSI es muy eficiente y se puede habilitar para todo un sitio web, es mejor evitarlo para archivos que no lorequieren. Una práctica común es nombrar los archivos que tienen Server Side Includes con la extensión . sht ml

(contracción de server html ), y habilitar el módulo ss i sólo para ellos, por ejemplo:

server{

server_name mi empr esa. com www. mi empr esa. com;root / home/ s i tes/ mi empr esa. com;index i ndex. shtml i ndex. php i ndex. ht ml ;

# Habilita Server Side Includes en todos los archivos con extensión .shtml

location ~* \ . sht ml ${

ssi on;}

}

6.2.4 CGI y FastCGI

La publicación de páginas web estáticas se está convirtiendo en una práctica en desuso. La mayoría de sitios web pretendenhacer tan efectiva la comunicación con el lector para que éste se sienta a gusto y ambas partes se beneficien. En estemovimiento no basta sólo con programación del lado del cliente con JavaScript, el servidor web también debe ajustarse a lasnecesidades del visitante y hacer que las páginas que sirva sean dinámicas. Es decir, la fuente de los recursos con los queresponde el servidor web no son archivos estáticos, sino el resultado de ejecutar programas de aplicación escritos encualquier lenguaje de programación. Es evidente entonces que debe existir un conjunto de convenciones que permitan auna aplicación cualquiera -ocupada de la lógica del negocio- comunicarse con un servidor web cualquiera -ocupado de losasuntos de red-, para que así ambos colaboren y respondan al visitante adecuadamente. Este conjunto de convenciones lasestablece el estándar Common Gateway Interface (CGI) surgido en 1993.

Cuando el usuario solicita un recurso, el servidor web sabe -de acuerdo a su configuración- si el recurso es estático o

dinámico. Si es estático lo carga desde la memoria secundaria y retorna una copia al cliente. Si es dinámico, deberáinteractuar con una aplicación y es ahí donde entra en juego CGI. CGI es protocolo que impone la forma en que lainformación se transfiere entre el servidor web y una aplicación cualquiera (llamada gateway application) y se resume en losiguiente. El servidor web ejecuta el programa de aplicación pasándole por parámetro o en la l ínea de entrada un conjuntode variables. La aplicación se carga, realiza su lógica del dominio en función de esas variables, consultando bases de datos ocualquier otro recurso, construye una página web, la imprime en la salida estándar y termina su ejecución. El servidor webcaptura esa salida y la envía al cliente que solicitó el recurso.

El procotolo CGI tiene varios inconvenientes, en especial para sitios web mundialmente concurridos. Por esto a mediados delos 90 se desarrolló el estándar FastCGI, el cual introduce las siguientes diferencias sobre CGI:

CGI ejecuta un proceso de la aplicación por cada solicitud, lo cual puede agotar la memoria del servidor rápidamente,consume procesador iniciando y cerrando procesos, y además los procesos deben implementar complejos mecanismosde intercomunicación si necesitan trabajar en conjunto. FastCGI sólo arranca un proceso de la aplicación al cual le"pasa" todas las solicitudes de uno o más visitantes. La ejecución de la aplicación no es detenida, por lo que se lellama proceso persistente.

1.

En CGI la aplicación y el servidor web deben correr en la misma máquina física, lo cual puede ser indeseable, enespecial si el proceso es pesado y se disponen de más computadoras en la organización. FastCGI impone que elservidor web y la aplicación deben comunicarse a través de TCP/IP, así ambos pueden ejecutarse en computadorasdistintas, incluso, en redes distantes y con sistemas operativos diversos.

2.

De lo anterior se infiere que la aplicación, indeferentemente del lenguaje de programación en que esté hecha (C, C++,Java, PHP, Ruby, etc.), debe implementar un servidor TCP/IP esperando conexiones en algún puerto, configurar nginx paraque cuando se solicita un recurso con una extensión particular o una ruta particular, se contacte la aplicación en dichopuerto TCP. En lo siguiente este proceso se explicará para PHP.

6.2.5 PHP a través de FastCGI

Los programas para PHP no son ejecutables, es decir, no son compilados. Un archivo de texto con extensión . php es

interpretado por el ejecutable de PHP (/ usr/ bi n/ php ó php. exe), de la siguiente forma:


99 22/09/2015 1



php / path/t o/myfi l e.php

Lo anterior claramente no es un servidor TCP/IP esperando conexiones en algún puerto, como exige el protocolo FastCGI. Elproyecto PHP-FPM (PHP FastCGI Process Manager) es una alteración de PHP para Unix que ejecuta un demonionormalmente en el puerto 9000, el cual espera solicitudes de ejecutar un archivo . php particular con sus respectivos

parámetros. nginx puede comunicarse con PHP-FPM a través de FastCGI, lo cual se considera una implementación muyeficiente, ideada para sitios altamente concurridos.

Para instalar PHP-FPM se puede configurar y compilar su código fuente, o utilizar el administrador de paquetes de sudistribución de Linux. Por ejemplo, los siguientes comandos instalan y ponen en ejecución un servidor de PHP-FPM enDebian/Ubuntu:

sudo apt - get i nstal l php5- f pmsudo / etc/ i ni t . d/ php5- f pm start

Ahora debe decirle a nginx que cada vez que un visitante solicita un archivo .php, debe contactar al servidor de PHP através de FastCGI en el puerto 9000, para que lo ejecute, y el resultado que se genere de su invocación, enviarlo alvisitante. Para nuestros efectos, el archivo .php puede estar en cualquier lugar del sitio web, su único distintivo con losdemás archivos del sitio es su extensión .php. La siguiente configuración mínima hace este trabajo. Nota: es probable quelas siguientes líneas ya estén presentes en la configuración por defecto, basta con quitarles los comentarios.

server1.{2.

server_name mi empr esa. com www. mi empr esa. com;3.root / home/ s i t es/ mi empr esa. com;4.index i ndex. php i ndex. ht ml ;5.

6.# Ejecuta todos los archivos con extensión .php antes de enviarlos al cliente7.location ~* \ . php$8.{9.

fastcgi_pass 127. 0. 0. 1: 9000;10.fastcgi_param SCRI PT_FI LENAME $document _r oot $f ast cgi _sc r i pt _name;11.include f astc gi _par ams;12.fastcgi_index i ndex. php;13.

}14.}15.

El bloque l ocat i on anterior le indica a nginx que antes de servir un archivo con extensión . php, debe contactar a través de

FastCGI al programa que está corriendo en el puerto 9000, e indicarle que ejecute el archivo . php. Esto último se indica a

través de parámetros con la directiva f ast cgi _par am NOMBRE_PARAMETRO val or _par amet r o. Por ejemplo, la directiva en la línea

11 le indica a nginx enviar a PHP-FPM la ruta absoluta del archivo . php en el parámetro SCRI PT_F I LENAME. Los valores

iniciados con un símbolo de dólar, como $document_r oot son variables de nginx, las cuales se reemplazan por sus valores

respectivos, en el caso de $document _r oot por el directorio donde están los recursos del sitio web (/ home/ si t es/ mi empresa. comen este ejemplo), y $f astcgi _scr i pt _name por la ruta relativa dentro del sitio del archivo . php solicitado por

el visitante. Otros parámetros son necesarios, el archivo f ast cgi _par ams que trae la instalación de nginx se encarga de ellos

y funciona para la mayoría de sitios.

Para Microsoft Windows no existe una implementación de PHP-FPM, por lo que el desarrollador puede emularlo a través deCygwin, o utilizar algún paquete "todo en uno", como Easy WEMP (acrónimo de Windows, nginx, MySQL y PHP).

7 Programación del servidor web: PHP

Un autor que quiera construir un sitio web dinámico deberá instalar un servidor web (como nginx), configurarlo conFastCGI, escribir un programa (en C, C++, Java, ...) que sea un servidor FastCGI y además se ocupe de la lógica del sitio.Esta tarea puede ser monumental, incluso para un sitio web sencillo. Este fue el sentimiento que tuvo Rasmus Lerdorf en1994 cuando quiso publicar una página web personal con un mínimo grado de dinamismo, como el conteo de visitantes.Lerdorf encontró que sería más natural insertar pequeños trozos de código (scripts) dentro de sus páginas web estáticas.Cada vez que un visitante solicitara una de estas páginas, un intérprete ejecutaría estos scripts antes de responderle alcliente. Lerdorf llamó "Personal Home Page tools" a su intérprete y lo dispuso como software libre, el cual evolucionaría a


99 22/09/2015 1



ser el lenguaje de "scripting" más usado en servidores web del mundo, bajo el nombre recursivo de PHP: HypertextProcessor (PHP).

7.1 El lenguaje de programación PHP

Aunque se pueden escribir programas PHP independientes en línea de comandos o con interfaz gráfica, su uso más difundidoha sido para crear páginas web dinámicas, es decir, aquellas cuyo contenido, apariencia o comportamiento puede cambiarcada vez que un navegador las solicita. Así PHP está diseñado para mezclarse con el contenido de las páginas web. ElListado 7.1 muestra un posible "hola mundo" con PHP.

<?xml ver si on="1. 0" encodi ng="ut f -8" ?>1.<! DOCTYPE html PUBLI C "- / / W3C/ / DTD XHTML 1. 0 St r i ct / / EN"2."htt p:/ / www. w3. org/ TR/ xht ml 1/ DTD/ xht ml 1-st r i ct . dt d">3.

4.<html xml ns="ht t p: / / www. w3. org/ 1999/ xht ml ">5.<head>6.

<title>Hol a mundo PHP</title>7.</head>8.

9.<body>10.

<h1>Hol a mundo en PHP</h1>11.<?php12.

print( " <p>Est e párr af o pr ovi ene de PHP, no del documento XHTML</ p>\ n" ) ;13.?>14.


Listado 7.1. Hola mundo en PHP. Correr este ejemplo.

Al correr el ejemplo del Listado 7.1 ocurre lo siguiente. El servidor web recibe un mensaje solicitando el recurso / path / t o/ hel l o_worl d. php, el cual es un simple archivo de texto. En condiciones normales, el servidor web podría retonarle el

archivo al navegador, el cual no sabría qué hacer con él y le preguntaría al usuario un lugar para guardarlo. Sin embargo, elservidor web está configurado para tratar de forma especial a todos los archivos que terminen con extensión . php. Estaconfiguración indica al servidor web que debe ejecutar los scripts que se encuentran en el archivo . php antes de enviarlo al

navegador.

La configuración del servidor web también le indica cómo encontrar el intérprete de PHP. Así el servidor invoca al intérpretepasándole el archivo / path/ t o/hel l o_worl d. php. El intérprete carga el archivo y lo recorre (parse) buscando scripts de PHP,

los cuales se encuentran únicamente dentro de la etiqueta especial <?php . . . ?>. El intérprete ejecuta este código y

reemplaza la etiqueta especial por la salida que generó su ejecución. Una vez que ha terminado de ejecutar todos los scriptsen el archivo, el resultado regresa al servidor web quien lo despacha al navegador.

El navegador sólo recibe el resultado de ejecutar los scripts, no el código fuente PHP que generó el resultado. El lectorpuede comprobarlo corriendo el ejemplo del Listado 7.1 y revisando en su navegador el código fuente de la página.

Durante muchos años se utilizó un short tag <? . . . ?> en lugar de <?php . . . ?> para escribir el código PHP. El uso del"short tag" debe evitarse a toda costa, ya que genera conflicto con las instrucciones de procesamiento de XML <?xml . . . ?>.

De hecho, si se quiere servir documentos XHTML con scripts de PHP, se debe deshabilitar la directiva shor t _open_t ag en la

configuración del intérprete de PHP (en el archivo php. i ni ). El Listado 7.2 muestra la fecha y hora del servidor web.

<body>1.<h1>Hora y f echa del servi dor </h1>2.<p><?php3.

$f echa = date( ' d \ d\ e F \ d\ e Y' ) ;4.$hor a = date( ' h: i : s a' ) ;5. print( " Hoy es " . $f echa . ". Son l as " . $hora ) ;6.

?></p>7.</body>8.

Listado 7.2. La hora del servidor en PHP. Correr este ejemplo.

El Listado 7.2 muestra otras características de PHP. En el ejemplo del hola mundo ( Listado 7.1) el párrafo se generó dentrodel script de PHP (línea 13), mientras que en el ejemplo de la hora (Listado 7.2) el script se escribió dentro de un elementop. Esto muestra que el autor puede intercalar código PHP y (X)HTML a conveniencia. Algunos programadores prefieren abrir

una única etiqueta <?php . . . ?> y escribir mucho código PHP, otros prefieren escribir código (X)HTML y abrir etiquetas <?php. . . ?> sólo para el mínimo código PHP necesario. El segundo método es quizá ligeramente más eficiente y es la convenciónque se tomará en este texto.


99 22/09/2015 1



Las líneas 4 y 5 del Listado 7.2 invocan una función estándar de PHP: date( ) , la cual retorna un string con la fecha u hora

en el formato que se le indique por parámetro. PHP tiene una rica biblioteca de funciones cuya documentación es quizá unade las mejores que existe en el mundo.

El string resultado de invocar a dat e() en la línea 4 del Listado 7.2 se almacena en la variable $f echa. PHP exige anteponerel símbolo de dólar ($) a un identificador para distinguirlo como una variable, de la misma forma que ocurre en Perl y en

Unix shell scripting, con el objetivo de hacer más eficiente el reconocimiento de las variables a la hora de ejecutar el código.Al igual que en JavaScript, las variables pueden almacenar valores de cualquier tipo de datos, incluso cambiar en el tiempo.Una variable se crea simplemente asignándole un valor.

La línea 6 del Listado 7.2 imprime un texto resultado de concatenar unos strings literales con las variables $f echa y $hor autilizando el operador punto (. ). Esto crea la primera diferencia con JavaScript, que utiliza el operador de suma (+) para la

concatenación. El ejemplo anterior pudo haberse escrito de otra forma muy común:

<body>1.<h1>Hor a y f echa del ser vi dor ( 2)</h1>2.<p><?php3.

$f echa = date( ' d \ d\ e F \ d\ e Y' ) ;4.$hor a = date( ' h: i : s a' ) ;5. print("Hoy es $fecha. Son las $hora");6.

?></p>7.</body>8.

Listado 7.3. La hora del servidor con interpolación de variables. Correr este ejemplo.

El ejemplo del Listado 7.3 sólo cambia la línea 6 del Listado 7.2. En la nueva versión se insertaron las variablesdirectamente en el string. A esto se le llama interpolación de variables o sustitución de variables y el intérprete dePHP lo hace únicamente en las cadenas con comillas dobles (como en "$var" ) y no en cadenas con comillas simples (como

en ' $var ' ). Lo mismo aplica para las secuencias de escape como " \ n" .

El desarrollador web debe tener clara esta diferencia, ya que JavaScript trata de forma idéntica a las cadenas literales concomillas dobles o simples, mientras que PHP hace interpolación de variables y secuencias de escape en una de ellas y no enla otra. El lector podría estar pensando en uti lizar siempre comillas dobles para evitar sorpresas, sin embargo, debe tener

en cuenta que el procesamiento de las cadenas literales con comillas simples es más eficiente que con comillas dobles.

7.1.1 Ambientes de producción y desarrollo

Para escribir un programa en PHP el desarrollador web sigue normalmente la siguiente rutina. Crea un archivo de texto conextensión . php donde escribe su código dentro de etiquetas <?php . . . ?>. Lo guarda en alguna carpeta que forma parte de

su sitio web. Accede al archivo . php a través de un navegador escribiendo su URL. El servidor invoca al intérprete de PHP yenvía el resultado al navegador. El desarrollador puede entonces ver la salida de su programa.

Dependiendo de la configuración de PHP, esta rutina se vuelve en contra del desarrollador o de la empresa cuando elprograma PHP tiene errores. Si la configuración dicta que el intérprete de PHP debe informar los errores en la salidaestándar, éstos aparecerán en el navegador, lo cual ayudará enormemente al desarrollador a depurar sus programas, peropodría hacer visible información sensible de la empresa a los visitantes, o confundirlos arruinando el contenido y diseño delsitio web.

Si la configuración dicta que el intérprete de PHP debe callar los errores (o a lo sumo enviarlos a una bitácora), eldesarrollador difícilmente detectará que los hay, a menos de que el intérprete se niegue a ejecutar el código PHP conerrores y no regrese del todo una respuesta al servidor web, el cual optará por enviar un mensaje de respuesta con uncódigo de estado 500 I nternal server er r or al navegador. Esto es mucho más eficiente y evita que el servidor web exponga

información sensible a los visitantes, aunque estos se molestarán en todo caso.

La solución aconsejada es tener dos ambientes: uno de producción y otro de desarrollo. El ambiente de producción alojael sitio web que atiende a los visitantes, se considera estable y los errores en el código PHP no son reportados al navegador.El ambiente de desarrollo es de uso exclusivo de los desarrolladores, en él los errores y advertencias son reportadas alnavegador. Estas diferencias se configuran en la sección Error handling and logging del archivo php. i ni .

Los ambientes de producción y desarrollo podrían estar en computadoras diferentes, o en la misma bajo servidores virtualesdistintos. Es importante que el sitio web completo se encuentre administrado por algún software de control de versiones,como Subversion o Git, lo cual además facilita el mantenimiento del código entre estos ambientes.


99 22/09/2015 1



Antes de publicar código PHP en el sitio web o en el repositorio de control de versiones, el desarrollador siempre deberíachequear sus programas con el intérprete de PHP, lo cual puede hacerse en la línea de comandos de la siguiente forma:

php / path/t o/ f i l e. php

El desarrollador tampoco podrá verificar un documento . php contra los validadores del Consorcio Web (como Unicorn), perosí su salida. Es decir, que el desarrollador deberá hacer dos verificaciones, la primera es llamar al intérprete de PHP en líneade comandos para verificar que su código PHP sea correcto, y luego la salida que su programa genera debe verificarla contralos estándares del Consorcio Web. Una tercera verificación podría deberse si se tiene código JavaScript, inspeccionando labitácora de errores del navegador.

7.1.2 Generalidades del lenguaje PHP

La sintaxis de PHP se basa en C y Perl; y tiene mucha familiaridad con C++ y Java. Esto implica que los comentarios,condicionales, ciclos y operadores son similares. Este material asume que el lector conoce C y JavaScript, y se concentra enlos aspectos que hacen a PHP distinto a estos lenguajes. Los comentarios en PHP se pueden escribir en cualquiera de lassiguientes tres formas:

// Este es un comentario de una línea con estilo BCPL

# Este es un comentario de una línea con estilo Perl

/* Este comentario

puede abarcar varias

líneas pero no anidarse */

Al igual que JavaScript, PHP diferencia mayúsculas y minúsculas (case sensitive), y la aritmética se hace en punto flotante,es decir, 5 / 2 genera 2. 5 y no 2 como ocure en C. A diferencia de JavaScript, PHP sí permite que un string se expanda

varias líneas, y en tal caso, los espacios en blanco y cambios de línea pasan a formar parte natural del string, por ejemplo:

$t abl e = /* ... */ ;$condi t i on = /* ... */ ;

$query = " SELECT * FROM $tabl e WHERE $condi t i on" ;

equivale a haber escrito el siguiente código en una sola línea, pero que resulta más ilegible:

$query = "\ n\ t SELECT *\ n\t FROM $t abl e\ n\ t WHERE $condi t i on\ n" ;

Al igual que JavaScript, las variables pueden almacenar valores de diferentes tipos de datos a lo largo de la ejecución delscript, y las conversiones de datos se hacen automáticamente de acuerdo al contexto. En PHP el operador de suma (+) se

utiliza sólo para valores numéricos y no hace concatenación, lo cual es responsabilidad del operador punto (. ). Por ejemplo:

<p><?php

# Una variable que almacena un valor numérico

$t el efono = 50628241202;

# Obtiene el cuarto digito (en la posicion 3) conviertiendo el número en un string

# la conversion la hace PHP automaticamente al usar algo en un contexto string

$t i po_te l = subst r ( $tel ef ono, 3, 1) ;

# Comparación de un string con un número: el string se convierte a número

if ( $t i po_te l ! = 8 )echo "No se puede envi ar mensaj es de text o al t el éf ono $t el ef ono. " ;

?></p>

Listado 7.4. Conversión automática de tipos de datos. Correr este ejemplo.

El lector habrá notado que en algunos ejemplos se ha utilizado pri nt y en otros echo para generar la salida que recibirá el

navegador. No son funciones realmente, son constructos del lenguaje y por ende pueden utilizarse con o sin paréntesis. Ladiferencia radica en que pri nt recibe únicamente un parámetro de tipo string y retorna siempre el entero 1; mientras que

echo no tiene un valor de retorno y puede recibir un número arbitrario de parámetros de cualquier tipo separados porcomas, los cuales tratará de convertir a string automáticamente. En general, pri nt ( ) es un constructo del lenguaje utilizado

para simular una función en un contexto donde se requiere una, mientras que echo es un constructo del lenguaje que no

puede utilizarse en el contexto de una función y debe obligatoriamente usarse sin paréntesis si recibe dos o más


99 22/09/2015 1



parámetros. Exceptuando esas extrañas restricciones, en la mayoría de contextos puede utilizarse cualquiera de los dos, y laescogencia la hace el programador de acuerdo a sus gustos personales.

7.1.3 Tipos de datos

Los tipos de datos que PHP soporta son: booleanos, números (enteros y flotantes), strings, arreglos, objetos, recursos(resource) y el valor especial NULL. Son prácticamente los mismos tipos de datos de JavaScript con algunas diferencias. Una

variable no tiene tipo de datos, sino que puede almacenar valores de cualquiera de esos tipos de datos. La funcióngett ype($var) retorna un string que describe el tipo de datos del valor almacenado en la variable $var .

Las variables booleanas (bool ean) sólo admiten los valores t rue y f a l s e, los cuales se pueden escribir en cualquier

combinación de mayúsculas y minúsculas (case-insensitive).

Internamente PHP almacena los números utilizando enteros (i nt ) siempre que sea posible, y cuando el número es muy

grande o tiene decimales, se representa internamente como un número flotante (doubl e). El programador no necesita

preocuparse por estas diferencias. Sin embargo, ambas representaciones tienen limitaciones en cuanto a la capacidad yprecisión, inadecuadas cuando se tiene que hacer cálculos precisos o manejo de dinero. En tales circunstancias elprogramador puede recurrir a alguna extensión matemática de PHP.

Los strings en PHP no son objetos, por tanto, no tienen propiedades ni métodos como l engt h( ) ; sino que deben sermanipulados en forma similar a C: a través de funciones como s t r l e n( s t r ) y substr (s t r , s tar t , l ength) . Sin embargo hay

una diferencia importante, en C los strings son punteros mientras que en PHP son valores y por tanto, los operadores decomparación (==, ===, <, <=, >, >=) y concatenación (. ) trabajan de forma esperada.

En PHP todos los arreglos son realmente arreglos asociativos, también conocidos como mapas (maps), tablas hash odiccionarios; porque almacenan parejas l l ave => val or. Si las llaves no se especifican, se asumen valores enteros

secuenciales. Los arreglos se crean con el constructo arr ay( v1, v2, . . . , vN) que recibe una lista de valores separados por

comas, e inserta esos valores en orden asociándolos con llaves enteras correspondientes a la posición del elemento. Lasllaves también pueden ser strings, y en tal caso se especifican usando la notación key => val ue. Un arreglo que almacene

varias de estas parejas se crea utilizando la notación arr ay( k1 => v1, k2 => v2, . . . , kN => vN) , como se aprecia en el

Listado 7.5. Al igual que los string, los arreglos no son objetos, por lo que su manipulación se hace a través de funcionescomo count ($arr) y sort ($arr) . Este tema se estudiará con más detalle adelante.

<h1>Ar r egl os</h1><pre><?php

// Crear un arreglo secuencial

$days = array( ' domi ngo' , ' l unes' , ' mart es' , ' mi ércol es' , ' j ueves' , ' vi ernes' , ' sabado' ) ;

// Recorrer el arreglo

echo " \ $days == \ n";for ( $i = 0; $i < count ( $days) ; ++$i )

echo ' ' , $i , ' : ' , $days[ $i ] , " \n" ;

// Agregar un elemento al arreglo

echo "\ n\ $days[] = ' desconoci do' \ n" ; $days[ ] = ' desconoci do' ;

// Estudiar el arreglo

echo " \ n\ $days == " ; var _dump( $days) ;?></pre>

<h1>Ar r egl os asoci ati vos</h1><pre><?php

// Crear un arreglo asociativo user => points

$gameRecor ds = array( ' l vargas' => 64900, ' el papi ' => 58831, ' chema' => 9215) ;

// Recorrer el arreglo

echo " \ $gameRecor ds == \ n" ;foreach ( $gameRecor ds as $user => $poi nts )


99 22/09/2015 1



echo ' ' , $user , ' : ' , $poi nts, " puntos\ n" ;

// Agregar un elemento al arreglo

echo "\ n\ $gameRecords[ ' pi nocho' ] = 64901\ n"; $gameRecor ds[ ' pi nocho' ] = 64901;

// Ordernar el arreglo por valores descendenemente

arsort ( $gameRecor ds) ;

// Estudiar el arreglo

echo "\ n\ $gameRecords == " ; var _dump( $gameRecor ds) ;?></pre>

Listado 7.5. Ejemplo de uso de arreglos secuenciales y asociativos en PHP. Correr este ejemplo.

Los objetos de PHP se parecen mucho a los de Java. Un objeto es una instancia de una clase, la cual puede tener herenciay polimorfismo con otras clases. Los objetos se crean con el operador new y sus miembros se acceden con el operador - >.

Este tema se explica más adelante.

El tipo de datos y valor especial nul l sirve para indicar que una variable no tiene valor. Si se trata de hacer referencia a una

variable que no existe, PHP puede o no generar un warning de acuerdo a su configuración, y el valor de reemplazo de lavariable no existente es nul l , el cual se puede escribir en cualquier combinación de mayúsculas y minúsculas.

Cuando se utiliza un valor de un tipo de datos en un contexto donde se espera otro, PHP trata de hacer conversionesautomáticamente; lo cual funciona bien en la mayoría de casos para los valores primitivos. El programador puede forzar laconversión de datos utilizando explicit type cast , anteponiendo el tipo de datos entre paréntesis a la expresión que se quiereconvertir, como en el ejemplo del Listado 7.6.

$num = 5 / 2;echo " 5 / 2 == $num\ n"; // prints 2.5

$num = ( int) ( 5 / 2) ;echo "( i nt ) ( 5 / 2) == $num\ n" ; // prints 2

Listado 7.6. Conversión explícita de datos en PHP. Correr este ejemplo.

7.1.4 Operadores

El programador puede escribir los mismos operadores que usa en C o JavaScript sin cambios en PHP. Las diferencias sonmínimas, como las que se exponen a continuación.

El operador de concatenación en PHP es el punto (. ), así el operador de suma (+) pretende sólo recibir operandos

numéricos, de lo contrario, tratará de convertirlos a números.

Al igual que en JavaScript, el operador de igualdad == indica si dos valores son el mismo aún después de hacer

conversiones, así la expresión " +12. 3" == 12. 30 se evaluará como verdadera. El operador de identidad === se evalúa

verdadero sólo si sus operandos son iguales sin hacer conversiones.

Los operadores lógicos clásicos && y | | trabajan de la misma forma que en otros lenguajes de programación. Sin embargo,

PHP introduce los operadores lógicos nombrados and y or (que también pueden escribirse en mayúsculas: AND y OR), que

tienen una prioridad menor, por lo que pueden causar conflictos si se combinan operadores clásicos con los nombrados enuna misma expresión. Se aconseja al programador utilizar sólo los operadores clásicos a menos de que se entienda bien elefecto del operador nombrado.

7.1.5 Control de flujo

Los condicionales en PHP se indican con tres cláusulas: i f / el s e/ el s ei f , ?: y swi tch. La cláusula el se i f se puede escribircon el espacio o sin él (el sei f ); su efecto es el mismo en ambos casos, como se aprecia en el Listado 7.7.

<body>

<h1>Lógi ca de par es</h1>

<p> <?php $promedi o = rand( ) % 100;

echo "Pr omedi o = $pr omedi o: " ;if ( $promedi o < 30 )

echo ' Vuel va a expl i car' ;el sei f ( $promedi o < 70 )

echo ' Di scusi ón de par es' ;else

echo ' Pase al si gui ent e tema' ;?>

</p>

</body>

Listado 7.7. La cláusula else i f se puede escribir con o sin el espacio en PHP. Correr este e jemplo.

Los ciclos en PHP se realizan con las mismas cláusulas de C: whi l e, do-whi l e y f or , las cuales mantienen la misma sintaxis.

PHP agrega una estructura de control más: f oreach, la cual sirve para iterar arreglos y objetos, como se verá más adelante


99 22/09/2015 1



en sus respectivas secciones.

7.1.6 Arreglos

En PHP los arreglos son contenedores asociativos, es decir, son contenedores de parejas key => val ue, donde las llaves (key)

pueden ser números o strings, y si se omiten, PHP asume valores enteros. Un arreglo se crea simplemente asignándolevalores a sus elementos o con el constructo array( ) . Para crear una pareja key => val ue y agregarla al arreglo, se emplea

la siguiente notación:

$ar r [ key] = val ue;

Si se asigna un valor a una llave que ya existe dentro del arreglo, no se inserta de nuevo, si no que se reemplaza su valoranterior. Si se omite la llave en la asignación, PHP busca el último entero asociado en el arreglo y asigna el subsecuente alvalor. Esto se ilustra en el Listado 7.8.

// Crea un arreglo asignándole un valor

$not as[ ' l ui s' ] = 9. 5;echo "\ n\ $not as[ ' l ui s ' ] = 9. 5; \ n\ $notas = " ; pr i nt_ r ( $notas) ;

// Crea otra asociación (key,value) y la agrega al arreglo

$not as[ ' ana' ] = 10. 0;echo "\ n\ $notas[ ' ana' ] = 10. 0; \ n\ $notas = " ; pr i nt_ r ( $notas) ;

// Llave 'luis' ya existe en arreglo, actualiza valor

$not as[ ' l ui s' ] = 6. 5;echo "\ n\ $not as[ ' l ui s ' ] = 6. 5; \ n\ $notas = " ; pr i nt_ r ( $notas) ;

// Asocia un valor a la mayor clave numérica libre en el arreglo

$not as[ ] = ' ana' ;echo "\ n\ $notas[ ] = ' ana' ; \ n\ $not as = " ; pr i nt_ r ( $not as) ;

// Asocia la posición numérica dada con el valor

$not as[ 3] = ' di ana' ;echo "\ n\ $notas[ 3] = ' di ana' ; \ n\$not as = " ; pr i nt_ r ( $not as) ;

// Asocia en la posición 1 ó 4?

$not as[ ] = ' f i ona' ;echo "\ n\ $not as[] = ' f i ona' ; \ n\ $notas = " ; pr i nt_ r ( $not as) ;

Listado 7.8. Insertar y actualizar elementos en un arreglo utilizando el operador corchetes y asignación. Correr este ejemplo.

La segunda forma de crear un arreglo es utilizando el constructo arr ay(k1 => v1, k2 => v2, . . . , kN => vN) , que recibe lasparejas llave=valor utili zando la notación key => val ue que asemeja una asignación, pero en lugar de ser una asignación

directa indica actualizar el valor del índice o llave key. En el constructo array() , si una llave se omite, se asume el próximo

índice que sigue al último entero uti lizado. El resultado final del Listado 7.8 se podría escribir utilizando array() como se

aprecia en el Listado 7.9.

// Crea un arreglo utilizando el constructo array()

$not as = array( ' l ui s' => 6. 5, ' ana' => 10. 0, ' ana' , 3 => ' di ana' , ' f i ona' ) ;echo "\ n\ $notas = " ; pr i nt_ r ( $not as) ;

// Se puede asociar nuevos elementos a un arreglo creado con array()

echo "\ nAgregando not as para di ana y f i ona: " ;$not as[ ' di ana' ] = 8. 5;$not as[ ' f i ona' ] = 5. 0;

// Imprime todos los elementos del arreglo utilizando el ciclo foreach

foreach( $notas as $key => $val ue) echo "\ n $key: $val ue" ;

// Calcula el promedio de la clase

$sum = 0. 0;$count = 0;foreach( $notas as $key => $val ue){

if ( gett ype( $val ue) == ' doubl e' )

{ $sum += $val ue;++$count ;

}}pr i nt f ( "\ n\ nEl promedi o de l os $count al umnos es %. 2f " , $sum / $count ) ;

Listado 7.9. Crear un arreglo utilizando el constructo array() y recorrerlo con el ciclo f oreach- as. Correr este ejemplo.

PHP provee el ciclo f or each- as, el cual recorre un arreglo por cada una de sus parejas key => val ue y permite alprogramador hacer algo con ellas en cada iteración del ciclo. El orden de recorrido es el mismo en que se encuentran loselementos en el arreglo, y puede alterarse con funciones de ordenamiento.

Las llaves en un arreglo asociativo sólo pueden ser enteras o string, pero el valor puede ser de cualquier tipo de datos,incluso otro arreglo. Esto permite representar matrices o arreglos de más dimensiones.


99 22/09/2015 1



7.1.7 Funciones

Las funciones en PHP se declaran con la palabra reservada f uncti on seguido por la lista de parámetros entre paréntesis, dela misma forma que se hace en JavaScript. El Listado 7.10 ilustra la función f a ctor i al ( ) y su uso para imprimir los primeros

19 factoriales.

<body>1.<h1>Factor i al es</h1>2.<ul>3.<?php4.

# Retorna el factorial de $n5.function f actor i al ( $n)6.{7.

return $n > 0 ? $n * f actor i al ( $n - 1) : 1;8.}9.

10.// Imprime los primeros 20 factoriales incluyendo el 011.for ( $i = 0; $i < 20; ++$i )12.

echo "<l i >$i ! = " , f actor i al ( $i ) , "</ l i >\ n" ;13.?>14.</ul>15.

</body>16.

Listado 7.10. Números factoriales con una función recursiva en PHP. Correr este ejemplo.

En JavaScript el manejo de valores o referencias es implícito, es decir, el lenguaje se reserva su manejo y el programadorno puede alterarlo. En cambio, en PHP el manejo de valores y referencias es explícito, es decir, el programador debe indicarcuándo quiere hacer una copia de un valor o cuando quiere tener una referencia hacia el valor original. Como es de esperar,las referencias se crean con el operador ampersand (&), como se aprecia en el ejemplo del php_byvalue_byreference.

7.1.8 Reglas de alcance de variables (variable scope)

Una importante diferencia en PHP con otros lenguajes de programación son sus reglas de alcance de variables (variablescope). PHP asume que toda referencia a variable que se haga en el cuerpo de una función, es una referencia a una variablelocal, a menos de que se indique lo contrario. En el Listado 7.11, la función pr i nt _ f ac tor i al s ( ) falla en la línea 16 al tratar

de acceder a $count , ya que PHP busca una variable $count local, la cual no fue declarada en ese contexto.


# Variable global5.$count = 25;6.

7.function f actor i al ( $n)8.{9.


12.function pr i nt_ f actor i al s( )13.{14.

// Error: $count no esta definida localmente15.for ( $i = 0; $i < $count ; ++$i )16.

echo "<l i >$i ! = " , f actor i al ( $i ) , "</ l i >\ n" ;17.}18.

19.pr i nt_ f actor i al s( ) ;20.

?>21.</ul>22.

</body>23.

Listado 7.11. Error tratando de acceder a una variable local no definida. Correr este e jemplo.

Este problema es un error común de programación, debido a PHP rompe la norma de la mayoría de lenguajes con los cualespodría estar familiarizado el desarrollador. Hay varias soluciones. Si es factible, se recomienda pasar por parámetro el valor

que requiere la función, así se mantiene la modularidad del código y se reduce la dependencia de variables globales, comose hace en el Listado 7.12.


// Variable global5.$count = 25;6.



12.function pr i nt_ f actor i al s( $count)13.{14.

// Error: $count no esta definida localmente15.


99 22/09/2015 1



for ( $i = 0; $i < $count ; ++$i )16.echo "<l i >$i ! = " , f actor i al ( $i ) , "</ l i >\ n" ;17.

}18.19.

pr i nt_ f actor i al s( $count) ;20.?>21.</ul>22.

</body>23.

Listado 7.12. Pasar variables globales por parámetro a una función. Correr este ejemplo.

Si por alguna razón se necesita trabajar con variables globales, se le puede indicar a la función que la variable $count no

está definida en el contexto local si no en el global, lo cual se hace con la palabra reservada gl obal , como se aprecia en la

línea 16 del Listado 7.13. El uso de variables globales se considera una mala práctica de programación.


// Variable global5.$count = 25;6.



12.function pr i nt_ f actor i al s( )13.{14.

// Hace a $count accesible en el contexto local15.global $count;16.

17.

// Error: $count no esta definida localmente18. for ( $i = 0; $i < $count ; ++$i )19.echo "<l i >$i ! = " , f actor i al ( $i ) , "</ l i >\ n" ;20.

}21.22.

pr i nt_ f actor i al s( ) ;23.?>24.</ul>25.

</body>26.

Listado 7.13. Uso de variables globales. Correr este e jemplo.

PHP provee algunas variables globales que son accesibles desde cualquier contexto, es decir, sin tener que declararlasprimero con la palabra reservada gl obal . Se les conocen como variables superglobales y son arreglos asociativos con

información muy útil para el programa. Se listan en la Tabla 7.2.

Arreglo Descripción

$GLOBALSSirve para acceder a las variables globales, en especial si se quiere acceder a una variable global y existe una homónimaen el contexto local.

$_SERVER

Contiene variables enviadas por el servidor web al intérprete de PHP, como $_SERVER[ ' PHP_SELF' ] que tiene la ruta del

programa PHP relativa a la raíz del sitio, el nombre del servidor web ($_SERVER[ ' SERVER_NAME' ] ), detalles del

navegador que solicitó ejecutar el programa PHP ($_SERVER[ ' HTTP_USER_AGENT' ] ), el IP de la máquina del cliente

($_SERVER[ ' REMOTE_ADDR' ] ) y muchos otros.

$_GET Aloja las variables pasadas al script por parámetro en el URL (método HTTP GET).

$_POST Aloja las variables pasadas al script por parámetro utilizando el método HTTP POST.

$_FI LES Aloja información sobre los potenciales archivos que se hayan enviado (uploaded) por el método HTTP POST.

$_COOKI E Un arreglo con variables y valores que el navegador aloja por petición del sitio web.

$_SESSI ON Almacena variables globales para controlar la sesión con el navegador.

$_REQUEST Un arreglo que contiene la unión de los arreglos $_GET, $_POST y $_COOKI E.

$_ENV Las variables ambiente que dispone el intérprete de JavaScript. Son dependientes del sistema operativo.

Tabla 7.2. Arreglos asociativos superglobales en PHP

Siempre que se va a usar una variable cuyo valor fue provisto por una fuente externa, como un parámetro, debe evitarseque su valor sea ejecutado por el intérprete de JavaScript o genere código (X)HTML/JavaScript, ya que permite a unatacante inyectar código maligno que podría revelar información confidencial de su sitio web u otro tipo de daño. PHPprovee varias funciones que convierten código en una representación no ejecutable, como ht ml ent i t i es( ) que reemplaza

los caracteres especiales (<, >, &) por sus entidades correspondientes (&l t ; , &gt ; , & ).

7.1.9 Objetos


99 22/09/2015 1



Los objetos en PHP util izan prácticamente la misma sintaxis de Java, con algunas variaciones de C++. Los objetos soninstancias de clases. Una clase se declara con la palabra reservada cl ass seguida por un identificador. Las propiedades

(miembros de datos) y métodos de la clase, se deben anteceder con el tipo de acceso que deben tener: pri vate, pr otected o

publ i c. Si se omite, PHP asume publ i c.

Los métodos se declaran como cualquier otra función de PHP, sólo que dentro del cuerpo de la clase. Un método de una clasea diferencia de una función normal, tiene acceso a tres identificadores reservados: $thi s es una referencia hacia la instancia

del objeto al que se le invocó el método, y se uti liza para acceder a sus propiedades y otros métodos. s e l f : : es una

referencia hacia la clase misma y sirve para acceder a sus miembros estáticos. par ent : : permite acceder a propiedades y

métodos de la clase base.

Para instanciar un objeto se utiliza el operador new cl ase( par amet r os) , enviándole los parámetros que recibe la clase en el

constructor. Un constructor es un método con el nombre especial __ const r uct , el cual se encarga de inicializar los miembrosde datos del objeto. Aunque se puede utilizar un método con el mismo nombre de la clase como constructor, no serecomienda esta práctica, ya que versiones recientes de PHP lo interpretan como un método normal.

class Player1.{2.

protected $ni ckname, $emai l , $score;3.4.

function __construct ( $ni ckname, $emai l , $score = 0)5.{6.

$th i s- >ni ckname = $ni ckname;7.$th i s- >emai l = $emai l ;8.$th i s- >score = $score;9.

}10.11.

function i ncr easeScor e( $by = 1) { $th i s- >score += $by; }12.function getNi ckname( ) { return $th i s- >ni ckname; }13.function get Scor e( ) { return $t hi s- >score; }14.

}15.16.$pl ayer s[ ] = new Player( ' pi nocho' , ' pi nocho@caj af i shel . com' ) ;17.$pl ayer s[ ] = new Player( ' chema' , ' chema@semeol vi do. com' ) ;18.$pl ayer s[ ] = new Player( ' osqui ' , ' dumbo@t l c. com' ) ;19.

20.$bets = r and( 30, 100) ;21.echo count ( $pl ayer s) , " j ugador es, $bets apuestas. . . " ;22.for ( $i = 0; $i < $bet s; ++$i )23.{24.

$wi nner = $pl ayer s[ r and( 0, count ( $pl ayer s) - 1) ] ;25.$wi nner - >i ncr easeScor e( ) ;26.

}27.28.

echo "Resul t ados: \ n";29.for ( $i = 0; $i < count ( $pl ayers ) ; ++$i )30.

echo ' ' , $pl ayer s[ $i ] - >get Ni ckname( ) , ' : ' , $pl ayers[ $i ] - >get Scor e( ) , " \ n" ;31.

Listado 7.14. Ejemplo de clases y objetos en PHP. Correr este ejemplo.

7.2 Manejo de archivos

PHP puede crear o acceder a archivos existentes en el servidor web, por ejemplo, para crear bitácoras o archivos de datosque necesita el programa en PHP.

PHP provee una considerable cantidad de funciones para trabajar con archivos y el sistema de archivos del sistemaoperativo, la mayoría de ellas fuertemente influenciadas por el lenguaje de programación C. El ejemplo del Listado 7.15muestra cómo crear una bitácora en la misma carpeta donde está el archivo . php, la cual registra detalles sobre cada


99 22/09/2015 1



acceso, como la fecha y la dirección IP del cliente que solicitó el recurso.

// Abrir el archivo para agregarle texto al final (append)1.$l og_ f i l e = f open( ' l og_ f i l e. t xt ' , ' a' )2.

or die( ' Err or: No se pudo abri r l og_f i l e. t xt ' ) ;3.4.

// Escribir algunos datos sobre el acceso: fecha, IP del cliente, etc5.f pr i nt f ( $l og_ f i l e, "%s\ t %s\ t %s\ t %s\ n"6.

, dat e( ' ymd: Hi s' )7., $_SERVER[ ' REMOTE_ADDR' ]8., $_SERVER[ ' REMOTE_ PORT' ]9., $_SERVER[ ' HTTP_ USER_AGENT' ]10.) or die( ' Err or : no se pudo escri bi r en l a bi t ácora' ) ;11.

12.// Cerrar el archivo13.f c l o se( $l og_ f i l e) ;14.

Listado 7.15. Crear un archivo de texto en el servidor. Correr este ejemplo.

El procedimiento para trabajar con archivos en PHP es el mismo que en otros lenguajes: abrir el archivo con la funciónf open( ) , leer o escribir bytes en él (fread( ) , f wr i t e( ) , f pr i nt f ( ) , etc.) y cerrar el archivo con la función f c l ose( ) . Todas

estas funciones necesitan saber en cuál archivo trabajar. PHP util iza un tipo de variable especial llamada "recurso"(resource) para representar archivos o registros de una base de datos.

La función f open( ) retorna un recurso (resource) hacia el archivo cuya ruta está en el primer parámetro. Pero si f open( )

falla al abrir el archivo, retorna f al s e. Es una práctica común detener la ejecución del script con la función di e( ) en caso deno poder acceder a un recurso importante (línea 3 del Listado 7.15) ya que permite rápidamente a los desarrolladoresidentificar y solucionar el problema; sin embargo, esto nunca debe hacerse. Lo adecuado es presentar una página de erroramigable al visitante, y quizá enviar un correo electrónico al administrador del sitio web para avisar del problema. Lasprincipales razones porque f open( ) falla al abrir un archivo es por falta de permisos, falta de espacio en disco o porque el

nombre del archivo es inválido. Estos problemas son responsabilidad del programador y no del visitante.El Listado 7.16 muestra como recorrer la bitácora creada en el Listado 7.15 y presentar su contenido en una tabla XHTML.La lectura se hace en un ciclo hasta encontrar el final del archivo (línea 11). En cada iteración del ciclo se obtiene una líneadel archivo y se imprime como una fila de la tabla, a excepción de que sea una línea vacía.

// Abrir el archivo para mostrar su contenido1.$l og_ f i l e = f open( ' l og_ f i l e. t xt ' , ' r ' )2.


echo "<t abl e><t head><t r >"5., "<t h></ t h><t h>Fecha</ t h><t h>I P</ t h><t h>Puer t o</ t h><t h>Agente

usuari o</ t h>"6.

, "</ t r ></ t head><t body>\ n";7.8.

// Imprimir cada línea en una fila de una tabla XHTML9.$count = 0;10.while ( ! f eof ( $l og_ f i l e) )11.{12.

$l i ne = fgets( $l og_ f i l e) ;13. $l i ne = t r i m( $l i ne) ;14.if ( s t r l e n( $l i ne) == 0 ) continue;15.$l i ne = str _repl ace( " \ t " , ' </ t d><t d>' , $l i ne) ;16.echo "<t r ><t h>" , ++$count , " </ t h><t d>$l i ne</ t d></ t r >\ n";17.

}18.19.

echo "</ t body></ t abl e>\ n";20.f c l o se( $l og_ f i l e) ;21.

Listado 7.16. Leer un archivo de texto en PHP. Correr este ejemplo.

¿Qué pasa si dos programas escriben simultáneamente en un mismo archivo? Si no se hace de forma controlada, la

respuesta será que el archivo se corrompe. En un ambiente web, una misma página puede ser visitada por uno, varios omiles de usuarios simultáneamente. Cada uno provoca una ejecución distinta del mismo script PHP. Por eso es tanimportante evitar que dos procesos traten de escribir el mismo archivo simultáneamente, o que uno escriba mientras otrosestán leyendo.

PHP provee la función f l ock( ) que bloquea un archivo para uso exclusivo (LOCK_EX) o lo desbloquea (LOCK_UN), y funciona de

la siguiente forma. Supóngase que un proceso 1 pide bloquear un archivo con f l ock( ) , el cual le otorga permiso de

escritura. Mientras el proceso 1 está escribiendo, un proceso 2 solicita bloquear el archivo para escritura; f l o c k( ) pone en

espera al proceso 2 hasta que el proceso 1 haya terminado de escribir. Una vez que proceso 1 desbloquee el archivoinvocando a f l oc k( ) con el parámetro LOCK_UL, f l o c k( ) sacará de la cola de espera al proceso 2 bloqueando el archivo de

nuevo.

El uso de f l o ck( ) produce una serialización de procesos, y por ende, introduce tiempos de espera que podrían ser notorios

para el visitante. Para reducir estos tiempos al máximo se recomienda bloquear el archivo inmediatamente antes de hacer laescritura y desbloquearlo inmediatamente después de escribir en él; es decir, se debe evitar bloquear un archivo desde que


99 22/09/2015 1



inicia el script, y desbloquearlo al final de éste. El Listado 7.17 muestra el ejemplo de la bitácora (Listado 7.15) utilizandocandados.

// Abrir el archivo para agregarle texto al final (append)1.$l og_ f i l e = f open( ' l og_ f i l e. t xt ' , ' a' )2.


// Escribir algunos datos sobre el acceso: fecha, IP del cliente, etc5.if ( flock($log_file, LOCK_EX) )6.{7.

f pr i nt f ( $l og_ f i l e, "%s\ t %s\ t %s\ t %s\ n"8., date( ' ymd: Hi s' )9., $_SERVER[ ' REMOTE_ ADDR' ]10., $_SERVER[ ' REMOTE_ PORT' ]11., $_SERVER[ ' HTTP_ USER_AGENT' ]12.) or die( ' Err or: no se pudo escri bi r en l a bi t ácora' ) ;13.

14.flock($log_file, LOCK_UN);15.

}16.// Cerrar el archivo17.f c l o se( $l og_ f i l e) ;18.

Listado 7.17. Utilizar candados para evitar que dos procesos escriban un mismo archivo simultáneamente. Correr este e jemplo.

Como se podrá notar en la línea 6 del Listado 7.17, la solicitud de bloquear un archivo debe hacerse en un i f , debido a que

f l ock( ) retorna f al s e en caso de que el mecanismo de candados no sea implementado por el sistema operativo o el sistema

de archivos, como ocurre en FAT32 o NFS (Network File System).

7.3 Bases de datos

Además del uso de archivos, PHP puede conectarse a diversidad de motores de bases de datos (DBMS, DatabaseManagement System) para almacenar información del sitio web, como SQLite, MySQL, PostgreSQL, SQL Server y Oracle. Detodos ellos cabe resaltar a MySQL, por ser relativamente liviano y apto para la mayoría de sitios web de mediana escala.Para sitios web gigantes de alta concurrencia, el modelo relacional es inapropiado y el desarrollador debería consideraralguna alternativa, como bases de datos orientadas a documentos. En los ejemplos de esta sección se usará MySQL debido asu histórica popularidad junto con PHP.

Para instalar MySQL en Linux, puede utilizar su administrador de paquetes o compilar desde el código fuente. Además debeinstalar el driver de MySQL en PHP. Por ejemplo, en Ubuntu puede lograr estas dos tareas emitiendo el comando sudoapt - get i nst al l mysql - server php5-mysql y reiniciar el servidor de PHP si lo hay. Para Microsoft Windows existe un

instalador o bien puede utilizar un ambiente de desarrollo integrado como EasyPHP que ya lo incluye. Es normal que en elproceso de instalación se solicite la contraseña del administrador (usuario r oot ) de MySQL, de lo contrario, se asume vacía.

Para acceder a las bases de datos, se debe utilizar un lenguaje de programación y el API (Application ProgrammingInterface) que el DBMS provee. Esto es lo que se hará desde PHP. Sin embargo, la mayoría de motores de bases datos,proveen clientes amigables al usuario, en línea de comandos (trate mysql - u root - p en Ubuntu), gráficos como

mySQLAdmin o vía web como phpMyAdmin.

El primer paso para utilizar bases de datos, es crear una en el DBMS y los usuarios que tendrán permiso de accederla.Aunque se pueden crear bases de datos desde PHP dándole permisos de administración del DBMS (la cuenta r oot de

MySQL), no es una solución adecuada ya que compromete la seguridad de los datos. Por esto, es común que la persona que

administra el servidor de bases datos utilice alguno de los otros clientes del DBMS para crear una base de datos y losusuarios que podrán modificarla, entre los que se incluye un usuario para los scripts de PHP.

Los siguientes comandos ilustran la creación de una base de datos Uni ver si dad utilizando el cliente en l ínea de comandos de

MySQL, y la creación del usuario php_user al cual se le otorgan permisos de administración sobre la base de datosUni ver si dad, pero no sobre otras bases de datos ni el DBMS. Al final se prueba que el usuario php_user haya sido creado

exitosamente volviendo a entrar al cliente de MySQL con sus credenciales.

$ mysql -u root -pPassword:

mysql > CREATE DATABASE Universidad;Quer y OK, 1 row af f ect ed ( 0. 00 sec)

mysql > SHOW DATABASES;+- - - - - - - - - - - - - - - - - - - - +| Dat abase |


99 22/09/2015 1



+- - - - - - - - - - - - - - - - - - - - +| i nf ormati on_schema || mysql || Uni ver si dad |+- - - - - - - - - - - - - - - - - - - - +3 rows i n set ( 0. 01 sec)

mysql > USE Universidad;Dat abase changed

mysql > GRANT ALL ON Universidad.* TO 'php_user' IDENTIFIED BY ' php_user_password ';

Quer y OK, 0 r ows af f ected ( 0. 00 sec)

mysql > QUITBye

$ mysql -u php_user -pPassword:

mysql > QUITBye

Es probable que su sitio web se componga de muchos archivos . php y varios de el los necesiten acceder a la base de datos.Para evitar redundar código, es conveniente guardar las credenciales en un archivo reutilizable, por ejemplodb_cr edenti al s. php, cuyo contenido puede ser como el mostrado en el Listado 7.18. Es muy importante que estas variablesestén dentro de la etiqueta <?php. . . ?>, de lo contrario cualquier visitante que trate de acceder a él, verá información

sensible. Y si por alguna razón el servidor de PHP dejara de funcionar, el servidor web podría enviarle el archivodb_cr edenti al s. php íntegro al navegador para que lo almacene en algún lugar del disco. Por esto, de ser posible el archivocon credenciales debería estar en alguna carpeta del sistema de archivos que no es parte del sitio web, y debería tenerpermisos de lectura y escritura el administrador del sistema operativo (root en Unix) y permiso de lectura para el usuario

del servidor web (algo como www- dat a) únicamente.

<?php$db_host = ' l ocal host ' ;$db_ name = ' Uni versi dad' ;$db_user = ' php_user' ;$db_pass = ' php_user_ password' ;?>

Listado 7.18. Archivo reutilizable con las credenciales para acceder a la base de datos. Al correr este ejemplo debería obtener una página vacía.

Para comunicarse con el DBMS, PHP provee un conjunto de funciones que varían de un DBMS a otro, o la clase genéricaPDO (PHP Data Objects) que provee una misma interfaz para acceder a varios DBMS.

7.3.1 Funciones para acceder a MySQL

PHP provee un conjunto de funciones para acceder a MySQL, las cuales inician con el prefijo mysql _ . El procedimiento para

acceder a la base de datos desde PHP es típicamente el siguiente:

Se establece una conexión con el servidor de bases de datos (DBMS): mysql _connect ( ) .1.

Se escoge la base de datos con la que se va a trabajar: mysql _sel ect_ db( ) .2.

Se emiten consultas (para obtener o actualizar información): mysql _query( ) .3.

Si los hay, se recorren los registros resultado de la consulta con mysql _f etch_r ow( ) o con mysql _f etch_assoc( ) , se

hace algún procesamiento con ellos, y se construye alguna salida útil para el visitante.

4.

Si los hay, se liberan los registros obtenidos de la base de datos: mysql _f r ee_r esul t ( ) .5.

Se cierra la conexión con el DBMS: mysql _cl ose( ) .6.

El Listado 7.19 muestra un ejemplo parcial de cómo crear las tablas en una base de datos vacía desde PHP. La línea 3 haceque, en esa posición, PHP incruste literalmente el contenido del archivo db_cr edent i al s. php mostrado en el Listado 7.18, y

luego lo interprete; lo cual ocasiona que las variables $db_host , $db_ name, $db_user y $db_pass estén definidas como

variables globales para el resto del programa.

// Este PHP se llama solo 1 vez para crear el esquema de la base de datos.1.// Cargar las credenciales de la base de datos2.r equi r e_once( ' db_credenti al s. php' ) ;3.

4.// Conectarse al servidor de base de datos (DBMS)5.$db_connecti on = mysql _connect ( $db_host , $db_user , $db_pass)6.

or die( " No se pudo conect ar al DBMS: " . mysql _er r or ( ) ) ;7.8.

// De todas las bases de datos que hay en el DBMS, escoger la de Universidad 9.// Esto equivale a escribir 'USE Universidad;' en un cliente de MySQL10.mysql _sel ect_ db( $db_name)11.

or die( "No se pudo sel ecci onar l a base de dat os: " . mysql _er r or( ) ) ;12.13.

// Truco: si se pasa el parametro drop_tables=true, se recrea la base de datos14.$dr op_t abl es = i sset ( $_GET[ ' drop_t abl es' ] ) && $_GET[ ' dr op_t abl es' ] == ' t r ue' ;15.

16.


99 22/09/2015 1



// Borrar las tablas es util por si el webmaster quiere empezar el sitio de cero17.if ( $drop_t abl es )18.{19.

// Obtener la lista de tablas existentes para eliminarlas20.$resul t = mysql _query( "SHOW TABLES FROM $db_name" )21.

or die( "No se pudo obt ener l a l i st a de tabl as: " . mysql _err or ( ) ) ;22.23.

// Por cada tabla encontrada en la base de datos, eliminarla24.while ( $row = mysql _f etch_row( $r esul t ) )25.{26.

// mysql_fetch_row() retorna un arreglo con un valor por cada atributo27.$tabl e_name = $row[ 0] ;28.

29.mysql _query( " DROP TABLE $t abl e_name") or die( mysql _er r or( ) ) ;30.

echo "<l i >Tabl a $tabl e_name: <span cl ass=\ "warni ng\ ">El i mi nada</ span>. </ l i >\ n" ;31. }32.33.

// Ya los registros con los nombres de las tablas no seran usados mas, liberarlos34.mysql _f r ee_resul t ( $resul t ) ;35.

}36.37.

// Crear las tablas que no existen38.// Crear cada tabla de la base de datos Universidad 39.$quer y =40.

' CREATE TABLE I F NOT EXI STS Est udi ante (41.Car ne CHAR( 6) ,42.Nombr e VARCHAR(50) NOT NULL,43.Corr eo VARCHAR(100) UNI QUE,44.Pr omedi o REAL DEFAULT 0. 0,45.CONSTRAI NT PRI MARY KEY ( Car ne) ,46.I NDEX( Nombr e( 45) )47.

) ; ' ;48.mysql _query( $query) or die( "No se pudo crear l a tabl a Est udi ante: " . mysql _er r or ( ) ) ;49.echo "Tabl a Est udi ant e: cr eada exi t osament e. <br/ >\ n" ;50.

51. $quer y =52.' CREATE TABLE I F NOT EXI STS Pr of esor (53.

Cedul a I NT( 9) ,54.Nombr e VARCHAR(50) NOT NULL,55.Corr eo VARCHAR(100) NOT NULL UNI QUE,56.CONSTRAI NT PRI MARY KEY ( Cedul a) ,57.I NDEX( Nombr e( 45) )58.

) ; ' ;59.mysql _query( $query) or die( "No se pudo crear l a tabl a Pr ofesor: " . mysql _er r or ( ) ) ;60.echo "Tabl a Pr of esor : cr eada exi t osament e. <br/ >\ n";61.

62.// Es buena practica cerrar la conexion tan pronto como se deja de usar 63.mysql _cl ose( $db_connect i on) ;64.

Listado 7.19. Creación de tablas en una base de datos MySQL vacía. Obtener el ejemplo completo.

La línea 6 del Listado 7.19 invoca la función mysql _c onnect ( $host , $user, $pass) para intentar establecer una conexión con

el servidor de base de datos MySQL que está en la computadora local (puesto que el valor de $db_host es ' l ocal host ' ), con

el usuario y contraseña que se crearon para uso exclusivo de los scripts de PHP. Si mysql _c onnect ( ) logra establecer laconexión, retorna un recurso de PHP (resource) que representa a la conexión y puede usarse subsecuentemente. Si no se

puede establecer la conexión, mysql _connect ( ) retorna f al s e y PHP veri fica la segunda condición del or en la línea 7, que

detiene la ejecución del script con mensaje de error para el navegador. Como se dijo antes, este mensaje es útil para eldesarrollador, pero poco amigable para el visitante.

Si la ejecución alcanza la línea 11 del Listado 7.19, indica que la conexión con el DBMS fue establecida exitosamente. ElDBMS puede tener muchas bases de datos a su cargo, y es necesario indicarle con cual de todas ellas se quiere trabajar conla función mysql _sel ect_ db( $db_name) .

A partir de la l ínea 40 en adelante, se empiezan a crear las tablas de la base de datos Universidad, pero si ya existen, semantienen inalteradas. Sin embargo, pueda que por alguna razón el administrador del sitio web de la Universidad(webmaster) quiera limpiar la base de datos y empezar de cero. Para efectos ilustrativos, si se ha provisto el parámetrocr eat e_schema. php?drop_t abl es=t r ue en el URL (de esto se hablará luego) se destruirán todas las tablas existentes de la

base de datos sin confirmación alguna, lo cual no es un buen diseño, pero se hace aquí con propósitos ilustrativos.

En caso de que el administrador solicite recrear las tablas, el método más eficiente es eliminarlas de golpe (DROP TABLE) yvolverlas a crear vacías. Para poder borrarlas se necesita conocer el nombre de cada una de ellas. El script podría tenerestos nombres en un arreglo, o bien, solicitarlos al DBMS mediante una consulta SHOW TABLES de MySQL. Cada cual tiene sus

ventajas y desventajas. Aquí se seguirá la segunda.

La consulta SHOW TABLES opera de la misma forma que una consulta SELECT de SQL. La consulta es ejecutada con la función

mysql _query( $sql _query) , la cual retorna un recurso que representa el resultado de la consulta, a veces llamado "record

set". En la línea 21 del Listado 7.19, este recurso se almacena en una variable $r esul t .

Es importante hacer notar que $r esul t almacena un recurso, no los datos que se obtuvieron de la consulta. En el modelo

relacional, los datos resultado de una consulta son una tabla temporal, y aunque algunos DBMS permiten acceder a todosellos como si fuesen una matriz en memoria aleatoria (RAM, Random Access Memory), es más eficiente recorrerlos una filaa la vez. Cada invocación a la función mysql _f etch_row( $quer y_resul t ) trae de la base de datos la próxima fila resultado de

una consulta, y la retorna en un arreglo que permite acceder a cada valor por un índice que equivale al número de lacolumna. Para el caso de SHOW TABLES sólo se retorna una columna con el nombre de cada tabla presente en la base de


99 22/09/2015 1



datos. La línea 28 del Listado 7.19 muestra cómo acceder a este valor. Si se quiere acceder al valor por el nombre de lacolumna en lugar de un índice, utilícese la función mysql _f etch_assoc( $query_resul t ) , que puede tener el efecto de hacer al

código más portable.

Una vez que se ha obtenido el nombre de la tabla, se emite otra consulta DROP TABLE para eliminarla de la base de datos(línea 30). Nótese que la invocación a mysql _f etch_r ow( ) se hace en un ciclo, ya que es muy probable que existan varias

tablas en la base de datos. Cuando se ha terminado de procesar la última de ellas, mysql _f etch_r ow( ) retornará f a l se en

lugar de un arreglo de valores.

La línea 35 del Listado 7.19 invoca la función mysql _f ree_resul t ( $query_r esul t ) para liberar las estructuras de datos en

memoria que alojan el resultado de la consulta obtenido en la línea 21 con mysql _quer y( ) . Si se omite esta invocación, elintérprete de PHP lo hará automáticamente cuando el script termine su ejecución.

En síntesis, el código de las líneas 18 a 36 del Listado 7.19 se ejecuta sólo cuando se ha solicitado eliminar las tablasexistentes de la base de datos, obteniendo el nombre de cada una de ellas y eliminándolas con DROP TABLE. Una vez que se

han eliminado, el programa sigue su ejecución normal en la línea 40, que emite otras consultas (CREATE TABLE) con la

misma función mysql _query( ) , pero debido a la naturaleza de la instrucción CREATE TABLE de SQL, no se generan registros de

datos como resultado, sino los valores t rue y f a l s e indicando respectivamente si la creación de la tabla fue exitosa o no.

Como puede inferirse, la función mysql _query( ) se utiliza para ejecutar cualquier tipo de consulta SQL: crear tablas, insertar

valores, actualizar valores, eliminar valores y obtener datos.

Para mysql _query( ) la consulta es un simple string que pasa directamente al DBMS. La sintaxis de dicha consulta es

completamente dependiente del DBMS en uso. El desarrollador web debe consultar la documentación oficial de su DBMSpara comprobar su validez u otras opciones útiles. En los ejemplos de este documento se ha util izado MySQL cuya sintaxisse puede consultar en línea.

Finalmente la línea 64 del Listado 7.19 desconecta al intérprete de PHP del servidor de bases de datos con la funciónmysql _cl ose( ) , la cual libera recursos y permite que el DBMS pueda aceptar otras conexiones; aspecto importante cuando

se atienden miles de visitantes simultáneamente en un sitio web.

7.3.2 Objetos para acceder a la base de datos

7.4 Formularios web

A diferencia de otros medios tradicionales, como la radio y televisión; el web permite una comunicación interactiva, donde elvisitante puede expresarse y retroalimentar a los autores. El mecanismo de interacción más primitivo es activar unelemento, haciendo click sobre él con el puntero del ratón o navegando con el teclado. Sin embargo, es el formulario webel mecanismo que permite al visitante comunicar información textual, a través de campos de texto, seleccionando valoresen una lista emergente, adjuntando un archivo de su computadora, y otros controles que guardan mucha similitud a los quedispone la interfaz de una aplicación de escritorio.

Las aplicaciones web actuales recurren al formulario web como el escenario donde la interacción con el usuario tiene lugar.Tómese de ejemplo un cliente web de correo (como GMail). Los campos para el destinatario, las copias, y el título delmensaje, se implementan con campos de texto (text fields); el cuerpo del mensaje se escribe en un control de área de texto(text area); los botones permiten formatear el texto del mensaje, adjuntar archivos, y uno en especial, el botón de enviar (submit) termina la edición del mensaje y envía copias a los destinatarios.

En la mayoría de casos, la interacción con un formulario web tiene repercusiones en el lado del sevidor. Por ejemplo en elcaso del cliente de correo, además de enviar el mensaje a los destinatarios, se guardará una copia en el buzón de salida. Esdecir, algún texto se concatenará a un archivo, o un registro se agregará a la base de datos del servidor de correo. Es por

esto que la implementación de un formulario web requiere trabajo en ambas partes: en el lado del cliente, el navegadordespliega el formulario y asiste al informante en el ingreso de información mediante JavaScript; mientras que en el lado delservidor se reciben los datos, se realiza la validación de los mismos y se aplica el efecto para el cual se ideó el formulario(enviar un correo, almacenar datos, buscar información, etc.).

El formulario web es un concepto que existe desde los inicios de la web, y se escribe con el elemento f o rmcomo se

ejemplifica en las líneas 12 a 16 del Listado 7.20. La primera vez que se carga este programa, ninguna de las variables$user name y $passwor d tendrán un valor, por lo que el control alcanza el el se y despliega el formulario web de las líneas 12 a

16. Nota: El operador <<< se conoce como Heredoc, y es seguido por un identificador y un cambio de línea. Todos los

caracteres que se encuentren entre ese cambio de línea y la próxima ocurrencia del identificador forman un string en el cualse hace interpolación de variables. Es útil para encerrar texto que contiene comillas dobles sin tener que utilizar caracteresde escape (\ ). La única restricción es que el identificador de cierre sólo puede estar precedido por un cambio de línea como

se ve en la línea 17.

<body><?php1.$user name = i sset ( $_GET[ ' user name' ] ) ? $_GET[ ' username' ] : ' ' ;2.


99 22/09/2015 1



$pass wor d = i sset ( $_GET[ ' password' ] ) ? $_GET[ ' password' ] : ' ' ;3.if ( $user name ! = ' ' && $pass wor d ! = ' ' )4.{5.

echo " <p>Bi enveni do( a) <st r ong>$user name</ st r ong> a nuest r o si t i o segur o. " ;6.echo " ( No eres <a href =\ " l ogi n1. php\ ">$user name</ a>?) . </ p>" ;7.

}8.else9.{10.

echo <<< _EOT11.<f orm method="get" act i on="l ogi n1. php">12.

<p><l abel >Usuario: <i nput t ype="text" name=" user name"/ ></ l abel ></ p>13.<p><l abel >Contraseña: <i nput t ype="password" name=" passwor d"/ ></ l abel ></ p>14.<p><i nput t ype="s ubmi t " val ue="Envi ar" / ></ p>15.

</ fo rm>16.

_EOT;17. }18.?></body>19.

Listado 7.20. Un formulario web minimalista. Correr este e jemplo.

Un formulario web (f o rm) se compone de varios campos de entrada (i nput , sel ect y textarea) en los que el visitante

ingresa o escoge información. En el caso del Listado 7.20 el formulario consta de un campo de texto con nombre user name

(línea 13), un campo de texto para ingresar contraseñas llamado password (línea 14) y el botón de "submit" (línea 15). El

usuario llena estos campos y cuando está listo, presiona el botón de enviar (submi t ). Esto causa que el navegador recopile

el valor de todos los campos del formulario como parejas nombr e_campo=val or y las envíe a algún programa en el servidorweb para que las procese. El URL de este programa se especifica en el atributo acti on del elemento f o rm(línea 12), que en

el caso del Listado 7.20 es el programa mismo.

¿Cómo hace el programa indicado en el atributo acti on para recuperar los datos ingresados por el visitante? El protocolo

HTTP establece dos métodos estándar para transferir los datos de un formulario: GET y POST, el cual se escoge con elatributo met hod del elemento fo rm. En el Listado 7.20 se utilizó el método GET (línea 12).

7.4.1 El método GET

El método GET indica que el navegador debe enviar las parejas nombr e_campo=val or al servidor en el URL, separadas delprograma (indicado por el valor del atributo acti on del elemento f o rm) por un signo de interrogación, y cada pareja

separada de otra por un ampersand (&), de la forma siguiente:

acti on?field1=value1&field2=value1&...&fieldN=valueN

Al texto que aparece después del carácter signo de pregunta en el URL anterior (marcado en negritas) se le conoce comoquery string, y es visible al visitante. Esto se puede probar al correr el programa del Listado 7.20, escribir un par devalores en los campos de texto y examinar la barra de direcciones del navegador tras presionar el botón de enviar. Incluso,el visitante puede cambiar los valores en la barra de direcciones y ejecutar de nuevo el programa con ellos; o bien guardarel URL en sus favoritos.

PHP facilita el trabajo al programador, y cada vez que se llama un script, el intérprete de PHP "parsea" el query string yextrae cada valor que en él encuentre, y los agrega a un arreglo asociativo superglobal llamado $_GET, de tal forma que elprogramador puede acceder a los valores con la expresión:

$fi el d_val ue = $_GET[ ' f i el d_name' ] ;

donde f i el d_name corresponde al valor del atributo name del campo i nput , sel ect o textarea definido en el formulario web.En lo siguiente se explicará paso a paso la lógica del Listado 7.20.

La primera vez que el visitante accede al programa l ogi n1. php normalmente no provee un query string, y por ende las

variables $user name y $passwor d adquirirán cadenas vacías en las líneas 2 y 3; ya que la función i sset ( ) retorna true sólo

para variables definidas, lo cual no ocurre con las entradas $_GET[ ' username' ] y $_GET[ ' password' ] en el arreglo asociativo

$_GET. De esta forma, la condición del i f en la línea 4 se evalúa como f al s e y hace que el intérprete de PHP imprima el

formulario (líneas 11 a 16), el cual es enviado al navegador.

El navegador presenta el formulario vacío, el cual consta de los siguientes controles: un campo de texto normal con nombreuser name (línea 13), un campo de texto especial para escribir contraseñas llamado password (línea 14), y el botón de enviar

(línea 15). Supóngase que el visitante escribe ' chema' en el campo user name, ' semeol vi do' en el campo passwor d y presionael botón Envi ar. Para el navegador este botón es especial, y cuando se activa busca el formulario al cual pertenece (línea

12), y examinando su atributo acti on obtiene el programa al que se le debe enviar los valores ingresados por el usuario

(l ogi n1. php) y a través de cuál método (get ). El navegador recopila los nombres y los valores de cada campo, arma el query string y lo concatena al URL del programa, lo cual genera el siguiente URL:

ht t p: / / www. ej empl o. com/ path/ l ogi n1. php?user name=chema&password=semeol vi do

Seguidamente, el navegador pone este URL en la barra de direcciones y envía el siguiente mensaje de solicitud HTTP alservidor (los cambios de línea son significativos):

GET / pat h/ l ogi n1. php?username=chema& password =semeolvido HTTP/ 1. 11.Host: www. ej empl o. com: 802.User- Agent: Chrome/ 133.

4.


99 22/09/2015 1



Como se puede ver, los valores de los campos viajan en la línea de solicitud (request l ine) del mensaje de solicitud HTTP,precedidos por el método de solicitud GET del estándar HTTP. Al recibir este mensaje, el servidor web localiza dentro de susitio el recurso / path/ l ogi n1. php y de acuerdo a su configuración, la extensión . php le indica que debe invocar al intérprete

de PHP enviándole por parámetro el mensaje de solicitud completo, más otra información.

El intérprete de PHP recibe la información del servidor web, y la distribuye en los arreglos superglobales $_SERVER, $_ENV,

etc. "Parsea" el query string; llena el arreglo asociativo $_GET e inicia la ejecución del l ogi n1. php del Listado 7.20, pero estavez habrá una diferencia importante: las entradas $_GET[ ' username' ] y $_GET[ ' password' ] están definidas en el arreglo

asociativo $_GET, por lo que las variables $user name y $passwor d adquirirán los valores ' chema' y ' semeol vi do'respectivamente en las l íneas 2 y 3. La condición del i f esta vez se evaluará como verdadera y se imprimirá el texto de

bienvenida, el cual es regresado como resultado al servidor web, quien lo despachará al cliente.

7.4.2 El método POST

En el ejemplo del Listado 7.20 se envía al servidor una contraseña por el método GET, lo cual la hace visible al usuario en elURL, quien además puede modificarla. El método POST realiza el mismo trabajo del método GET de transferir valores deun formulario al servidor web, con la diferencia de que éstos se envían en el cuerpo del mensaje de solicitud HTTP en lugarde la línea de solicitud, lo cual los hace invisibles al usuario, impidiendo que los puedan modificar o agregar a losmarcadores del navegador. Los cambios para hacer el Listado 7.20 funcionar con el método POST son pocos, como seresaltan en el Listado 7.21 (líneas 2, 3 y 12).

<body><?php1.$user name = i sset ( $_POST[ ' user name' ] ) ? $_POST[ ' user name' ] : ' ' ;2.$passwor d = i sset ( $_POST[ ' password' ] ) ? $_POST[ ' password' ] : ' ' ;3.if ( $user name ! = ' ' && $pass wor d ! = ' ' )4.{5.


}8.else9.{10.

echo <<< _EOT11.<f orm method=" post" act i on="l ogi n1. php" >12.


</ fo rm>16. _EOT;17.

}18.?></body>19.

Listado 7.21. Un formulario de autenticación utilizando el método POST. Correr este ejemplo.

Cuando el intérprete de PHP ejecuta un script, toma las parejas campo=val or del query string y las agrega al arreglo

asociativo $_GET, y las parejas que el navegador envía en el cuerpo del mensaje HTTP, las agrega al arreglo asociativo

$_POST. Como es de notar, ambos métodos no son excluyentes. El programador debe simplemente tener el cuidado deutilizar el arreglo asociativo correspondiente al método escogido en el atributo met hod del elemento f o rm.

A modo de ilustración supóngase que el visitante ingresa los mismos valores: ' chema' en el campo user name, ' semeol vi do'en el campo password y presiona el botón Envi ar del Listado 7.21. Esta vez el navegador detecta que el método de envío de

datos es POST, y ensambla el siguiente mensaje de solicitud HTTP:

POST / pat h/ l ogi n1. php HTTP/ 1. 11.Host: www. ej empl o. com: 802.User- Agent: Chrome/ 133.Content- Type: appl i cat i on/ x- www- fo rm- url encoded4.Content- Length: 385.

6.username=chema& password =semeolvido7.

En la mayoría de situaciones el método POST es preferido sobre el método GET, no sólo porque asegura a la aplicación webmayor control sobre los datos ingresados, sino por una razón más. La cantidad de bytes que se puede escribir en un URL esbastante limitada, mientras que en el cuerpo del mensaje HTTP puede crecer arbitrariamente. Esto es especialmentenecesario cuando se tienen grandes formularios o donde el usuario puede escribir extensas cantidades de texto en suscampos.

7.4.3 Seguridad y validación de datos

Los ejemplos del Listado 7.20 y Listado 7.21 no deben ponerse en funcionamiento en un sistema en producción, debido aque tienen una gran vulnerabilidad: los valores que provienen de los arreglos asociativos $_GET y $_POST son provistos por el

visitante, y nada impide que éste pueda enviar código (X)HTML, JavaScript, PHP o SQL con malas intenciones, por ejemplo,


99 22/09/2015 1



para descubrir contraseñas o información sensible. A esta práctica se le llama inyección de código y aunque es bastantefácil evitar sus efectos nocivos, sigue siendo un tipo de ataque común ya que es fácil para el programador olvidar defendersu código.

Siempre que el programador va a tomar un valor de los arreglos $_GET y $_POST, debe "esterilizarlo" (sanitize) primero; lo

cual se logra neutralizando el efecto de los caracteres especiales en cada lenguaje. PHP provee varias funciones paraesterilizar código, las cuales se listan en la Tabla 7.4.

Función Descripción

str i ps l ashes($st r ) Retorna un string resultado de eliminar los backslahes (\ ) de $str .

html ent i t i es($s t r )Retorna un string resultado de reemplazar los caracteres especiales en (X)HTML (<, >, &, ' , ")

por sus respectivas entidades (&l t; , &gt ; , & , ' , &quot ; ).str i p_tags($st r ) Elimina etiquetas (X)HTML que hayan en $str y retorna el resultado en una nueva cadena.

mysql _r eal _escape_str i ng($st r ) Inserta backslahes (\ ) a los caracteres que tienen significado especial en SQL, como cambios

de línea y comillas.

Tabla 7.4. Funciones para esterilizar código en PHP

El Listado 7.22 muestra un archivo con funciones de conveniencia que llaman a las listadas en la Tabla 7.4, las cuales seutilizan en las líneas 2, 3 y 4 del Listado 7.23 para evitar inyección de código maligno.

<?phpfunction sani t i ze( $str ){

return str i p_tags( ht ml ent i t i es( str i ps l ashes( $str ) ) ) ;}

function sani t i ze_mysql ( $str )

{ return sani t i ze( mysql _r eal _escape_st r i ng( $str ) ) ;}

function s ani t i ze_ t r i m( $str ) { return t r i m( sani t i ze( $str ) ) ; }function sani t i ze_mysql _tr i m( $str ) { return t r i m( sani t i ze_mysql ( $str ) ) ; }?>

Listado 7.22. Funciones de conveniencia para esterilizar código (X)HTML, PHP y SQL.

<body><?php1.require_once('sanitize.php');2.$user name = i sset ( $_POST[ ' user name' ] ) ? sanitize_trim ( $_POST[ ' user name' ] ) : ' ' ;3.$passwor d = i sset ( $_POST[ ' password' ] ) ? sanitize_trim ( $_POST[ ' passwor d' ] ) : ' ' ;4.if ( $user name ! = ' ' && $pass wor d ! = ' ' )5.{6.


}9.

else10. {11.echo <<< _EOT12.<f orm method=" post" act i on="l ogi n1. php" >13.


</ fo rm>17. _EOT;18.

}19.?></body>20.

Listado 7.23. Esterilización de código. Correr este ejemplo.

La validación de datos provistos por el informante es una tarea más semántica, como por ejemplo, verificar que los númerosse encuentren dentro de un rango apropiado, los textos no sean muy cortos o largos, o estén en algún lenguaje natural. Enel Listado 7.23 simplemente se ha discriminado cadenas vacías o constituidas únicamente de espacios en blanco (línea 5).

7.4.4 Controles en el formulario

El estándar (X)HTML permite varios tipos de controles para ingresar datos, los cuales se listan en la Tabla 7.5. Normalmente


99 22/09/2015 1



cuando se escribe un formulario, el autor incluye algún texto cercano a cada campo que ayude al informante a saber quétipo de información debe proveer en él, al cual se le l lama rótulo o etiqueta (label). Si tanto el texto como el campo seescriben dentro de un elemento l abel , el navegador los asociará semánticamente, de tal forma que cuando el usuario hace

click en el rótulo, el navegador transferirá el efecto al campo asociado. Este es el comportamiento natural que el usuarioespera, en especial para checkboxes y radio buttons. Los ejemplos de la Tabla 7.5 incluyen rótulos para ilustrar estapráctica.

Nombre Ejemplo

CheckboxRecordarme

<label><input t ype="checkbox" name=" r ecordarme" val ue=" s i " checked="checked"/>Recordarme</label>

Radiobuttons

Sexo: Hombre Mujer

<p>Sexo:<label><input type="r adi o" name="sexo" val ue="1" checked="checked" />Hombr e</label><label><input type="r adi o" name="sexo" val ue="2"/>Muj er </label>

</p>

Combobox

Nivel académico aprobado:

<label>Ni vel académi co aprobado:<select name="ni vel _academi co">

<option val ue="0">Ni nguno</option><option val ue="1">Ki ndergart en</option><option val ue="2">Pr i mar i a</option><option val ue="3">Secundar i a académi ca</option>

<option val ue="4">Secundar i a t écni ca</option><option val ue="5">Uni vers i ta r i a</option>

</select>

</label>

Multiplelist

Marque los lenguajes que conoce:

<label>Marque l os l enguaj es que conoce: <br/><select name="af i ci ones" size="6" multiple="multiple">

<option val ue="1">Ensambl ador </option><option val ue="2">C</option>

<option val ue="3">C++</option><option val ue="4">Obj ecti ve- C</option><option val ue="5"> J ava</option><option val ue="6">C#</option><option val ue="7">PHP</option><option val ue="8"> J avaScr i pt </option><option val ue="9">Ruby</option><option val ue="10">SQL</option><option val ue="11">L i sp</option><option val ue="12">Prol og</option>

</select>

</label>

Button

<input type="butt on" val ue="Val i dar" />

Submitbutton

<input type="submi t " val ue="Buscar "/>

Resetbutton

<input type="reset" val ue="Li mpi ar "/>

Text field

Buscar:

<label>Buscar:<input t ype="text" name="buscar " maxl engt h=" 255" si z e="50" val ue="Escri ba su consul t a aquí "/>

</label>


99 22/09/2015 1



Nombre Ejemplo

PasswordContraseña:

<label>Cont r aseña: <input type="password" name="contr asena" maxl ength="12" s i z e="12"/></label>

Text area

Describa el problema:

<label>

Descri ba el probl ema: <br/><textarea name="pr obl ema" col s="60" r ows=" 6">Escri ba l os pasos para reproduci r el probl ema</textarea>

</label>

Fileselect

Ningún archivo seleccionado.

<input type=" f i l e " name="avatar"/>

Hiddenfield

<input type="hi dden" name="useri d" val ue=" chema"/>

Tabla 7.5. Tipos de controles disponibles en un formulario web

A excepción de las listas (sel ect ) y las áreas de texto (textarea), la mayoría de controles en (X)HTML se escriben con elelemento i nput . Su único atributo obligatorio es type, que indica el tipo de control que se quiere: checkbox, r adi obut t on, .

Todos los controles comparten el atributo name, cuyo valor es un identificador que no necesariamente debe ser único en el

documento. Cuando un formulario es aceptado (al presionar el botón "submit"), el navegador ensambla las parejascampo=val or en el query string a partir de los nombres de los controles y sus respectivos valores. Si un control no tiene

nombre, el navegador simplemente lo ignora. Los demás atributos son dependientes del tipo de control, como se explica enlos siguientes párrafos.

Las casillas de verificación (checkboxes) permiten al usuario indicar un valor booleano al marcar o no un rectángulo. Seescriben con la notación <i nput t ype=" checkbox" name=" checkbox_name" val ue=" yes" checked=" checked"/ >. Su estado inicial

es desmarcado, a menos de que se provea el atributo checked=" checked" . Cuando se acepta el formulario, si la casilla de

verificación está desmarcada, el navegador simplemente no la incluye en el query string. Si la casilla de verificación estámarcada, se incluye una pareja checkbox_name=on en el query string. El valor "on" lo asume el navegador, pero se puede

reemplazar por un valor más significativo indicándolo en el atributo val ue="valor " .

Los botones de radio (radio buttons) permiten al informante escoger una única opción entre varias disponibles. El autordebe proveer un elemento <i nput t ype="r adi o" name=" nombre_gr upo" val ue="val or " checked=" checked"/ > por cada opción.Si varios botones de radio comparten el mismo nombre, conforman un grupo de botones de radio y sólo uno de el los puedeestar marcado a la vez. Inicialmente todos los botones de radio están desmarcados a menos de que uno tenga el atributochecked=" checked". Cuando se acepta el formulario (se presiona el botón Submi t ), si ningún botón de radio en el grupo está

seleccionado, el navegador omite el grupo por completo en el query string; si el botón seleccionado no tiene un valor en elatributo val ue, el navegador envía el valor "on" para el grupo, lo cual carece de utilidad para el desarrollador; por eso es

importante proveer un valor adecuado en el atributo val ue de cada botón de radio, y en tal caso, al aceptar el formulario el

navegador agrega una pareja nombr e_gr upo=val or , donde val or es el valor del atributo val ue del botón seleccionado por elusuario.

Los botones (button) se especifican con <i nput t ype="butt on" val ue="l abel del bot ón"/ >. No tienen una acción asociada a

menos de que se les establezca una con JavaScript. Su rótulo se puede cambiar con el atributo val ue. El botón de enviar

(submit button) se escribe <i nput t ype="submi t " val ue="l abel del bot ón"/ > ejecuta la acción especificada en el atributo

acti on del formulario (elemento f o rm). Existe una variación del botón enviar que permite reemplazarlo por una imagen, por

ejemplo: <i nput t ype="i mage" sr c="envi ar. svg" al t ="Envi ar dat os"/ >. El botón de limpiar (reset button) se escribe

<i nput t ype="r eset " val ue="l abel del bot ón"/ > y cuando se presiona indica al navegador que regrese todos los controlesdel formulario a sus valores originales.

Los campos de texto (text field ) son quizá el tipo de control más usado en el web. Permiten introducir una línea de texto,cuya longitud está limitada por el valor del atributo maxl engt h. El atributo s i z e indica la cantidad de caracteres que tendrá

el ancho visible del control, sin embargo, es mejor ajustar el ancho mediante hojas de estilo (CSS). Si se escribe un textoen el atributo val ue, se tomará como el valor inicial del campo. En caso de que se quiera delimitar el campo para que

permita únicamente números o valores en cierto formato, se debe emplear JavaScript.

Una variación del campo de texto son los campos de contraseña ( password field ) que despliegan asteriscos u otro carácterespecial para encubrir los reales, con el fin de introducir información sensible que podría ser vista por una persona ajena alinformante. Tiene otras características como deshabilitar funciones del portapapeles y disparar el sistema de recuerdo decontraseñas del navegador.

El selector de archivo (file select ) permite al visitante adjuntar un archivo cualquiera de su computadora local al


99 22/09/2015 1



formulario. Se escribe con el elemento <i nput t ype="f i l e" name="nombre_sel ector "/ >. Una vez enviado al servidor, el

nombre del archivo y su contenido se pueden obtener en PHP a través del arreglo superglobal $_FI LES.

El elemento <sel ect name="nombr e_l i st a" si ze="el ement os_vi si bl es" mul t i pl e="mul t i pl e" val ue="def aul t _val ue">. . .</ sel ect> sirve para construir listas desplegables, listas simples y li stas múltiples. Una lista desplegable (combo box )presenta sólo el elemento seleccionado y en caso de que se active el control, una lista emergente muestre todas lasopciones. Las listas desplegables se forman con el atributo si ze = 1, y aunque permiten selección múltiple, no es un

comportamiento natural. Si el valor del atributo s i z e es 2 o más, el navegador presentará un control de lista simple; y si

el atributo mul t i pl e="mul t i pl e" está presente, el navegador presentará una lista múltiple donde el usuario podráseleccionar varios elementos con el ratón mientras mantiene la tecla Ctr l o Command presionada.

Los elementos de la lista se escriben con elementos <opt i on val ue=" val or" >Texto</ opt i on>. Por defecto el primero ellosestará seleccionado en caso de que la lista sea desplegable (combo box ). Si se quiere preseleccionar otro valor, debeespecificarse con el atributo val ue del elemento sel ect . Se pueden crear grupos de opciones con el elemento optgr oup,

como se ilustra en el Listado 7.24.

Cantón de nacimiento:

<label>Cantón de naci mi ento: <br/><select name="canton" s i z e="10">

<optgroup l abel ="San J osé"><option val ue=" 101">San J osé</option><option val ue=" 102">Escazú</option>

. . .<option val ue=" 120">León Cort és</option>

</optgroup>

<optgroup l abel ="Al aj uel a"><option val ue=" 201">Al aj uel a</option><option val ue=" 202">San Ramón</option>

. . .<option val ue=" 215">Guatuso</option>

</optgroup> . . .

</select></label>

Listado 7.24. Grupos de opciones en un control de lista.

Los campos ocultos (hidden field ) son útiles para almacenar valores provenientes del servidor web que no es necesariomostrar al usuario; pero que pueden ser leídos por código JavaScript, y también por código PHP cuando el formulario vuelvaa ser enviado. Se suelen transferir identificadores de usuario o sesión mediante estos campos; los cuales no se debenasumir seguros, ya que sus valores se pueden descubrir simplemente mirando el código fuente de la página web en elnavegador.

El autor puede ajustar la apariencia de todos los controles del formulario mediante hojas de estilos CSS. Es una prácticacomún emplear una tabla dentro del formulario para dar una apariencia ordenada. En tal caso habrá que separar los rótulosde los controles. Por dicha el elemento l abel tiene el atributo f or ="i d_del _cont rol " , que permite conectar el rótulo con el

control mediante el i d del control, indiferentemente de dónde ése se encuentre dentro del documento web.


99 22/09/2015 1



7.4.5 Validación de datos con JavaScript

Cuando se implementa un formulario web es apremiante hacer una doble validación de datos, tanto en el servidor web comoen el navegador. La validación de datos en el lado del cliente es instantánea. Permite al informante tener asistencia yretroalimentación antes de enviar los datos, sin tener que esperar y consumir recursos para que el servidor web sepronuncie. El autor podría estar tentado a pensar que validando los datos en el navegador, éstos estarán limpios y listospara ser procesados o almacenados en la base datos, por lo que es innecesaria una segunda validación con PHP. Sinembargo, la validación en el lado del servidor es ineludible. El visitante podría deshabilitar JavaScript en su navegador, omodificar su código fuente, tanto (X)HTML como JavaScript y poner a prueba su servidor de ingeniosas formas, en especialsi la información que está en juego es sensible o de alto interés (como dinero).

En general la validación con JavaScript consiste en obtener el valor de cada control del formulario y revisar que seaadecuado. Existen varias formas de acceder al valor de un control. Quiźa la más sencilla sea utilizando el valor del atr ibutoname. Cuando el navegador carga el documento, crea un objeto tipo arreglo document. f orms[ ] con cada formulario que en él

encuentre. Además si se provee un nombre al formulario de la forma <f orm name=" f orm_name". . . > creará un objetodocument . f or m_name, y los controles de dicho formulario se pueden acceder de la forma document . f orm_name. f i el d_name, en

especial es de interés su valor con la propiedad document . f orm_name. f i el d_name. val ue.

La validación se puede realizar en distintos momentos: cuando el usuario cambia el valor de un control (onchange) o cuandointenta enviar el formulario. En el ejemplo del Listado 7.25 se hace de la segunda forma, interceptando el evento onsubmi tdel formulario (línea 2). Nótese que se emplea la palabra reservada return al invocar la función validadora. Si esta función

retorna t rue, el navegador continúa el envío de datos al servidor; pero si retorna f a l s e, el manejo del evento se

interrumpe, evitando que el formulario sea enviado al servidor.

<body>1.<form name="l ogi n" met hod="post" act i on="l ogi n3. php" onsubmi t ="return val i dat e( ) ">2.

<table>3.

<tr>4. <th><label f or =" user name">Usuar i o: </label></th>5.<td><input type="text" name=" user name" i d="user name"/></td>6.

</tr>7.<tr>8.

<th><label f or =" passwor d">Cont r aseña: </label></th>9.<td><input type=" passwor d" name="passwor d" i d=" passwor d"/></td>10.

</tr>11.<tr>12.

<td col span=" 2"><input t ype="s ubmi t " val ue="Envi ar "/>13.<input type="reset" val ue="Li mpi ar"/></td>14.

</tr>15.</table>16.

</form>17.<script type="text / j avascr i pt" >18.<! - -19.

function val i date( )20.{21.

var resul t = ' ' ;22.

resul t += val i dat eUser name( document . l ogi n. user name. val ue) ;23. resul t += val i dat ePassword( document . l ogi n. password. val ue) ;24.25.

if ( resul t == ' ' ) return true;26.27.

al er t ( resul t ) ;28.return false;29.

}30.31.

function val i dateUser name( val ue)32.{33.

// Quitar espacios en blanco (trim)34.val ue = val ue. repl ace( / \̂ s+| \ s+$/ g, ' ' ) ;35.

36.// El nombre es obligatorio37.if ( val ue == ' ' ) return ' Especi f i que el nombr e de usuar i o\ \ n' ;38.

39.// Impedir caracteres especiales40.if ( / [ ! " \ #\ $%&' \ ( \ ) \ * \+\ , \ - \ . \ / \ : ;<=>\ ?@\ [ \ ] \ \̂ ` \ {\ | \ }\ ~\ \ \ \ ] / . test ( val ue) )41.


99 22/09/2015 1



return ' No ut i l i ce car acteres especi al es en el nombre\ \ n' ;42.43.

return ' ' ;44.}45.

46.function val i dat ePassword( val ue)47.{48.

// Quitar espacios en blanco (trim)49.val ue = val ue. repl ace( / \̂ s+| \ s+$/ g, ' ' ) ;50.

51.// La contraseña es obligatoria52.if ( val ue. l engt h < 8 ) return ' La cont r aseña debe ser al menos de 8 caract eres\ \ n' ;53.

54.// Debe tener mayusculas, minusculas y numeros55.

if ( ! / [ a - z ] / . test ( val ue) | | ! / [A-Z] / . test ( val ue) | | ! / [ 0 - 9 ] / . test ( val ue) )56. return ' La cont r aseña debe tener mayúscul as, mi núscul as y números' ;57.58.

return ' ' ;59.}60.

- - >61.</script>62.

</body>63.

Listado 7.25. Validación de dos campos de un formulario utilizando JavaScript. Correr este ejemplo.

La validación se realiza probando condiciones contra los datos provistos por el usuario. El código del Listado 7.25 empleaexpresiones regulares para hacer más sencilla la programación. Una expresión regular en JavaScript se escribe entre doscaracteres slash (/ / ) que no están seguidos (de lo contrario formarían un comentario). Internamente JavaScript crea un

objeto RegExp que provee el método te s t ( s t r ) , el cual recibe una cadena de caracteres, y si logra encontrar la expresión

regular dentro de ella, retorna t rue. Por su parte, el método str . repl ace(/ exp/ g, t ext) busca todos los textos de str que

cumplen la expresión regulgar exp y los reemplaza por t ext . El estudio de la nomenclatura de las expresiones regulares sedeja como ejercicio para el lector.

8 Bibliografía

[Gars02] GARSHOL, Lars Marius. Definitive XML application development Prentice Hall PTR, United States of America,2002

1.

[Gold99] GOLDFARB, CHARLES Y PRESCOD, PAUL. Manual de XML. Prentice Hall, Madrid, España, 1999.2.

[Holm02] HOLMAN, Ken. Definitive XSLT and XPath Prentice may PTR, United States of America, 2002.3.

[Marc00] MARCHAL, Benoît. XML by Example. QUE, United States of America, 2000.4.


Desarrollo de Aplicaciones Web

Documents

Transcript of Desarrollo de Aplicaciones Web