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.0 fue gratuita incluso para uso comercial. Lentamente Internet Explorer va tomando popularidad y mercado de Netscape, lo que 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 usuarios como autores de sitios web. Por ejemplo, Netscape desarrolló JavaScript a finales de 1995, que un año más tarde sería imitado por el JScript de Microsoft, en la versión 3 de Internet Explorer. En esa versión particular, Microsoft incluyó una parcial implementación de las hojas de estilo en cascada (CSS, Cascading Style Sheets) sugeridas por el W3C pero aún no estandarizadas.

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 llamó 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ía Internet Explorer 5 en el 2002. La guerra de los navegadores había finalizado y también el rápido tren de innovaciones; tan evidente 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 comunidad descartaría luego dicho código debido a su complejidad, poca modularización, al gran volumen de pulgas y otros inconvenientes; y empezó la elaboración de un nuevo motor de navegador (web browser engine) hecho desde cero, al cual se le llamó, Gecko, y sería el motor de "rendering" de Firefox y el nuevo Netscape Communicator, que finalmente sería descontinuado a inicios del 2008.

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 HTML distintos que provocaron que los autores de millones de páginas tuvieran que escoger por uno o el otro. Era común ver 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) propone varios borradores de estandarización y en noviembre de 1995, la Internet Engineering Task Force (IETF) aprueba el HTML 2.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 no realiza ninguna acción. Los navegadores tomarán luego ideas de estas iniciativas en proceso y las implementarán a su manera para atraer usuarios.

A inicios de 1997 la IETF traslada la responsabilidad de estandarización al W3C, quien publicaría recomendaciones con una eficiencia mayor. Se publica el HTML 3.2 adoptando etiquetas y atributos de marcado visual de Netscape (como b y font). 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 tanto que 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 frameset y frame.

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ó HTML 4.01 como una aplicación XML en lo que conoce como XHTML 1.0. Una actualización XHTML 1.1 se emitió como recomendació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 de dispositivos 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 de recomendación. En el 2008 el W3C consideraría como base del futuro (X)HTML 5.0, un borrador llamado (X)HTML5 desarrollado por un grupo de interesados, compuesto principalmente por fabricantes de navegadores alternativos (Mozilla Foundation, Opera Software y Apple), ajenos al W3C, que se autodenominaron WHATWG (Web Hypertext Application Technology Working Group). A diferencia de XHTML 2.0, (X)HTML5 estaría más centrado en el desarrollo de aplicaciones web y no en la especificación de documentos. [Nota: En este documento se usarán los términos HTML y XHTML para referirse a cada notación por separado, o (X)HTML cuando algo aplique a ambas por igual].

La segunda guerra de navegadores

Los navegadores en guerra tuvieron equipos de desarrollo enfocados en agregar funcionalidad no estandarizada tan rápido como fuese posible, con poco control de calidad. Esto llevó a que ambos navegadores, Netscape Navigator e Internet Explorer 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 el letargo 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 y disponible 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 los estándares, influir activamente en ellos, y en la inclusión de características amigables para el usuario, por ejemplo, el uso de "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 nuevos estándares web que serían sometidos al W3C para aprobación, la Fundación Mozilla y Opera Software fundaron en el 2004 el grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group), al cual se uniría Apple posteriormente.

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

Microsoft reaccionó hasta octubre de 2006 con Internet Explorer 7, imitando características de Opera y Firefox. Esto no logró detener la creciente tasa de usuarios que seguían cambiando a Firefox. Por su parte, una semana después, Mozilla liberó 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 navegador que 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 libera el navegador Chrome basado en WebKit. La presencia de estos nuevos navegadores siguen reduciendo el número de usuarios de Internet Explorer [De acuerdo a la estadísticas del W3C en http://www.w3schools.com/browsers/browsers_stats.asp]. Microsoft reacciona con la versión 8 en marzo de 2009 imitando funcionalidades e incrementando el apego a los estándares. Esta guerra se mantiene hasta el presente, donde cada fabricante libera versiones con frecuencia siguiendo la misma estrategia.

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 al menos las secciones más estables de sus borradores.

El servidor web

Un servidor web es un programa cuya ejecución es persistente, a veces llamado servicio o demonio, en un equipo conectado a Internet, esperando conexiones de clientes usualmente por el puerto 80. Una vez establecida una conexión, el cliente solicita repetitivamente recursos al servidor mediante el protocolo HTTP y éste responde a cada una de ellas. El término servidor 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.

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

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 conocido por 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 analizar contenido ((X)HTML, imágenes, etc.), aplicarle estilos, modificar lo anterior con programas de JavaScript y presentar los resultados 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 al usuario su interacción.

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

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 y el cliente, debe estar identificado de forma única en el mundo mediante un localizador uniforme de recurso (URL, Uniform Resource Locator), que es una dirección junto con alguna información adicional para acceder al recurso. La sintaxis de un URL es

esquema://username:password@servidor:puerto/ruta?query_string#id_fragmento

http://www.amazon.com/
http://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION
http://acme.co.cr:8080/index.php
https://24.168.39.221/cgi-bin/book?id=4596098&action=remove
ftp://msoto:w33n8rf1@down.antivirus.net/current/setup.exe

URL       :
Esquema   :
Servidor  :
Puerto    :
Ruta      :
Parámetros:
Fragmento :
Usuario   :

Las partes de un URL son las siguientes:

1. Esquema. También llamado Protocolo. Indica el propósito y la sintaxis del resto del URL. Entre muchos se pueden citar: http, https, ftp y mailto. Por ejemplo, al procesar el URL http://www.amazon.com/, un navegador hará un petición HTTP al servidor www.amazon.com en el puerto 80. Al procesar el URL mailto:chema@suizacentroamericana.cr, lanzará un cliente de correo con un mensaje nuevo dirigido a chema@suizacentroamericana.cr.
2. 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 que DNS no es sensitivo a mayúsculas ni minúsculas, da lo mismo acceder a DRUPAL.org, por ejemplo.
3. Puerto. Indica el puerto que será usado en la conexión TCP. Por ejemplo, http://myserver.com:10000/ hará que el navegador establezca una conexión HTTP en el puerto 10000, probablemente para administración del servidor. Si se omite el puerto en el URL se asumirá el por defecto para el esquema usado. Por ejemplo, para http es 80, para https es 443 y para ftp es 21. Una lista de protocolos y sus puertos por defectos puede a conveniencia consultarse en la Wikipedia.
4. Ruta. Contiene la ruta para encontrar el recurso dentro del servidor. Puede ser relativa al sistema de archivos del servidor o un "alias" que ayude a especificar el recurso, por ejemplo, http://mibibl.net/revistas/acm.png. Es muy probable que sea sensitiva a mayúsculas si el sistema de archivos del servidor lo es también.
5. 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 parametro=valor y separadas por ampersands (&) si son varias parejas, por ejemplo, https://mibibl.net/revista.php?id=23091&action=devolucion&user=chema. A esta lista de parámetros se le suele llamar "query string".
6. Identificador de fragmento. Es un nombre que sirve para identificar una parte (fragmento) o un punto particular de un documento web. Cuando se especifica un identificador de fragmento en un URL, provoca que el navegador cargue el documento y automáticamente se desplace ("scroll") hasta el fragmento en cuestión. Por ejemplo, http://misitio.co.cr/docs/tesis.html#Cap03.
7. Usuario y contraseña. Si para acceder al recurso se necesita que el visitante se autentique, algunos protocolos permiten 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, ftp://mmortadela@sjmuni.go.cr/vaca/mu.pdf.

http://localhost/f.php?code="f(n) {return n ? n/f(n-1) : 1;}"

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. Un cliente web o navegador web interesado solicita estos recursos y el servidor responde con ellos. Las convenciones usadas en el 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 web carga el recurso desde el disco, una base de datos, un programa o cualquier otra fuente, y responde con una respuesta HTTP (HTTP response).

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

El mensaje HTTP

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

Estructura de un mensaje HTTP

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

Ejemplo de dos mensajes HTTP

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

10 pts.

Dibuje en una hoja carta los ejemplos de mensajes HTTP de la http_message_examples. Las siguientes subsecciones explican cada una de sus partes. Haga anotaciones rápidas sobre el dibujo de cada una de las partes. Haga las anotaciones pensando en que le ayudarán en el futuro, como referencia, a comprender de qué se trata cada una de las partes. Finalmente, escanee o tome una fotografía de su dibujo, y agréguela al repositorio de control de versiones. La imagen no debería superar los 200kB.

METHOD URL HTTP_version

HTTP_version status_code reason_phrase

Ejemplo de una sesión HTTP

Supóngase que el sitio web ubicado en www.ejemplo.com está en construcción y tiene sólo dos recursos, un index.html y una imagen img/ucr.png. El contenido del recurso index.html se encuentra en el some_index_page.

   
   
      
      
      
Presentación
      
En este curso el estudiante aprenderá a[...]
   
]]>

Un visitante accede con su navegador a www.ejemplo.com. La interacción entre el navegador web y el servidor web se aprecia en el diagrama de secuencia de la http_session_example_img.

Diagrama de secuencia de una sesión HTTP

Al escribir la dirección http://www.ejemplo.com/ el navegador contacta al "default gateway" que tenga configurado el sistema operativo de la máquina local y le pide que le resuelva la dirección IP del dominio www.ejemplo.com. Al obtener la dirección IP, el navegador establece una conexión TCP en el puerto 80 con www.ejemplo.com y é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 al servidor.

El servidor recibe la solicitud HTTP y de acuerdo a su configuración local, obtiene que el recurso "/" equivale al archivo index.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 Header fields) y anexa el contenido del recurso index.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 index.html guiado por los campos de encabezado HTTP. Almacena el recurso en su caché. El web rendering engine del navegador inicia el análisis (parsing) y despliegue (rendering) del recurso en la ventana del usuario. Al analizar la línea 4 del index.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 index.html, pero esta vez por img/ucr.png.

El servidor web recibe la nueva solicitud y la procesa de la misma forma que hizo previamente con index.html. El recurso también existe. La única diferencia es que img/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, en especial el Content-type: image/png. 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 del encabezado del mensaje, interpreta el contenido binario como una imagen PNG y el motor de rendering la coloca en su lugar dentro de la ventana. Al analizar la línea 5 del documento index.html (some_index_page), se percata de que necesita también el recurso img/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ómo interpretar 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 index.html. Continúa de esta forma analizando y desplegando el recurso index.html hasta alcanzar su final.

http://localhost/bio/foto.jpg

http://localhost/

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, entre otros detalles. La fase de diseño pretende elaborar un modelo de sitio web que solucione las necesidades halladas en la fase de análisis. En esta etapa se decide:

1. Qué tecnologías usar, por ejemplo: páginas estáticas, un administrador de contenido (CMS), programación PHP, bases de datos orientadas a documentos.
2. La arquitectura de los componentes que intervendrán.
3. La apariencia del sitio: estilos, si se usará una metáfora o no.
4. Las convenciones: nombres de los archivos, reglas de escritura del código fuente, ...

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ño web es tal que libros completos atienden el tema, como "Web Style Guide" de Patrick J. Lynch y Sarah Horton, cuyo texto completo se encuentra disponible en línea gratuitamente.

Alojamiento web

Para publicar su sitio web el autor debe, adquirir una o más computadoras; configurarlas como servidores web, bases de datos u otros servicios; contratar suficiente ancho de banda; velar porque el servicio no se interrumpa pese a fallos elé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 disco duro) 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, el cual recibe el nombre de alojamiento web (web hosting). La oferta de proveedores de alojamiento web es considerable, y varía en precios desde lo gratuito hasta lo costoso.

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

1. Servidor compartido (shared hosting). Es la variante más común y la más económica. Su sitio web comparte el mismo servidor web con otros sitios que estén alojados en el mismo servidor físico. Usted no tiene derechos de administración, ya que un cambio en la configuración del servidor web afectaría a los otros sitios.
2. Servidor dedicado virtual o servidor privado virtual (VPS, Virtual Private Host). Usted alquila una máquina virtual, la cual es de su uso exclusivo (privado) y por ende tiene permisos de administración sobre ella. Puede, por ejemplo, reiniciarla o instalar paquetes. Dado que varias máquinas virtuales comparten el mismo servidor físico, su sitio competirá por los recursos de hardware con las otras máquinas virtuales en la misma máquina.
3. Servidor dedicado (dedicated hosting). Un servidor físico que es para su uso exclusivo, no compartido con nadie.
4. Alojamiento en la nube (cloud hosting). Su sitio web no estará en un único servidor, sino distribuido en varios de ellos. Esto tiene grandes ventajas, como la posibilidad de responder a una inmensa cantidad de visitantes simultáneamente, la facilidad de expansión y la capacidad de continuar activo pese a que un servidor físico esté caído. Sin embargo, desarrollar y mantener un sitio web distribuido tiene mayor nivel complejidad que uno centralizado.

Para sitios pequeños o muy incipientes, el autor puede beneficiarse de servicios de alojamiento web gratuitos. El sitio Free Web Hosting lista y compara varios servicios de alojamiento gratuitos. Antes de decidirse por uno, el autor debería revisar los términos de servicio y otros detalles para evitar sorpresas.

$ ssh user@cursoweb.ecci.ucr.ac.cr
Password: (cursoweb password)

$ git clone https://url/to/my/repo.git public_html
Password: (git server password)

$ ssh user@cursoweb.ecci.ucr.ac.cr
Password: (cursoweb password)

$ cd public_html
$ git pull
Password: (git server password)

Registro de dominio

La mayoría de sitios web se conocen por un nombre de dominio como www.ejemplo.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. Los precios varían dependiendo principalmente de dos características:

1. El dominio de nivel superior (TLD, Top-Level Domain) que se quiere tener. Los precios varían dependiendo del tipo de dominio superior. Los dominios de nivel superior más conocidos son los genéricos: .com para el comercio, .org para organizaciones, y .net para entidades relacionadas con Internet. Hay dominios geográficos, administrados por países, por ejemplo .cr para Costa Rica y uk para Reino Unido. Los dominios propuestos permiten definir dominios arbitrarios, como .club o exclusivos como .bmw.
2. El registrador de dominio (en inglés, domain name registrar). Es la compañía que realiza el registro del dominio y de mantenerlo vigente año con año. El servicio DNPric.es permite comparar tarifas de varias registradores de dominio.

Cuando se registra un nombre de dominio, éste se debe convertir en pertenencia del autor y no del registrador del dominio. El autor puede entonces asociar el dominio con cualquier servidor web, sea propio, de un servicio de alojamiento gratuito, o uno comercial. Incluso, el autor puede cambiar de registrador de dominio, lo que se conoce como transferir el dominio. Cuando se contrata un servicio de alojamiento web comercial, es común que se incluya el costo de registro y renovación del nombre de dominio año con año.

Los nombres de dominio se asocian a direcciones IP. Cuando un cliente escribe una dirección web como www.ejemplo.com, el navegador le pedirá al sistema operativo que trate de conseguir la dirección IP de www.ejemplo.com. El sistema operativo preguntará a un servidor de dominio (DNS) que tendrá en su configuración, que resuelva el URL www.ejemplo.com. En el proceso es normal que se tenga que contactar varios servidores de dominio hasta encontrar la dirección IP asociada a www.ejemplo.com.

La dirección IP no es el único dato asociado a un nombre de dominio. Se asocia abundante información pública a los nombres de dominio que puede consultarse con un servicio de "whois", por ejemplo http://whois.domaintools.com/.

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 o no, 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 como hojas 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 aportan información, o que debe solventar necesidades especificas que sólo con programación puede atenderse; se debe convertir en un sitio web dinámico. En tal caso el autor debe escoger algún medio de programación en el lado del servidor, como CGI, algún lenguaje de "scripting" como PHP, alguna solución existente como un administrador de contenido (CMS), o un framework para desarrollo de aplicaciones web, entre otras posibilidades.

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 que entre 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. 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 primeros resultados de una consulta. Esto se puede mejorar incrementando la "popularidad" del sitio. Los buscadores miden qué tan popular es un recurso en proporción a la cantidad de enlaces que encuentran hacia dicho recurso en otros dominios. Por eso, 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 los resultados de los buscadores más populares.

5 pts. Aparte de su sitio web personal, describa un caso o una necesidad web que quiera satisfacer. Puede ser un sitio o una aplicación web para un familiar, una organización, o interés propio. Describa, de forma muy general, la necesidad y la tecnología que utilizaría para satisfacerla.

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 version="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 version, indica la versión de XML utilizada en el documento. Normalmente "1.0".
• La declaración de codificación con el atributo encoding, indica la codificación de caracteres del documento. Aunque los procesadores XML tienden a reconocer automáticamente la codificación, es mejor indicarlo explícitamente, por ejemplo, "UTF-8", "UTF-16" o "iso-8859-1" [Gold99]. Lo importante es que este atributo refleje realmente el tipo de codificación que usó para generar el documento.
• La declaración de documento autónomo con el atributo standalone no se suele utilizar con frecuencia ni tampoco se 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:

]]>

La declaración del tipo de documento

Es sabido que las cartas, tesis, guiones y las guías telefónicas son documentos que tienen una estructura muy diferente. Es decir, poseen elementos distintos, cada uno con su propia distribución y orden. Se dice que son tipos de documentos distintos. En XML cada tipo de documento se define en una notación formal que plasma su estructura llamada definición de tipo de documento (DTD, Document Type Definition) y se estudiará luego. Un documento puede declarar que es de un tipo de documento particular utilizando la declaración de tipo de documento, como se hizo en la segunda línea del xml_eg_book, indicando que ese documento es de tipo "book":

]]>

Se puede pensar en un DTD como una clase en programación orientada a objetos, mientras que un documento XML que sea de ese tipo de DTD es como un objeto que instancia esa clase. El "objeto" documento XML debe cumplir a cabalidad con la estructura descrita en su DTD, cuando esto ocurre, se dice que el documento es de tipo válido o simplemente válido, de lo contrario, se dice que el documento es de tipo no válido o simplemente no válido (o incluso, 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 es un 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 utilizarse para documentos pequeños que deben escribirse de forma rápida. Los documentos válidos siempre están bien formados y son necesarios cuando son muy extensos o deben procesarse por algún sistema computacional [Gold99].

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 entidad externa (un archivo en disco o red) o una combinación de ambas. Lo más común es que se encuentre en un recurso externo, como se hizo en la segunda línea del xml_eg_book, la cual instruye al procesador XML que el tipo de documento está en el archivo "book.dtd" en la misma ubicación que el documento XML. La palabra SYSTEM indica al sistema que busque el recurso especificado en el URI (Universal Resource Identifier) que le continúa. Más adelante se estudiará la nomenclatura de un DTD.

El identificador del elemento que continúa inmediatamente después de <!DOCTYPE, por ejemplo, book en el xml_eg_book, 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íz es precisamente ese elemento.

En XML los identificadores se usan para dar nombre a los elementos, entidades u otros. Por ejemplo, la línea 3 del xml_eg_book incluye tres identificadores: book, name y version. Los identificadores deben iniciar con una letra y pueden estar seguidos de cero o más letras o los caracteres punto, guión o dígitos. Los identificadores en XML son sensitivos a mayúsculas y minúsculas (case sensitive), esto implica, por ejemplo que book, Book y boOK se tomen como identificadores distintos. 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 [Gold99].

Elementos

Los elementos son las partes que componen un documento. El autor debe indicar entre todo el texto que compone el documento, qué trozo es cada parte. Sintácticamente un elemento se forma marcando la parte del documento entre dos etiquetas. Es decir, el texto (datos de carácter) que conforma un elemento se encierra entre un par de etiquetas. Una etiqueta es el texto entre un par de signos "menor que" y "mayor que". Sintácticamente, un elemento es la combinación de una etiqueta de inicio (que puede tener atributos), un contenido opcional, y una etiqueta de cierre, de la siguiente forma:

contenido

]]>

Un elemento tiene dos etiquetas, una de inicio y otra de cierre (o etiqueta de fin). La etiqueta de inicio se compone de un carácter menor que (<), un identificador_etiqueta_inicio que es un simple identificador y debe respetar las restricciones de los identificadores; seguido por cero o más parejas atributo="valor"; 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 un identificador_etiqueta_cierre 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 dos siguientes formas:

]]>

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.

Un elemento vacío no puede tener ninguna forma de contenido, ni siquiera espacios en blanco o cambios de línea. Es decir, que si en la primera forma de las listadas anteriormente se incluyera un cambio de línea, se consideraría como un dato de carácter y ese sería el contenido del elemento. Por el contrario, 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 XML deberá 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 no son etiquetas [Gold99]. Los elementos tienen etiquetas y contenido. Los elementos se escriben en el documento XML y son instancias de los tipos de elementos, los cuales se declaran en la definición del tipo de documento (DTD).

Atributos

Los elementos pueden tener atributos que son "una forma de incorporar características o propiedades a los elementos de un documento" [Gold99, 353]. Los atributos se escriben en la etiqueta de inicio. Un atributo se compone de un identificador, un signo de igual (=) y un valor entre comillas dobles, simples o una combinación de ambas; siempre que la comilla que cierra sea del mismo tipo de la que abre.

content
]]>

Cuando se crea un nuevo tipo de documento, es difícil decidir qué representar con elementos y qué con atributos. Las siguientes diferencias pueden ayudar en la decisión. Más adelante se retomaráne estas diferencias a un nivel más formal.

1. Un elemento puede tener varios elementos hijos del mismo tipo, por lo que pueden representar partes del documento que se repiten. Un atributo no puede repetirse un elemento.
2. Se puede controlar el orden de aparición de los elementos, mientras que los atributos pueden aparecer en cualquier orden.
3. Los elementos pueden tener estructura, como elementos hijos de distinta naturaleza. Los atributos son pequeños textos o números.
4. Los elementos tienden a ser visibles a los lectores o consumidores del documento, los atributos tienden a estar ocultos.

20 pts.

Asuma que los activos de su sistema de inventario se relacionan jerárquicamente. Por ejemplo, un inventario para la Escuela de Computación estaría compuesto de un edificio, el cual tiene tiene salas, las salas contienen escritorios, pizarras, teléfonos, computadoras, etc; una computadora tiene procesadores, módulos de memoria RAM, discos duros, y así por el estilo. El cliente necesita además distinguir cuáles activos son fijos y cuáles no; la condición de cada activo (en funcionamiento u ocioso); el estado del activo (buen estado, defectuoso, dañado); y la posibilidad de escribir detalles, que es un texto de cualquier longitud.

La figura fig_xml_inventory muestra un ejemplo de un inventario hipotético. Los rectángulos a la izquierda representan los activos y las flechas hacia la derecha indican los responsables de cada activo. Represente en su documento XML la jerarquía de activos mostrada en esta figura. Sus elementos deben ser genéricos, de tal forma que puedan reutilizarse para inventarios de cualquier otra empresa. Sus elementos deben además contener atributos y deben asociarse reflejando la jerarquía natural del inventario. De ser posible, use identificadores en inglés para sus elementos y atributos.

Inventario ficticio y reducido de nuestra escuela de computación (administración 2010-2013)

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 su gusto y la plasma en un DTD. Cuando una persona observa el marcado de un documento XML y se pregunta "¿qué significa esto?" o bien "¿qué aspecto tendrá después?", estará haciendo preguntas sobre su semántica. Por ejemplo, si se encuentra una 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 la gramática describir esta semántica para que otros autores puedan comprenderlo. Esta descripción se puede realizar en un documento PDF (Portable Document Format), un libro, o cualquier otro medio de comunicación [Gold99]. Más adelante se hará en comentarios en el DTD.

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

Entidades predefinidas

Una entidad XML es similar a una constante de un lenguaje de programación. Una constante tiene un nombre y un valor. Cada vez que se escribe el nombre de la constante, el compilador lo reemplaza por su valor. Una entidad XML es como una constante cuyo valor es cualquier trozo de texto: un carácter, un párrafo, un archivo (incluso binario), o todo un libro. A las entidades se les da nombre, y su valor se puede obtener mediante una referencia de entidad, con la notación &entidad;. Por ejemplo, < en un documento XML es reemplazado por el símbolo "<". Aunque XML define muchos tipos de entidades, en este documento sólo se estudiarán las entidades predefinidas.

Las entidades predefinidas "son marcas que representan caracteres que de otro modo se interpretarían con un significado especial" [Gold99, 358], como los caracteres menor que (<) y ampersand (&). Existen cinco entidades predefinidas mostradas en la xml_predefined_entities. "Cuando el procesador XML analiza el documento, reemplaza las referencias de entidad por los caracteres reales", en lugar de interpretarlos como caracteres de marcado [Gold99, 359].

Nótese que las etiquetas se delimitan con paréntesis angulares ("<" y ">"), y las referencias a entidades entre el signo "&" y el punto y coma (";"). Se dice que el texto encerrado dentro de estos cuatro caracteres se conoce como marcado, lo restante como datos de carácter. La combinación del marcado más los datos de carácter forman el texto XML [Gold99].

Secciones CDATA

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 las secciones CDATA. Estas secciones 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 de datos de carácter es

<![CDATA[ contenido ]]>

En el contenido puede aparecer cualquier cadena de texto, excepto la que cierra la sección CDATA (]]>) llamada CDEnd. La línea 29 del xml_eg_book usa dos entidades preestablecidas. Este mismo elemento pudo haberse escrito con una sección CDATA como

<p><![CDATA[
   Su popularidad puede deberse a su "facilidad de uso" y...
]]></p>

Comentarios

Los comentarios son cadenas de caracteres que no son parte de los datos de carácter, es decir, es parte del marcado pero que debe ser ignorado por el procesador XML. Permiten al autor hacer anotaciones que le ayuden a comprender o recordar partes 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, mayor que, ampersand-punto y coma), excepto la secuencia de cierre del comentario (-->). Para algunos procesadores XML, la secuencia de dos giones (--) es prohibida dentro de un comentario. Aunque no es obligatorio, se recomienda separar los dos guiones (--) del texto de los comentarios por un espacio en blanco, como se hizo anteriormente y no de la siguiente forma:

]]>

	
		¿A qué se refiere bootstrap del sistema operativo?
		
			Nadie se puede colgar en sus propias botas
			Una biblioteca de desarrollo web
			El arranque del sistema operativo
		
	
	<-- -------------------------------------------- -->
	
		¿Qué fenómeno del OS representan los filósofos comensales?
	

]]>

Espacios de nombres (namespaces) [tema opcional]

Es natural querer combinar diferentes tipos de documentos. Por ejemplo, en una presentación incluir una fórmula o un gráfico, o en un documento incluir una hoja de cálculo. Si un documento XML se incrusta dentro de otro, y ambos utilizan un mismo identificador con propósitos distintos, habrá una colisión de nombres. Por ejemplo, el documento web del xml_eg_name_collision tiene una figura SVG incrustada entre las líneas 8 a 15. Ocurre una colisión con los elementos <a>: el de la línea 9 pertenece a la imagen SVG y el de la línea 17 pertenece a XHTML.

	
Dado un triángulo cualquiera:
	

		
	
	
Se puede calcular su área con la fórmula de Herón:
	
s = sqrt(s(s-a)(s-b)(s-c)), s = (a+b+c)/2


]]>

Para evitar colisiones se utilizan espacios de nombres (namespaces). Los espacios de nombres permiten distinguir los elementos que pertenecen a un tipo de documento de los que pertenecen a otro tipo de documento (llamados vocabularios). Los espacios de nombres distinguen los elementos de diferentes vocabularios agregando un prefijo a los identificadores de los elementos, de la forma Prefijo:NombreElemento. El xml_eg_namespace_2 distingue el vocabulario al que pertenecen todos los elementos del documento.

	Dado un triángulo cualquiera:
	
		
			
				
			
			a
			b
			c
		
	
	Se puede calcular su área con la fórmula de Herón:
	s = sqrt(s(s-a)(s-b)(s-c)), s = (a+b+c)/2


]]>

En el xml_eg_namespace_2 se dice explícitamente a qué vocabulario o espacio de nombres pertenece cada elemento del documento. Se usó el prefijo h para identificar a los elementos que pertenencen a XHTML y el prefijo s para aquellos que pertenecen a SVG. Estos prefijos se definen con el atributo xmlns, que es una contracción de xml namespace. Recuerde que los atributos que inician con xml están reservados por el estándar.

Todos los elementos XML tienen un atributo xmlns implícito. Cuando el autor lo hace explícito, define un espacio de nombres de la forma: xmlns:Prefijo="URL". El Prefijo es sólo un identificador de uso interno en el documento. El elemento donde aparece el atributo xmlns y todos sus hijos pueden utilizar el Prefijo para hacer explícito el espacio de nombres al que pertenencen. Es decir, el elemento y sus hijos pueden utilizar la notación Prefijo:Elemento en sus etiquetas de inicio y de cierre. Se usa un URL para identificar al espacio de nombres de forma única. El URL no es necesario que exista, pues el procesador XML no lo consulta. Sólo se debe usar consistentemente para identificar al espacio de nombres y evitar que colisione con espacios de nombres definidos por otros usuarios.

Se pueden definir tantos prefijos como vocabularios se usen en el documento. En el xml_eg_namespace_2 se definieron dos prefijos: h y s, ambos en el elemento raíz html de la línea 4. Por tanto el atributo xmlns puede repetirse porque el prefijo pasa a ser parte del nombre del atributo, y también del nombre de los elementos que lo utilicen. Con el uso de ambos espacios de nombres en el xml_eg_namespace_2, es claro para un software XML distinguir que el elemento a de la línea 9 es un enlace SVG, y que el elemento a de la línea 17 es un enlace HTML.

Si al definir un espacio de nombres con el atributo xmlns se omite el prefijo, se estará indicando el espacio de nombres global. Todos los elementos hijos que no expliciten un prefijo, pertenecen al espacio global. En la línea 4 del xml_eg_namespace_3 se indica que el espacio de nombres global es XHTML, a excepción de los elementos que inician con el prefijo s, pues son elementos SVG. El espacio de nombres s se definió en el elemento svg de la línea 8, pero es más usual hacerlo en el elemento raíz (en este caso, html, de la línea 4). Este ejemplo muestra otro detalle. Los enlaces a de SVG usan el estándar XLink, el cual requiere su propio espacio de nombres (línea 9).

	
Dado un triángulo cualquiera:
	

		
			
				
			
			a
			b
			c
		
	
	
Se puede calcular su área con la fórmula de Herón:
	
s = sqrt(s(s-a)(s-b)(s-c)), s = (a+b+c)/2


]]>

Declaraciones de tipo de elemento

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

]]>

El <!ELEMENT inicia la declaración de un tipo de elemento. El IdElemento es el identificador que aparece en sus etiquetas. Debe ser único en el DTD y respetar las restricciones de los identificadores XML. La EspecContenido se refiere a la especificación de contenido, que indica qué objetos pueden figurar en el contenido del elemento, hay cuatro posibilidades [Gold99]:

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

El orden de los elementos hijos 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 vertical indica que debe aparecer sólo uno de los dos subelementos que están en sus extremos. Los paréntesis agrupan partículas de contenido 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, es decir, 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 debe aparecer 1 o más veces (necesario y repetible) [Gold99].

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 de lista de atributos, usualmente después de la declaración del tipo de elemento. Tiene la siguiente sintaxis

]]>

El <!ATTLIST indica que se va a declarar la lista de atributos del elemento identificado por IdElemento. Los atributos continúan uno tras otro separados por espacios en blanco, sin impotar si son cambios de línea o no. Cada declaración de atributo se compone de un identificador (IdAttN), el tipo de datos (TipoAttN), y el valor por defecto (DefaultValueN). IdAttN 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 TipoAttN puede ser alguno de los siguientes

El DefaultValueN en la declaración de la lista 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:

xmllint --valid --noout /path/to/file.xml

Elementos versus atributos

No es trivial decidir qué aspectos del mundo real deben modelarse como elementos y cuáles como atributos. Tampoco existe un diseño mejor que otro. El autor debe escoger alguna convención que sea coherente y escribir un DTD para obligar a todos los documentos del mismo tipo a cumplir con el diseño escogido. Aunque no hay ninguna regla para decidir qué debe modelarse 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 listas de condiciones. Por tanto, si algo del mundo real contiene otras partes que también deben modelarse, debe hacerse con elementos 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 pueden aparecer en cualquier orden y no pueden repetirse. Por esto, las "cosas" que deben repetirse o que respetan cierto orden deben 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 para representar partes de los objetos, o datos que son parte del contenido principal, y deben aparecer en todas las impresiones o interpretaciones del documento. Los atributos se utilizan para representar propiedades de los objetos, es decir, información sobre los datos reales (metadatos) y que no necesariamente debe imprimirse [Gold99].

25 pts.

Su especificación para representar inventarios debe ser genérica. Es decir, muchas empresas de distinta naturaleza podrían utilizar su notación para representar sus respectivos inventarios, y su DTD debe ser capaz de representarlos sin tener que incluirle modificaciones. De esta forma, usted puede publicar su DTD en algún servidor web y quienes empleen su especificación, incluirían el DTD oficial en sus documentos XML (tal como ocurre con el DTD de XHTML, por ejemplo).

Para probar la generalidad de su DTD, cree otro documento XML y represente el inventario de la fig_xml_inventory_transp. Verifique que su documento es válido ante su DTD.

Inventario reducido de una compañía hipotética de transportes

Entidades XML [tema opcional]

Las entidades "permiten al documento dividirse en varios objetos de almacenamiento y son herramientas importantes para volver a utilizar y mantener el texto... Una entidad es como una abreviatura y se utiliza como una forma corta de algunos textos. La abreviatura se llama nombre de la entidad y la forma larga contenido de la entidad. El contenido puede ser tan 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 los caracteres 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:

]]>

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 entidades analizables (parsed entities). Si el contenido de la entidad es código ajeno a XML (como imágenes o texto puro) que no debe analizarse, se denomina entidades no analizables. Las entidades no analizables terminan en NDATA seguido por un indicador del formato, como ocurre con cedula en el xml_entity_examples. 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 tanto debe proveerse un URL hacia ese recurso precedido por la palabra SYSTEM o PUBLIC, como ocurre con cap01 y cedula en el xml_entity_examples. Mientras que el contenido de las entidades internas está escrito en la misma declaración de la entidad entre comillas, como ocurre con adn y frase en el xml_entity_examples.

Reciben el nombre de entidades generales aquellas que se pueden referir en cualquier lugar del documento XML, como ocurre con &adn; del xml_entity_examples y las entidades predefinidas, como & que son declaradas por el procesador XML. Las entidades que sólo se pueden referir dentro del DTD se conocen como entidades parámetro. Es decir, son de uso exclusivo del DTD y no se pueden referir desde el documento XML. Se declaran anteponiendo un % y se referir usando la notación %IdEntidad; en lugar de &IdEntidad; como ocurre con %SectionType; en las líneas 1 y 40 del xml_dtd_book.

no tienes una solución sos parte de lo que criticas">


]]>

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 identificadores públicos (PUBLIC).

Los identificadores de sistemas utilizan la palabra clave SYSTEM y se refieren a un objeto por su localización utilizando un URI (Universal Resource Identifier). Pueden ser direcciones absolutas o relativas a la ubicación de la entidad documento que contiene el identificador. La siguiente declaración referencia el recurso "http://www.serv.com/dir/cap02.xml":

]]>

Los identificadores públicos utilizan nombres declarados públicamente para referirse a la información. Estos nombres deben 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 permite espacios en blanco. La última parte es el lenguaje en que está escrito el recurso [Marc00]. Los dos siguientes ejemplos de declaraciones de tipo de documento emplean identificadores públicos. El primero de ellos es ficticio.

]]>

La declaración del tipo de documento web

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 y contra 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, resulta conveniente consultar la Wikipedia].

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 los tipos 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 de compatibilidad para poder desplegar páginas web obsoletas que contienen errores o "quirks", con resultados que eran dependientes del navegador. Si la declaración del tipo de documento está presente, el navegador entra en modo estándar, y si el documento es válido, el comportamiento debería ser homogéneo entre navegadores.

Existen varias herramientas gratuitas de aseguramiento de la calidad (QA, Quality Assurance)que permiten someter un documento web a un conjunto de pruebas y obtener retroalimentación de si está bien formado, se conforma al tipo de documento que declara, no tiene enlaces rotos, sus estilos son válidos y otras pruebas. Algunas de estas herramientas son las siguientes:

• W3C Markup Validation Service. Es parte del juego de herramientas de control de calidad del Consorcio Web. Permite validar un documento HTML o XHTML. Tiene soporte experimental para (X)HTML5.
• El W3C's Unified Validator (Unicorn) también del Consorcio Web, permite validar tanto un documento (X)HTML como sus estilos (CSS). Tiene soporte para CSS 3.
• Validator.nu. Un conjunto de validadores que utilizan varios esquemas (además de DTD) para aseguramiento de la calidad. Es especialmente útil para (X)HTML5.

Existen otros validadores disponibles no mencionados en la lista anterior. Un código que resulte ser válido tras someterse a varios validadores, se considerará de mejor calidad y con más garantía de funcionar apropiadamente entre navegadores.

Cuando escriba un documento HTML, almacénelo con extensión .html y los documentos XHTML con extensión .xhtml. Aunque la extensión no debería ser algo de importancia, de forma lamentable, la mayoría del software web actual se guía por este detalle en lugar de la declaración del tipo de documento (incluso los validadores del W3C). Es probable que se tenga que hacer ajustes en la configuración del servidor web para que sirva los archivos XHTML correctamente. Además Internet Explorer 8 y anteriores no despliegan páginas XHTML sino que las ofrecen al usuario para que las guarde en disco; lo cual es una muestra de la reluctancia de Microsoft por los estándares.

(X)HTML5 pretende simplificar el web de un modo pragmático. Aunque aquí se incluye el "5" en "(X)HTML5" para diferenciarlo de sus predecesores, sus autores lo llaman realmente HTML, el estándar vivo, sin ningún número de versión, y por eso no se especifica en el DOCTYPE, ni tampoco su DTD como se aprecia en la línea 1 del xhtml5_outline, lo cual hace que deje de ser una aplicación XML válida. Por esto se dice que XHTML5 no existe como un estándar. El estándar es HTML5, el cual permite utilizar tanto la notación de HTML como XML, pero sin mezclarlos. Por esto XHTML5 no es una aplicación XML como sí lo es XHTML 1.0. XHTML5 simplemente es un término para referirse al HTML5 que utiliza notación XML.

Dado que XHTML5 no es una aplicación XML, los navegadores ignorarán la declaración XML (<?xml ...?>) en la primera línea del documento, por lo cual es común omitirla, como se hizo en el xhtml5_outline. La declaración de codificación debe hacerse entonces en el encabezado con un elemento meta (línea 4) mucho más sencilla que en XHTML 1.0 (compárese con la línea 7 del xhtml_outline).

   
      
      
   
   
      
   

]]>

El elemento documento

El elemento documento o elemento raíz de un documento (X)HTML es html. 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 xmlns, el cual sirve para indicar que sus identificadores pertenecen al espacio de nombres de XHTML y así evitar que colisionen con otras especificaciones. Los demás atributos son los comunes para casi todos los elementos XHTML, mostrados en la xhtml_common_att. El elemento raíz html sólo admite dos elementos hijos: un encabezado (head) y el cuerpo del documento (body).

Encabezado del documento

El encabezado del documento (X)HTML contiene información sobre el documento mismo pero que no es considerado parte del contenido, a lo que frecuentemente se le llama "metadatos" y son útiles para los navegadores o motores de bú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 title 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 los textos más importantes y siempre debe escogerse con cuidado, tratando de que sea corto y descriptivo. Aparece en la barra de título del navegador y en los resultados de los motores de búsqueda como Google y Yahoo. Los lectores lo verán en el historial de su 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. Se escriben en forma de parejas atributo-valor con el elemento vacío meta. 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 del encabezado HTTP se puede escribir en el atributo http-equiv en lugar de name. Cuando un documento web es solicitado, el servidor web puede revisar el encabezado por estos metadatos http-equiv 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 meta, sino que permite libremente construir perfiles (profiles) de metadatos. El xhtml_header_example muestra un ejemplo de encabezado con título y metadatos comunes en XHTML 1.0. Para más detalles, revísese la especificación HTML 4.01. En versiones más recientes de (X)HTML, el W3C ha adoptado una notación más elaborada para la especificación de metadatos llamada Marco de descripción de recursos (RDF, Resource Description Framework).

   
   
   
   
   

]]>

El metadato para declarar la codificación del documento (en la línea 2 del xhtml_header_example) es tan común que en (X)HTML5 se agregó el atributo charset [que conceptualmente debió llamarse encoding] al elemento meta. De esta forma, los documentos (X)HTML5 pueden especificar la codificación de la forma compacta <meta charset="utf-8"/>, como se hizo en la línea 4 del xhtml5_outline.

Elementos de estructura en (X)HTML5

En un sitio web puede haber publicaciones de diversa naturaleza y de distintos autores: artículos, entradas de un blog, comentarios enviados por los lectores, libros, tutoriales, encuestas, noticias, etc. Para representar estas creaciones (X)HTML5 define seis elementos genéricos para amoldarse y poder describir la estructura de un documento: header, footer, nav, aside, article y section.

En (X)HTML5 el elemento header sirve para describir el encabezado de página, de un artículo o una sección. En cuanto a un sitio web, el encabezado suele contener el logotipo de la empresa o del sitio, el título del sitio, algún lema, y un campo de texto para hacer búsquedas en el sitio web, entre otros elementos. En las líneas 10 a 14 del xhtml_page_structure se muestra un encabezado de sitio web. El sobreuso que se hizo en el xhtml_page_structure del atributo id en la mayoría de elementos de estructura es opcional, pero facilita la labor de presentación (hojas de estilo) y de comportamiento (JavaScript).

El elemento footer indica el pie de página, o el pie de una sección; el cual sirve para indicar información acerca de ella, como el autor, enlaces hacia documentos relacionados (como términos de servicio, u otro menú de navegación), derechos de autor, etc. Las líneas 54 a 56 del xhtml_page_structure presentan un pie de página, cuyo texto se escribió dentro de un elemento small, redefinido en (X)HTML5 para marcar textos con restricciones legales y similares.

El elemento nav sirve para indicar un conjunto de enlaces que proveen navegación de la página misma (como una tabla de contenidos), o del sitio web mismo, como se hizo en las líneas 16 a 25 del xhtml_page_structure. Enlaces de publicidad, referencias bibliográficas, resultados de búsquedas, y similares, no deben encerrarse dentro de un elemento nav, dado a que no representan navegación dentro del sitio. El elemento nav puede contener títulos; cero, una o varias listas no ordenadas; párrafos y otros elementos.

El contenido de la página web inicia con cualquier elemento que no sea uno de los anteriores. Sin embargo, es apremiante que el autor estructure el contenido utilizando elementos article y section.

De acuerdo a la especificación oficial, el elemento article se utiliza para especificar una obra auto-contenida en un documento, página, aplicación o sitio; y es, en principio, independientemente "distribuible" o reutilizable [Laws11]. Esto implica que un artículo es un trozo de información que puede ser movido de un lugar a otro dentro de la misma página web (a un margen, por ejemplo) y mantener su sentido. Son ejemplos: una entrada de un blog o foro, una noticia, un comentario de usuario, etc. Los elementos article se pueden anidar. En el xhtml_page_structure se indicó que la página web completa es un artículo (línea 9 a 57) y el contenido propio de la página, es decir, sin considerar el encabezado, menú de navegación y pie de página, es también un artículo (línea 27 a 52).

Los artículos se dividen en secciones temáticas. Por ejemplo, un libro se divide en partes, capítulos y secciones. Cada una de estas partes se identifica con un título. El elemento section permite dividir un artículo en partes o secciones, las cuales no son independientes, sino que tienen un orden. Como es de esperar, si una sección de contenido se mueve de lugar dentro de la misma página web (a un margen, por ejemplo), perderá su sentido. En el xhtml_page_structure cada entrada introductoria hacia una parte del sitio web, fue representada como una sección (líneas 34 a 40, y líneas 42 a 48). Las secciones se pueden anidar entre sí. La especificación (X)HTML5 también permite anidar artículos dentro de secciones; y las secciones también pueden tener encabezados, elementos de navegación y pie de sección.

El elemento aside sirve para indicar contenido que no es considerado parte del contenido principal del documento, por ejemplo, publicidad, noticias, artículos relacionados, etc. Si se quiere, el menú de navegación del sitio (nav) puede escribirse dentro de un elemento aside, para indicar que no es parte del contenido principal.

   
   
   


   

      

         
         
Tres uves dobles
         
Trucos y consejos de desarrollo web
      

      

      

         
Bienvenido(a) a Tres uves dobles, un sitio web con consejos para
         crear sitios web. Todo el código aquí alojado puede utilizarlo libremente en sus propios
         proyectos. Además puede colaborar con nuevos trucos que considere útiles para otros
         desarrolladores. Los consejos en este sitio están separados en los siguientes grandes
         temas:

         

            
            
Trucos sobre XML
            
Trucos para representar información en XML. Escribir y documentar sus propios DTD.
            Hacer transformaciones con XSLT. Formatear documentos con XSL-FO. Ejemplos de API y
            DOM.
         


         

            
            
Trucos sobre (X)HTML
            
Trucos para representar contenido en HTML 4.01, XHTML 1.0 y (X)HTML5. Tipos de
            documento. Elementos de texto. Elementos de estructura. Elementos multimedia
            (imágenes, audio, vídeo).
         


         

      


      
   



]]>

Elementos genéricos de estructura

Cuando el autor quiere especificar la estructura de un trozo de información, pero no existe un elemento en el estándar (X)HTML para tal fin, debe recurrir a uno de los elementos genéricos: div o span. Nota: Los autores deben siempre preferir los elementos semánticos y recurrir a los elementos genéricos sólo en última circunstancia, cuando no existe un elemento para el fin requerido.

Según la recomendación, el elemento div carece completamente de semántica. Simplemente se utiliza para agrupar elementos hijos o texto, al cual se le puede dar algún tratamiento con los atributos comunes, como id, class, lang y title. El atributo id sirve para darle un identificador único en el documento a un elemento. El atributo class sirve para agrupar uno o más elementos con características comunes, es decir, crea una clase de elementos, de forma similar a las clases de programación orientada a objetos.

Por defecto el elemento div crea un bloque, de forma similar a los párrafos, títulos, tablas y otros elementos; que al ser colocados uno tras otros, son separados visualmente por "un cambio de línea". En algunas circunstancias, el autor necesita encerrar sólo unas letras o un trozo pequeño de texto dentro de un párrafo, dentro de un título, etc.; para darle un tratamiento especial. Este es el objetivo del elemento span, el cual carece de semántica al igual que div y es normalmente usado con los atributos class, id o lang.

Títulos de secciones

Los documentos en (X)HTML5 son divididos en partes con elementos como article y section. Por ejemplo, un libro se divide en capítulos y secciones. Tanto la obra como sus partes son identificadas con títulos (en inglés, headings). En el caso de libro, cada uno de sus capítulos, secciones, y el mismo libro, tienen un título que las identifica y distingue de las demás.

(X)HTML define 6 niveles de títulos en orden descendente de importancia h1, h2, ..., h6. El navegador u otro software podría usar los títulos del documento, por ejemplo, para construir una tabla de contenidos automáticamente. Es habitual que la primera actividad que realice un autor sea definir la estructura temática de su documento antes de empezar a escribir el contenido de cada sección.

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

El xhtml_section_headings presenta un ejemplo de cómo se pueden usar los títulos de secciones dentro de los elementos article y section para estructurar las partes de una tesis en (X)HTML5. En este ejemplo, el título de nivel 1 (h1) se usa para el título de la tesis, los títulos de nivel 2 (h2) para los títulos de los capítulos, los títulos de nivel 3 (h3) para los títulos de las secciones, y así sucesivamente.

   
   



   

      
Tesis: Representación de letras de canciones en XML
      
Maicol Yaxon <myaxon@garach.edu>

      

         
Resumen
         
Dado que no existe un estándar para representar letras[...]
      


      

         
Objetivos

         

            
Objetivo general
            
El objetivo general de este trabajo es formular una espec[...]
         


         

            
Objetivos específicos
            

               
Analizar estadísticamente los componentes típicos [...]
               
Proponer una representación XML de los componentes[...]
               
Generar tipos de documentos y esquemas de la repre[...]
               
[...]
            
         


      


      

   



]]>

En HTML 4.01 / XHTML 1.0 y versiones previas, no existen los elementos semánticos de estructura como article y section. Los autores recurrían a elementos genéricos de división del texto div o simplemente dejaban a los títulos flotar libremente entre el texto del documento, ya que el navegador asume que cada título está dentro de una sección implícita. Es decir, cuando se abre un título de igual o mayor nivel, el navegador asume que la sección anterior se debe cerrar. El uso de títulos fuera de artículos, secciones o elementos div, limita el poder de los estilos (CSS) o del comportamiento (JavaScript), y no se recomienda para documentos extensos o complejos.

Párrafos

Un párrafo en (X)HTML se escribe con el elemento p como se aprecia en el listado xhtml_paragraphs_example. Aunque en HTML es opcional cerrarlo, es recomendable siempre hacerlo. A través de hojas de estilo se puede controlar el espaciado entre párrafos, la sangría y otros formatos. No escriba párrafos vacíos <p></p> para tratar de dejar espacio en blanco en el documento. La especificación (X)HTML recomienda al navegador ignorar estos elementos. Algunos autores, entonces, fuerzan el espaciado con párrafos que consisten de espacio no separable (<p>&nbsp;</p>), lo cual es el mal uso de la estructura (los párrafos) con fines de apariencia (el estilo).

   
   




   

      
Universidad de Costa Rica

      Escuela de Ciencias de la Computación e Informática

      CI1201 - Programación II
   
   
Programación en C++

   

      
Introducción a la programación
      
La computadora es un artefacto electro-matemático que puede ejecutar[...]

      

         
Hola mundo en C++

         
Desde el libro de Kernighan y Ritchie se ha seguido la tradición del primer
         programa a mostrar sea uno simple: escribir la cadena "Hola mundo" en la
         pantalla o algún otro medio. La forma de decir "Hola mundo en C++" se aprecia
         en el siguiente código:

         


           int main()
           {
            std::cout << "Hola mundo" << std::endl;
            return 0;
           }
         ]]>]]>

      

   




]]>

A veces se quiere insertar un cambio de línea sin iniciar otro párrafo, por ejemplo, en un poema los versos se separan por cambios de línea y las estrofas por párrafos. Un cambio de línea se representa con el elemento vacío <br /> (acrónimo de break return). Algunos autores acostumbran dejar el espacio en blanco antes de la barra inclinada en las etiquetas vacías, ya que navegadores viejos que no implementan XHTML ignorarán la barra inclinada pensando que fue un "dedazo" del autor. Esta práctica ya no es necesaria.

Cuando la longitud de un párrafo excede el ancho de la ventana, el navegador inserta cambios de línea automáticos (word wrap). Cuando se quiere evitar que el navegador por esta característica separe dos palabras, estas deben separarse por un espacio no divisible (not breaking space) obtenible por la referencia de entidad  . Por ejemplo, el código (506) 905-LLAMEYA genera el texto "(506) 905-LLAMEYA". Si usted redimensiona la ventana del navegador, notará que el número de teléfono no será separado del código de país mientras se ajusta el párrafo automáticamente al tamaño de la ventana (probar en una ventana externa). La entidad   está sólo disponible en HTML. En XHTML se puede usar su equivalente  .

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 otros tipos de escritos donde el espaciado en blanco es relevante. Para esas situaciones (X)HTML provee el elemento de texto preformateado pre, el cual instruye al navegador mantener los espacios en blanco, usar una fuente mono-espaciada y desactivar el ajuste automático de línea (word wrap). La especificación recomienda a los navegadores reemplazar tabuladores por 8 espacios en blanco, lo cual muchas veces resulta molesto, por eso, es recomendable utilizar espacios en blanco en lugar de tabuladores en las secciones pre o hacer modificaciones con programación del lado del servidor o JavaScript.

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 (<, > y &), o escribir el texto dentro de una sección CDATA como se hizo en las líneas 26 a 34 del xhtml_paragraphs_example, lo cual tendrá efecto sólo si su documento es XHTML.

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

Texto estructurado

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

Los dos elementos de frase de uso más común son em y 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 a documentos técnicos. El listado xhtml_phrase_elements_example muestra el uso de algunos de estos elementos.

   Se dice que las entidades describen la estructura física
   y los elementos la estructura lógica de los documentos
   XML.
   La estructura lógica (elementos) y física (entidades) se representa dentro del
   documento 
   XML agregando el marcado, el cual
   se delimita 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. La combinación del marcado
   más los datos de carácter son el texto XML [Gold99].

]]>

Todos los elementos de frase tienen un atributo title, 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. Esto es útil para expandir el significado de las abreviaturas y acrónimos sin tener que incluir estas definiciones explícitamente en el texto cada vez que se quiere usar la abreviatura. Nótese que esto se hizo en el listado xhtml_phrase_elements_example para la abreviatura "XML" que aparece dos veces (líneas 4 y 6), lo que genera redundancia de código. Teóricamente esta redundancia se puede evitar en XHTML definiendo entidades generales en el parámetro interno del tipo de documento, sin embargo, los navegadores actuales las ignoran, por lo que la mayoría de autores prefieren hacer algún tipo de programación del lado del servidor 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:

El elemento time aparecido en (X)HTML5 permite especificar que un trozo de texto representa una fecha, una hora o ambas; lo que posibilita a los programas su procesamiento, por ejemplo, para agregar un evento a la agenda del usuario, hacer conversiones de huso horario, guiar a los motores de búsqueda a indexar la fecha correcta, etc. El contenido del elemento time permite escribir la fecha en el formato que prefiera el autor, y el atributo datetime en formato "YYYY-MM-DDThh:mm:ss.sss±HH", el cual puede ser entendido por las computadoras. Ejemplos:

Estimado cliente. Su tiquete para el vuelo LA389 del
lunes 30 de abril a las 6:45 p.m.
ha sido reservado con éxito. La hora actual de su destino, San Pedro Sula, es
8:29 p.m. Recuerde registrar este evento en su agenda.


©2012 Tali Van Airlines Group. Documento generado el
23-mar-2012 12:26:54 a.m.
]]>

5 pts. Investigue los elementos del e ins en la especificación HTML 4.01, haga un ejemplo y describa cuál es su utilidad.

5 pts. Investigue los elementos i, b, s, small y mark en la especificación HTML5. ¿Cuál es la diferencia entre em e i? ¿Cuál es la diferencia entre strong y b? ¿Cuál es la diferencia entre del y s? Si un documento (X)HTML sólo debe representar contenido y no presentación ni comportamiento ¿por qué el estándar (X)HTML5 los mantiene?

Listas

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

   
Puesto: Desarrollador web
   
Requisitos:
   

      
Conocimiento de estándares web
      
Programación en PHP o JSP
      
DBMS libres: PosgreSQL, MySQL o SQLite
      
Afiliado al colegio respectivo
   

   
Procedimiento de reclutación
   

      
Llenar la fórmula RE-TI-C-2348 a mano
      
Presentarla en las oficinas centrales
      
Si es seleccionado:
         

            
Presentarse a realizar el examen RE-TI-E-23
            
Presentarse a realizar el examen RE-LG-E-02
            
Si es seleccionado: presentarse a trabajar
         
      
   

   
Definiciones
   

      
DBMS
Database Management System
      
RE-TI-C-2348
Fórmula de cualidades para TI
      
RE-TI-E-23
Examen de tecnologías web
      
RE-LG-E-02
Examen básico de inglés
   

]]>

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 lista se escribe dentro del elemento li (list item). 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. El atributo start del elemento ol en (X)HTML5 permite indicar el número con el cual se inicia el conteo, y si no se incluye se asume que es 1.

Las listas no ordenadas se escriben con el elemento ul (unordered list). Sirven para indicar una lista de ítemes que no siguen un orden inherente. Visualmente se anteceden con una viñeta circular que puede cambiarse con estilos a rectá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 parejas té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).

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="nombre_ancla" />

Para hacer referencia a un ancla, se crea un enlace y se le indica al navegador que su destino es el nombre del ancla pero antecedido 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.

Introducción


DTD
]]>

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

Tabla de contenidos

   Introducción

   Arquitectura web





Introducción


Arquitectura web
]]>

Ventana objetivo

Cuando el usuario hace click en un enlace, el navegador reemplaza el documento con el recurso referido. A veces este comportamiento no es el deseado. El atributo target 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 a ese nombre. Si se usa "_blank" como valor del atributo target, el recurso será siempre cargado en una ventana o pestaña nueva del navegador.

<a href="destino.url" target="ventana_objetivo">contenido del enlace</a>

El atributo target está disponible en todas las variantes de (X)HTML, excepto XHTML 1.x strict, debido a que especifica comportamiento, lo cual es responsabilidad de JavaScript.

Acceso con el teclado

Los navegadores permiten acceder a los enlaces con el teclado, lo cual es importante para aquellos en modo texto o para personas 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 atributo accesskey, el cual recibe sólo un carácter, por ejemplo, accesskey="K". El navegador habilitará alguna combinación de teclas, como Ctrl+K ó Alt+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:

<a href="#xhtml_keyboard_shortcuts" accesskey="k">Acceso con el teclado (Ctrl+K)</a>

Desdichadamente el comportamiento de los atajos del teclado son dependientes del navegador, y en algunos pueden no funcionar 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 tabindex="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 para este atributo, el navegador seguirá el orden de aparición en el documento.

Tamaños de imagen

Cuando el navegador está cargando un documento web y encuentra una etiqueta <img src="imagen.url" alt="algún texto" /> 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 que la imagen llegue y que el visitante empiece a leer el documento. Cuando finalmente la imagen es recibida, el navegador la insertará en el lugar donde encontró el elemento img correspondiente, desplazando el texto que se encuentre debajo. Esto es molesto para el lector, en especial si el documento tiene un considerable número de imágenes o son de gran tamaño o ambas.

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

<img src="imagen.url" alt="texto alternativo" width="320" height="280" />

Si el valor indicado en los atributos ancho o alto de img no coincide con el tamaño real de la imagen, el navegador la escalará. También se puede especificar en ellos un porcentaje de la ventana, algo como width="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 de una o varias imágenes y otros detalles se pueden controlar con estilos, lo cual es muy útil para un conjunto grande de imágenes que comparten las mismas dimensiones.

Formatos de imágenes

Aunque existen muchos formatos de imágenes, sólo unos pocos se pueden utilizar en la web. La tab_formatos_imagen muestra una comparación de los formatos más soportados entre los navegadores actuales. Es tentador publicar imágenes de alta 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 para abandonarla. El autor debe hacer un balance entre la calidad de la imagen y su tamaño en bytes. Por esto es importante que conozca la diferencia entre los formatos disponibles y cómo ajustar este balance.

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

Una fotografía tiene millones de colores o grises. Se obtienen por cámaras digitales o escáneres. Ambos dispositivos no proveen información de transparencia. El formato más recomendable para fotografías es el JPEG, creado en 1992 por el Joint Photographic Experts Group. Es un algoritmo de pérdida de calidad que trata de descartar detalles que el ojo humano no 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 carga del documento.

Una ilustración es una imagen, normalmente en dos dimensiones, que contiene texto o lo complementa. Suelen contener diagramas o dibujos hechos en un programa de cómputo, en contraposición a los obtenidos por una cámara o escáner. La cantidad de colores de una ilustración suele ser reducida. El formato PNG o SVG (Scalar Vector Graphics) son aptos para ilustraciones, la diferencia 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 un color codificado en forma numérica. "Redimensionar" a menor tamaño una imagen escalar provoca que ésta se deforme en especial si no se mantiene su proporción. Si se agranda una imagen escalar provocará que los pixeles se propaguen a las celdas 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 como posición y tamaño son los que se almacenan en el archivo. "Redimensionar" una imagen vectorial a cualquier tamaño significa reajustar las posiciones de las figuras geométricas y volverlas a pintar, lo que provoca que la imagen siempre se vea 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 que tener en cuenta que, aunque SVG es un estándar abrigado por el W3C, su implementación en los navegadores actuales es parcial y quizá ausente en aquellos de dispositivos móviles, debido a que su despliegue requiere de mayor poder de cómputo que los otros formatos. Algunos sitios web como Wikipedia usan SVG, pero si el navegador no soporta este formato, el servidor web enví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 (Graphics Interchange Format), que permite animaciones escalares muy sencillas y limitadas a 256 colores. Si se requiere animaciones vectoriales, el autor podría programar un elemento canvas con JavaScript, o tecnologías propietarias como Adobe Flash. Si se requiere animaciones de más de 256 colores, se trata de un video y estos pueden incrustarse con objetos como se estudiará en la sección Objetos multimedia.

Indiferentemente de si se utilizan imágenes escalares o vectoriales, el autor debe conseguir reducir el tamaño tanto como se 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ámetros y ver el efecto en tiempo real en la visualización de la misma. Es importante que el autor guarde además la imagen original en 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: Photoshop para imágenes escalares e Illustrator para imágenes vectoriales. Como opciones libres a estos programas se puede citar Gimp e Inkscape respectivamente.

5 pts. Suponga que está escribiendo un manual de usuario en (X)HTML ¿Qué formato de imagen utilizaría para una captura de pantalla (screenshot) del programa en cuestión? Justifique la respuesta.

Figuras

Cuando se inserta una imagen, vídeo, un listado de código u otro objeto en un documento, es muy común agregar algún texto que dé una explicación corta, los derechos de copia u otros detalles del objeto. Este texto, a veces conocido como leyenda, rótulo o título del objeto (caption), forma junto con el objeto una unidad; es decir, deben estar juntos en el documento. Por ejemplo, si la imagen se mueve de lugar en el documento, el rótulo debe viajar con ella, de lo contario pierde su sentido. (X)HTML5 provee el elemento figure para unir una imagen o cualquier objeto con su leyenda, la cual se indica con el elemento figcaption como se muestra en el xhtml_figure_example.

   
   

]]>

En caso de proveerse una leyenda con el elemento figcaption, se convierte en opcional el proveer un texto alternativo con el atributo alt de img, como ocurrió en la línea 2 del xhtml_figure_example. Es importante reiterar que el elemento figure no está limitado sólo a imágenes, si no a cualquier objeto o trozo de texto que necesite una leyenda.

Icono de favoritos

Se ha convertido en una práctica común proveer un pequeño icono que ayuda al visitante a identificar la página web. A este icono se le suele llamar icono de favoritos ó simplemente favicon (contracción de favorites icon), porque el navegador lo almacena junto a los favoritos, y lo despliega en la barra de direcciones o en las pestañas. Usualmente el mismo icono se utiliza 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 de sitio web (web site icon).

El favicon es un archivo PNG, o uno con extensión .ico que puede contener imágenes de varios tamaños. Normalmente son de 16x16 pixeles y utilizan fondo transparente. El documento web debe indicar el favicon en su encabezado (head) utilizando el elemento vacío link, el tipo de imagen y su URL, como se muestra en xhtml_favicon_inclusion. A modo de conveniencia véase Wikipedia para otros tipos de imágenes, enlaces y restricciones a la hora de declarar favicons.

   ...
   

]]>

Ubicación de las reglas de estilo

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

1. En el elemento mismo, con el atributo style.
2. En el encabezado del documento web, con el elemento style.
3. En un archivo .css externo el cual se liga al documento con el elemento link.
4. En una hoja de estilos externa provista por el visitante (no por el autor).
5. En la implementación del navegador web.

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 del autor. Por eso, se aconseja al autor declarar las reglas de estilo siempre en una o varias hojas de estilos .css externas al documento web.

El listado css_locations 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 .css que contiene sólo una regla y se adjunta al documento web con el elemento link 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.

   
      
      
      
      ...
   
   
      
Lorem ipsum ad his scripta blandit partiendo...
   



p { color: green }
]]>

El atributo media del elemento link indica si las reglas de estilo aplican a un medio específico, como la pantalla (screen), la impresora (print), programas de lectura sintetizada (aural), computadoras de mano (handheld), televisores (tv) y otros. En el ejemplo anterior, un navegador cargará la hoja styles1.css (línea 4) y los aplicará al documento web para ser visualizado en la pantalla. Si el usuario decide imprimir el documento, el navegador cargará styles2.css (línea 5) y los aplicará en la copia que enviará a la impresora. El atributo media es opcional, y si no se especifica en un elemento link, se asume que esa hoja de estilos aplicará a todos los medios, lo que equivale a darle el valor media="all". El atributo media 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 style dentro del encabezado (head) del documento (X)HTML, como se aprecia en las líneas 6 a 8 del listado css_locations. Nótese que el encabezado head admite combinar hojas de estilo externas y elementos style en cualquier orden. La especificación CSS 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 style del encabezado.

El tercer lugar donde se puede especificar reglas de estilo es en el atributo style del elemento mismo, como se hizo en la línea 12 del listado css_locations. En este caso, todas las propiedades aplicarán únicamente a dicho elemento por lo que no es necesario especificar un selector, ni agrupar las propiedades dentro de llaves { }.

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 cual se 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 mayor especificidad 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, el principio de herencia, el cual indica que ante la ausencia de una regla de estilo, el navegador debe aplicar el estilo del elemento padre. No todos las propiedades son heredables por defecto. Por ejemplo, la fuente lo es pero no el margen. De esta forma, al asignar la fuente al elemento body, todos los párrafos la heredan, lo cual es deseable; pero si se asigna un margen 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 o pesos a cada regla de estilo siguiendo un cálculo propuesto en la especificación CSS, que cualitativamente se puede resumir en lo siguiente:

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

A modo de ejemplo, el listado css_location_doc muestra un documento web que tiene dos párrafos y estilos definidos en tres lugares: una hoja de estilos externa (cascading1.css) enlazada en la línea 4; un elemento style en el encabezado (líneas 5 a 7), y un atributo style 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.

   
   
   



   
Este es el primer párrafo. Ninguna regla de estilo para p
   especifica la fuente, por lo que hereda la fuente de su elemento padre
   body. Aunque hay una hoja de estilos externa que especifica que el color
   del texto de los párrafos debe ser rojo, éste es verde azulado
   porque hay una regla en el encabezado del documento, que está más cerca de este
   párrafo.

   
Este es el segundo párrafo. Tiene un atributo de estilo que
   sobrescribe el color del texto a verde, ya que por
   especificidad está más cerca del elemento. Ninguna regla de estilo formatea
   la separación vertical entre párrafos, por lo que se aplica la que el navegador tenga
   implementada internamente.


]]>

body
{
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 2.5cm;
}

p { color: red; }

La fuente es una propiedad heredable de acuerdo a la especificación CSS. La mayoría de navegadores asumen una fuente con serifas, como Times 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 Verdana, que es por el contrario una fuente sin serifas (sans-serif); cualquier regla del autor tiene más prioridad que el valor por defecto del navegador y por ende el navegador debe usar Verdana para formatear el texto del body, el cual es vacío (body no tiene texto directamente, sino dos elementos p hijos).

Al desplegar el primer párrafo (línea 11), el navegador no encuentra una regla de fuente para dicho elemento de párrafo. Como es una propiedad 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 (margin) 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 margin: 2.5cm, el navegador la aplica al elemento body, haciendo que el margen del documento sea de 2.5 centímetros. Sin embargo, al no ser una propiedad heredable, el navegador no aplica un margen de 2.5 centímetros a los pá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 body y asume el por defecto del navegador, que es negro. La regla p { color: red; } en la hoja de estilos cascading1.css, indica al navegador que pinte todos los párrafos en rojo. Pero en la línea 6 del documento web del listado css_location_doc compite por la misma propiedad: establecer el color de los párrafos en verde azulado (teal). Estas dos reglas están en conflicto, y ganará la que tenga mayor especificidad en el selector, sin embargo ambas tienen el mismo selector; y en tal caso el navegador deberá aplicar la que aparezca de último de acuerdo al principio de ubicación, y por ende, los parrafos aparecerán en verde azulado.

Al pintar el segundo párrafo que inicia en la línea 18 del listado css_location_doc, el navegador encuentra una regla para la propiedad color en su atributo style. De acuerdo al principio de especificidad esta regla tiene la mayor prioridad y por ende, el segundo párrafo aparecerá en verde simple en lugar de verde azulado.

El operador @

Código JavaScript en el elemento script

Se puede escribir código JavaScript en el contenido del elemento script, el cual debe ser hijo directo de head o body. El siguiente ejemplo muestra los cuadrados de los primeros 20 números naturales:

   
Cuadrados naturales
   

]]>

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 elemento script, ejecuta su código.

En el ejemplo del js_square_list_1, se invoca al método write() del objeto document que representa al documento ante JavaScript. El método document.write() recibe una lista de valores separados por coma y su salida es insertada como código HTML inmediatamente después del elemento script que lo invoca, es decir, su invocación altera la estructura del documento. Una vez que el script ha terminado su ejecución, el navegador continúa procesando el resto del documento como de costumbre, y procesará tanto el código provisto por el autor en el documento original como el código insertado con document.write() tras ejecutar el script.

Existen diferencias si el código JavaScript está en un documento HTML o XHTML. En XHTML el objeto document no dispone de un método write(), ya que XML prohíbe modificar el documento mientras éste se esté cargando [W3C]. Incluso en HTML, el uso de document.write() se considera ahora una pobre práctica de programación, sin embargo se utilizará en la primera parte de este capítulo por ser fácil de comprender. Si se incrusta código JavaScript en un documento XHTML que tiene caracteres especiales como menor que (<), mayor que (>), o ampersand (&), se debe encerrar en una sección CDATA:

]]>

Como se puede deducir del js_square_list_1, JavaScript interpreta el texto entre apóstrofes ('') y entre comillas ("") como cadenas de caracteres. Las variables no se declaran precedidas por su tipo de datos, sino por la palabra reservada var. Y el ciclo for tiene la misma sintaxis de C.

El elemento script tiene cinco atributos opcionales: type, src, charset, defer y async. El atributo type indica el lenguaje de programación utilizado por el script. Hasta la fecha sólo existe un lenguaje reconocido: JavaScript, y es el considerado por defecto en HTML5, por lo que el programador puede omitirlo, como se hará en el resto de este capítulo. Los demás atributos se estudiarán en la próxima sección.

Código JavaScript en un archivo externo

El elemento script permite escribir código JavaScript en su contenido, pero el Consorcio Web recomienda sacar el comportamiento del documento web a un recurso reutilizable, por convención, un archivo con extensión .js. Este es el segundo lugar donde se puede escribir código JavaScript. El mismo elemento script permite hacer la inclusión del archivo externo con el atributo src. El ejemplo del js_square_list_2_xhtml tiene el mismo efecto que el ejemplo del js_square_list_1. Es importante resaltar que un script debe tener contenido o un recurso externo en el atributo src, pero no ambos, de lo contrario generará un documento inválido en (X)HTML5.

   
Cuadrados naturales 2
   

]]>

\n');
for ( var n = 1; n <= 20; ++n )
   document.write('
', n, '2 = ', n * n, '
\n');
document.write('\n');
]]>

En HTML la etiqueta de cierre </script> es siempre requerida, aunque el contenido del script sea vacío; es decir, siempre se deben escribir de la forma <script src="archivo.js"></script>. En XHTML se puede tener una etiqueta vacía de la forma <script src="archivo.js"/>.

Cuando el código de un script se encuentra en un archivo externo, el atributo charset permite indicar la codificación empleada del archivo .js si ésta difiere de la codificación del documento (X)HTML. Los atributos defer y asinc permiten controlar en qué momento se debe ejecutar el script, como se indica en la js_script_defer_async.

]]>

]]>

]]>

Los atributos defer y async se pueden especificar únicamente cuando el script externo no haga uso de document.write(); ya que una invocación a este método obliga al navegador detener el cargado del documento, esperar a que el script termine de generar contenido, analizarlo (parse) y luego continuar con el resto del documento.

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 como onload, onmouseover y onclick, como se ilustra en el js_intrinsic_events_ex1. Este código JavaScript es ejecutado únicamente si el evento es accionado. Los eventos intrínsecos se estudiarán más adelante en este capítulo.

   
Eventos en JavaScript
   Un botón!

]]>

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, en el destino de un enlace o cualquier otro lugar donde se pueda escribir un URL; con el pseudoprotocolo javascript:, 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:

javascript:5%2
javascript:x = 3; (x < 5) ? 'x is less' : 'x is greater'
javascript:d = new Date(); typeof d
javascript:for(i=0,j=1,k=0,fib=1; i>5; i++,fib=j+k,k=j,j=fib) alert(fib);
javascript:s=''; for(i in navigator) s+=i+':'+navigator[i]+'\n'; alert(s);

El pseudoprotocolo javscript: ha caído en desuso, y algunos navegadores como Chrome y Safari los ejecutan pero no reemplazan el documento actual por el resultado de la expresión, lo que produce la sensación de ser ignorados.

Números

JavaScript no hace diferencia entre números enteros y de punto flotante. Todos son representados internamente como punto flotante de 64bits (IEEE 754). Las constantes literales numéricas de JavaScript siguen las mismas convenciones de C, excepto los números octales que no son parte de ECMAScript. La js_numeric_literals muestra algunos ejemplos de constantes literales numéricas.

Cuando un valor flotante llega a ser más grande que el más grande de los representables, se almacena con el valor especial Infinity 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 isNaN(). Otra función práctica es isFinite(), que prueba si un número no es Infinite y no es NaN. A continuación una lista de constantes numéricas especiales:

• Infinity. Valor especial usado en lugar de un número gigante que no cabe en un double 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 parseInt("cinco").
• Number.MAX_VALUE. El número más grande representable en un double de 64 bits.
• Number.MIN_VALUE. El número decimal más pequeño (cercano a cero) representable en un double de 64 bits.
• Number.NaN. Igual a NaN.
• Number.POSITIVE_INFINITY. Igual a +Infinity.
• Number.NEGATIVE_INFINITY. Igual a -Infinity.

Cadenas de caracteres (strings)

Las cadenas literales en JavaScript se encierran entre comillas dobles o simples y se pueden anidar estos separadores dentro de la cadena. Ya que es común escribir código HTML dentro de JavaScript y viceversa, es conveniente que el desarrollador adquiera el hábito de uniformar las comillas para cada cual. El siguiente ejemplo utiliza comillas dobles para valores de atributos de (X)HTML y comillas simples para strings en JavaScript:

Thanks]]>

Igual que en C/C++, JavaScript emplea secuencias de escape iniciadas en backslash (\) para anular el efecto de un carácter especial del lenguaje de progamación, 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). Se puede utilizar el backslash frente a un cambio de línea para continuar un string en varias líneas si el intérprete de JavaScript soporta EcmaScript 5, lo cual ocurre en la mayoría de navegadores modernos. El js_newline_scape muestra una cadena multilínea.

  var str = 'Cada una de estas líneas\n\
    tiene dos cambios de línea\n\
    el primero es parte del string,\n\
    el segundo es ignorado por JavaScript.'

  str = str.replace(/\t/g, '');
  document.write('
', str, '
');

]]>

La línea 7 del js_newline_scape emplea expresiones regulares para quitar los tabuladores que son parte del string, y el resultado es asignado al string mismo. Esta asignación debe hacerse obligatoriamente si se quiere reflejar el cambio en el string original, ya que todos los string en JavaScript son inmutables, es decir, ninguna operación puede modificar los caracteres de un string ya que son de sólo lectura.

En JavaScript las cadenas de caracteres o strings son un tipo de datos atómico, no un arreglo de caracteres. 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 str.charAt(i) permite obtener un string con el carácter que está en la posición i de str, 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 visitorName = 'Chema';
var str = 'Bienvenido ' + visitorName;       // concatenación de textos
var len = str.length;                        // longitud de cadena
var lastChar = str.charAt(str.length - 1);   // obtener un carácter de la cadena
var sub = str.substring(6, 4);               // obtiene 'nido'
var i = str.indexOf('e');                    // la posición de la primera letra 'e' en str (2)
var dbg = 'i = ' + i;                        // concatenación con conversión, genera 'i = 2'

El operador de suma (+) cuando alguno de sus operandos es una cadena, hace concatenación. En ECMAScript 5, el operador [] permite acceder a un carácter específico del string de la misma forma que el método str.charAt(). Debe tenerse claro que ambos retornan un nuevo string con el carácter solicitado, por lo que el original no se puede modificar.

Conversiones entre números y strings

Cuando un número aparece en un contexto donde se requiere un string, JavaScript lo convierte automáticamente. Por ejemplo, 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, como se hace en la línea 3 del js_number_to_string_operator_plus.

', text, '
\n');]]>

Las conversiones explícitas se pueden hacer con el constructor String(numero), y varios métodos de la clase Number: numero.toString(base), numero.toFixed(decimales), numero.toExponential(decimales) y numero.toPrecision(decimales). Ejemplos:

En la dirección opuesta, 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 como concatenación. El constructor Number(str) convierte el string str en un número, siempre que str tenga formato de número en base 10 y no inicie con espacios en blanco. Las funciones globales parseInt(str,base) y parseFloat(str,base) son más flexibles, y asumen que str está en base base (10, si se omite) y lo convierten en un número entero o real respectivamente. Ejemplos:

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 como segundo parámetro de parseInt(). Si no se puede convertir a un número, estas funciones retornan NaN.

Booleanos

Los valores booleanos sólo pueden contener los valores literales false o true. Cuando se usa un booleano en un contexto numérico, se convierten automáticamente a los valores respectivos 0 y 1. Si se usan en un contexto string, JavaScript los convierte implícitamente a las cadenas "false" y "true". Los valores especiales NaN, null, undefined y la cadena vacía ("") siempre se convierten a false; todos los demás a true (como Infinity). Para hacer explícita la conversión, es recomendable emplear la función constructora Boolean():

var x_as_boolean = Boolean(x);

Funciones

El programador puede declarar sus propias funciones con la palabra reservada function, 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 de objetos, arreglos, y pasarse por parámetros en una forma más natural que en C/C++. Cuando una función se asigna a un objeto como un miembro, recibe el nombre especial de método. En caso de asignarse a una variable, puede omitirse el nombre de la función, lo que en JavaScript se llama función literal o función lambda en homenaje al lenguaje Lisp que fue uno de los primeros en permitir funciones sin nombre:

Una tercera forma de definir una función es pasar sus argumentos y cuerpo como strings a la función constructora Function(), lo cual es poco usado e incluso, menos eficiente. Cuando el valor de una variable es una función, se puede invocar ésta usando el operador paréntesis () tras el nombre de la variable, como se hizo en la línea 11 del js_function_declaration_types con square2.

Objetos

Un objeto es una colección de valores nombrados, que usualmente se les refiere como propiedades, campos o miembros del objeto, y se les accede utilizando el operador punto. Por ejemplo:

image.width
image.height
document.myform.button
document.write("write es un método: una propiedad cuyo tipo de datos es una función");

El operador punto permite acceder a las propiedades utilizando identificadores. Pero JavaScript permite también usar cadenas de caracteres para acceder a las propiedades, con el operador corchetes []. Esta segunda notación es mucho más flexible ya las cadenas de caracteres pueden ser el resultado de evaluar una expresión. De esta forma, el operador corchetes permite emplear los objetos de JavaScript como arreglos asociativos, también llamados mapas (maps) o tablas de dispersion (hash). Ejemplos:

image["width"]
image["height"]
document["myform"]["button"]
document["write"]("write es un método: una propiedad cuyo tipo de datos es una funció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 (garbage collector), de tal forma que ahorra al programador la responsabilidad de liberar la memoria de cada objeto creado.

En la línea 4 del js_new_operator el objeto point se creó como un objeto vacío, y sus propiedades se fueron agregando luego con el operador de asignación (líneas 5 y 6). Existe una notación para definir objetos literales, con o sin propiedades, útil para inicializaciones:

Las llaves {} en una sección de declaración de variables (var) de JavaScript indican la creación de un objeto literal. Los nombres de las propiedades pueden declararse como identificadores (como se hizo con property1 en js_literal_object_notation) o como strings (como se hizo con "property2" en js_literal_object_notation). 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. Cada propiedad debe separarse por una coma, y no por punto y coma. Las declaraciones de objetos literales se pueden anidar como se hizo con rectangle en el js_json_ex1.

La notación presentada en el js_json_ex1 para escribir objetos literales, es importante, y recibe el nombre de JavaScript Object Notation (JSON). Es ampliamente usada para representar datos y funciones que deben ser intercambiados entre el servidor web y el navegador, en bases de datos orientadas a documentos, y un número creciente de tecnologías. Más adelante se completará esta notación para representar arreglos.

Cada vez que JavaScript evalúa un objeto literal, se crea un objeto diferente, debido a que los valores de las propiedades pueden ser expresiones que cambian de una evaluación a otra, por ejemplo, en un ciclo. El js_literal_objects muestra un programa JavaScript que construye una tabla (X)HTML con una lista de personas ficticias generadas aleatoriamente a partir de un arreglo de nombres y apellidos. El programa consta de dos declaraciones de variables globales, cuatro declaraciones de funciones y una invocación de función (línea 37). Al ser invocada, la función imprimirPersonas() recibe el número deseado de personas y por cada una de ellas invoca a crearPersona(), la cual crea un objeto literal (líneas 13 a 17), lo almacena en una variable local, y luego retorna una referencia a dicho objeto. La función imprimirPersonas() recibe el objeto creado (línea 33) y lo pasa por parámetro a imprimirPersona() quien genera la línea correspondiente en la tabla. Es importante notar que en cada iteración del ciclo la evaluación del objeto literal (líneas 13 a 17) genera una persona distinta, y no el mismo objeto, incluso aunque el valor de sus propiedades no cambiaran.

', numero, '',persona.nombre,
      '', persona.edad, '', persona.ingreso, '');
}

// Crea e imprime en una tabla (X)HTML la cantidad solicitada de personas aleatorias
function imprimirPersonas(cantidad)
{
   document.write('');
   for ( var i = 1; i <= cantidad; ++i )
      imprimirPersona( crearPersona(), i );
   document.write('');
}

imprimirPersonas(300);
]]>

Si un objeto se emplea en un contexto booleano, se traduce a true si el objeto no es null. Si un objeto aparece en un contexto string se invocará su método toString() para hacer la conversión. Si un objeto aparece en un contexto numérico, JavaScript invocará valueOf() para hacer la conversión. El desarrollador puede sobrescribir estos métodos en sus propios objetos, lo cual es una práctica recomendada de programación.

Arreglos

En JavaScript un arreglo es una colección de datos enumerados. Se acceden con un índice entero, basado en 0, escrito entre corchetes tras el nombre del arreglo. El siguiente ejemplo obtiene el ancho en pixeles de la segunda imagen en el documento:

document.images[1].width

Los arreglos pueden tener datos heterogéneos, de cualquiera de los 7 tipos de datos de JavaScript. Así un elemento del arreglo puede contener otro arreglo. 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 Array(N) se creará un arreglo con N elementos indefinidos. La propiedad length permite acceder al número de elementos en el arreglo. 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] = "JavaScript";                // Un elemento es insertado en la posición 1
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]
console.log(a.length);              // Imprime la cantidad de elementos en el arreglo: 7

var b = new Array(1.2, "JavaScript", true, { x:1, y:3 });
console.log(b.length);              // 4 elementos

var c = new Array(10);              // Arrreglo de 10 elementos indefinidos
console.log(c.length);              // Imprime 10 y no 1

JavaScript permite crear arreglos literales, preferiblemente utilizados para inicialización, y son una lista de valores separados por comas dentro de corchetes, que se asignan secuencialmente empezando en 0. Los elementos también pueden ser indefinidos lo cual se logra omitiendo el valor entre comas:

var b = [ 1.2, "JavaScript", true, { x:1, y:3 } ];

var matrix = [[1,2,3], [4,5,6], [7,8,9]];           // matrix[2][1] == 8

var base = 1024;
var table = [base, base+1, base+2, base+3];

var sparseArray = [1,,,,5];

Valores especiales

El valor especial undefined indica que una variable u objeto fue declarado pero nunca se le ha asignado un valor, y en tal caso, JavaScript la inicializa con el valor especial undefined. Si una función no retorna un valor, JavaScript asume undefined. Si una función se invoca con menos parámetros de los esperados, éstos últimos recibirán el valor undefined. Si lo desea, el programador puede asignar explícitamente undefined a una variable.

El valor especial null se utiliza para indicar que un objeto sí está declarado e inicializado pero ningún otro valor de su dominio aplica momentáneamente. Aunque ambos, undefined y null sirven para indicar ausencia de valor, undefined debería considerarse como una indicación de error porque un valor se esperaba y no fue provisto; mientras que null como una natural indicación de que una variable no tiene valor. Por ejemplo, si al extraer el último elemento de un arreglo con arr.pop() se obtiene undefined, el programador debe considerar que trató de extraer un elemento de un arreglo vacío; pero si arr.pop() retornó null, el programador sabrá que el arreglo tenía elementos y el último era precisamente el valor null.

Objetos especiales

El lenguaje de programación JavaScript provee varios objetos útiles: Date, RegExp, Boolean, Number y String. El objeto Date sirve para obtener y manipular fechas u horas, como se ilustra en el js_date_object.

 25 )
   {
      christmas.setFullYear( now.getFullYear() + 1 );
      text = 'la próxima ';
   }

   // Convertir la cantidad de milisegundos que faltan para navidad en dias
   var dias = (christmas.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
   text = 'Faltan ' + dias.toFixed(0) + ' días para ' + text + 'navidad';
}

document.write('
', text, '
\n');
]]>

El objeto especial RegExp permite manipular expresiones regulares en JavaScript, siguiendo la misma notación de Perl. [Contenido pendiente: este tema se cubrirá en el futuro].

Los 7 tipos de datos de JavaScript pueden dividirse en dos grupos: valores primitivos (números, booleanos, strings y valores especiales (undefined y null)), los cuales no pueden tener métodos; y los valores objeto (objetos, arreglos y funciones), los cuales sí pueden tener métodos. Como se dijo, ningún valor primitivo en JavaScript tiene métodos, sin embargo, se puede saber la longitud de un arreglo o convertir un número en un string con métodos, por ejemplo:

var longitud = 'ácido desoxirribonucleico'.length;
var num = 777;
var bin_str = num.toString(2);

Esto es posible ya que JavaScript define tres clases correspondientes a cada uno de los tipos de datos primitivos, llamadas wrapper objects: Number, String y Boolean. 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 dato primitivo, invoca el método y finalmente destruye el objeto temporal. Es decir, cuando se escribe algo como

var str = "Hola mundo!";
var len = str.length;

La propiedad length no proviene del string str, sino de un objeto temporal String inicializado con str. Nótese que el objeto String contiene una copia del texto original, y después de usarse, se desecha. Este comportamiento también aplica para los datos primitivos de Number y Boolean.

Por valor o por referencia

En JavaScript algunos datos se manipulan por valor y otros por referencia cuando se copia un dato de una variable a otra, cuando se pasa por parámetro a una función y cuando se compara. Automáticamente JavaScript sigue esta regla: los valores primitivos (booleanos, números, strings y valores especiales) son manipulados por valor; los valores objeto (objetos, arreglos y funciones), son manipulados por referencia. No existe una notación especial para que el programador pueda decidir cuáles manipular por referencia y cuales por valor. Debe ajustarse a las reglas expuestas y tener los cuidados respectivos. Por ejemplo, cuando se invoca a una función, las copias y referencias simplemente se harán de acuerdo al tipo de dato enviado:

var n = 1;   // Es un número, el literal 1 se copia por valor a n
var t = n;   // t será un número, copia el valor de n. Un cambio en n no afecta el valor de t

// 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(total, value) { total += value; }

// 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
addto(t, n);

// La comparacion se hace por valor, es decir, se comparan byte a byte variables distintas
if ( t == n ) document.write('Los números son copiados');   // 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 por pará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 navidad = hoy;

// Modifica al objeto apuntado, por ende, 'hoy' tambien referirá al 25 de diciembre
navidad.setMonth(11);
navidad.setDate(25);

// Si se comparan, se hará una comparación de direcciones, y se evaluará como true
if ( hoy == navidad ) document.write('Hoy es navidad!');

// se crea otro objeto distinto pero con iguales datos
var navidad2 = new Date(navidad.getFullYear(), 11, 25);

// Esta comparacion evaluara como falsa, ya que tienen direcciones distintas
if ( navidad == navidad2 ) document.write('La navidad es universal!');


// Una funcion recibira por valor o referencia dependiendo de como se le invoque
function addDays(date, days)
{
   date.setDate( date.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(navidad, 6);

// Esta funcion no provoca el efecto deseado pero ilustra como trabajan las direcciones
function addDaysB(dateB, daysB)
{
   var tmpDate = new Date(dateB);
   tmpDate.setDate( tmpDate.getDate() + daysB );
   dateB = tmpDate; // 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én explica cómo actuar cuando no se quiere alterar datos que son pasados
// por referencia: haciendo copias
addDaysB(navidad2, 6);

Dado a que los strings son inmutables, se comportan por valor como muestra el js_string_by_value_or_reference:

Variables

Una de las primeras diferencias visibles 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 = "dieciséis";

Antes de que se pueda usar una variable, debe haberse declarado con la palabra reservada var, o JavaScript declarará una implícitamente; lo cual puede traer efectos secundarios indeseados. En ECMAScript 5 el autor puede incluir la cadena literal 'use strict';. Esta constante literal provoca que en adelante el intérprete sólo cree variables cuando están en una sección var y genere un error en otras circunstancias. La instrucción 'use strict'; además activa otras restricciones acordes a las prácticas sanas de programación, por lo cual se recomienda incluir esta cadena al inicio de todos sus programas JavaScript.

En la declaración se deben inicializar las variables, sino JavaScript lo hará con el valor undefined. Si una variable se declara dos veces en secciones var distintas y la segunda declaración tiene inicialización actúa como una simple asignación. Se pueden declarar variables en cualquier lugar donde pueda haber una sentencia, y en la primera sección de la cláusula for o for/in.

// Crea una variable i. Al terminar el ciclo i tendrá el valor 10
for(var i = 0; i < 10; ++i) document.write(i, '\n');

// No crea otra variable i, sino que reutiliza la existente
for(var i in obj) document.write(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 se le trata de asignar algo a una variable inexistente, se creará una variable global implícita. Las variables globales son visibles en 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) en cada bloque de código. 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 se declaren las variables. En el siguiente ejemplo; las variables o, i, j, k comparten el mismo alcance.

function test(obj)
{
   var i = 0;                        // i is defined throughout function
   if (typeof obj == "object")
   {
      var j = 0;                     // j is defined everywhere, not just block
      for(var k=0; k < 10; ++k)   // k is defined everywhere, not just loop
      {
         document.write(k);
      }
      document.write(k);             // k is still defined: prints 10
   }
   document.write(j);                // j is defined, but may not be initialized
}

Las variables locales ocultan las globales, y las locales tienen alcance (scope) de toda la función. Esto puede generar resultados confusos o sorprendentes. Por ejemplo:

var str = "global";
function f( )
{
   alert(str);         // Displays "undefined", not "global"
   var str = "local";  // Variable initialized here, but defined everywhere
   alert(str);         // Displays "local"
}
f( );

En la función anterior no se imprime "global" en el primer alert de la línea 4, porque se está usando la variable str local de la línea 5, la cual no ha sido inicializada aún. Este comportamiento equivale al siguiente código:

var str = "global";
function f( )
{
   var str;
   alert(str);         // Displays "undefined", not "global"
   str = "local";      // Variable initialized here, but defined everywhere
   alert(str);         // Displays "local"
}
f( );

El consejo de mantener las variables tan locales como sea posible, no aplica para JavaScript. Algunos programadores prefieren incluso declarar sus variables juntas al inicio de cada función JavaScript. Es importante que el programador tenga claro que en JavaScript una variable es global si no aparece en el cuerpo de una función, y que una variable es local si aparece en algún lugar del cuerpo de una función, no importa el nivel de anidamiento de llaves en que se encuentre.

En JavaScript una variable puede estar declarada o no declarada. Una variable es declarada si el programador lo hace formalmente en una sección var, incluso aunque no sea inicializada (en cuyo caso JavaScript le asigna el valor undefined). Naturalmente una variable no declarada es la que no aparece en una sección var. Intentar acceder a una variable no declarada es siempre un error y el intérprete podría detener la ejecución del script. Sin embargo, el comportamiento de asignar una variable no declarada depende del modo de ejecución del script. En modo estricto se considerará un error, mientras que en modo no estricto (el por defecto), JavaScript creará una nueva variable global, le asignará el valor, y a partir de ese momento se comportará como una variable declarada.

var x;     // Una variable declarada no inicializada. Su valor es undefined
alert(u);  // Tratar de leer una variable no declarada es un error
c = 2413;  // Asignar un valor a una variable no declarada crea una variable global

Cuando se inicia un intérprete de JavaScript, lo primero que hace antes de ejecutar el código fuente, es crear el objeto global (global object), que es un objeto como cualquier otro con la misión de almacenar todas las variables globales que se declaren en el código. Cada vez que se declara una variable global, realmente está declarando una propiedad del global object.

El intérprete de JavaScript también define convenientemente otras propiedades (variables y métodos) en el global object que son de uso común, como NaN, Infinity, parseInt(), y Math. La palabra reservada this usada en un contexto global (fuera del cuerpo de una función), referencia específicamente al global object. En el caso del navegador, el global object es además la ventana del navegador (window), y se cumple:

this == this.window == window

Si las variables globales son propiedades de un global object ¿qué son las variables locales? También son propiedades, pero de un objeto temporal llamado call object, el cual se construye en cada invocación de una función, y mantiene juntos los parámetros, variables declaradas en el cuerpo de la función y el código de la misma. Este objeto es el que impide que las variables locales sobrescriban las globales cuando tienen el mismo nombre. Dentro de una función, this hace referencia al call object en lugar del global object.

Operadores

Los operadores aritméticos de resta (-), multiplicación (*), división (/) y módulo (%) sólo trabajan con números. Si se usan con operandos de otro tipo de datos, JavaScript intentará convertirlos a números invocándoles el método valueOf(). Ya que todo número en JavaScript es un flotante, la división siempre es real, es decir, no hay división entera como ocurre en otros lenguajes. El operador + actúa como operador de suma si sus operandos son numéricos, y como el operador de concatenación si al menos uno de ellos es string.

JavaScript tiene dos operadores para determinar semejanza. El operador de igualdad (==) indica si dos valores son el mismo incluso tras hacer conversiones de tipos. El operador de identidad (===) es más estricto y dice que dos valores son idénticos si son 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  (hace conversiones)
"0" === false        // produce false (no hace conversiones)

"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 se tratan de convertir a números, y si esta conversión falla se generará NaN, que siempre se evalúa como false en un contexto booleano.

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 para conjunción (&&), disyunción (||) y negación (!). Pero guardan una diferencia. Los operandos se convierten a Boolean temporalmente para hacer la evaluación del operador, pero el resultado final del operador no es booleano, sino del tipo de datos del último operando evaluado. A esto se le puede sacar ventaja. En el siguiente ejemplo, la variable max adquirirá el primer valor numérico que no sea null 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_width || preferences.max_width || 480;

El operador ternario ?: funciona igual que en C. Los operadores de bits (bitwise operators): and (&), or (|), xor (^), not (~), shift left (<<), signed shift right (>>) y shift right with zero fill (>>>), sólo trabajan con enteros de 32 bits y su uso es 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 point = { x:1, y:1 };        // Define an object
var has_x_coord = "x" in point;  // Evaluates to true
var has_y_coord = "y" in point;  // Evaluates to true
var has_z_coord = "z" in point;  // Evaluates to false; not a property of point
var tstr = "toString" in point;  // 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ón constructora). Evalúa a true si el lado izquierdo (el objeto) es una instancia de la clase o un objeto descendiente de dicha clase.

var d = new Date();  // Create a new object with the Date() constructor
d instanceof Date;   // Evaluates to true; d was created with Date()
d instanceof Object; // Evaluates to true; all objects are instances of Object
d instanceof Number; // Evaluates to false; d is not a Number object

var a = [1, 2, 3];   // Create an array with array literal syntax
a instanceof Array;  // Evaluates to true; a is an array
a instanceof Object; // Evaluates to true; all arrays are objects
a instanceof 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", "string", "boolean", "object" (incluye los arreglos y null), "function" y "undefined" 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 value == "string" ? "'" + value + "'" : value;

Ya que typeof retorna "object" para objetos de diversa naturaleza, su utilidad se reduce a saber si su operando es o no de un tipo de datos primitivo. Para saber la clase de un objeto hay que recurrir a otras técnicas como el operador instanceof, o la propiedad Object.constructor, 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

// Una función constructora
function Point(x, y)
{
   this.x = x;
   this.y = y;
}

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 como operando. Retorna true si la eliminación fue exitosa. Algunas variables o propiedades no pueden ser eliminadas, como las declaradas en secciones var. Si el único argumento de delete 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 el operador delete no trata de eliminar memoria dinámica como ocurre en C++, lo cual se hace en JavaScript con el recolector de basura (garbage collector), no hay otra forma. El delete de JavaScript elimina una propiedad, es decir, deja de existir; no es que se le asigne undefined:

var my = new Object( );   // Create an object named "my"
my.hire = new Date( );    // my.hire refers to a Date object
my.fire = my.hire;        // my.fire refers to the same object
delete my.hire;           // hire property is deleted; returns true
document.write(my.fire);  // But my.fire still refers to the Date object

Sentencias

Una sentencia en un lenguaje de programación es un comando que al ser ejecutado produce un efecto. Un programa es una secuencia de sentencias que se ejecutan una tras otra, sin embargo, el lenguaje de programación provee estructuras de control que permiten ejecutar sentecias condicional o repetitivamente. Las sentencias en JavaScript deben terminar en punto y coma, aunque no es obligatorio. Las estructuras de control condicional son las mismas de C: if, else y switch, como muestra el siguiente ejemplo.

if (username != null)
   alert("Hello " + username + "\nWelcome to my blog.");
else if ( askname )
{
   username = prompt("Welcome!\n What is your name?");
   alert("Hello " + username);
}
else
   alert("Hello there");

La estructura de control switch es más flexible que en C. Al ser un lenguaje interpretado, los casos del switch son expresiones, no sólo constantes. El parámetro del switch se compara contra cada case utilizando el operador de identidad ===, hasta encontrar una coincidencia o el default si fue provisto por el programador.

En muchas situaciones una estructura switch puede ser reemplazada por un arreglo común o un arreglo asociativo (también conocido como tabla de dispersión (hash), o mapa (map)) si trabaja con valores primitivos; o por polimorfismo si el switch trabaja con objetos; lo cual tiene algunas ventajas como mejor mantenimiento del código. Por ejemplo, el mismo efecto del js_switch_normal puede conseguirse con un arreglo asociativo como se muestra en el js_switch_hash.

El js_switch_hash construye un objeto normal, llamado methods, cuyas propiedades son referencias a funciones, y que se pueden acceder con el operador punto, por ejemplo methods.ftp(), o con el operador corchetes methods['ftp'](). Ya que la función transfer() (línea 14) recibe el método de transferencia como un string, resulta conveniente utilizar el operador corchetes. La línea 16 pregunta si el objeto methods tiene una propiedad con el nombre del método enviado por parámetro. Si es así, accede a la propiedad con el operador corchetes [], la cual se evalúa como una función, y finalmente con el operador paréntesis () la invoca pasándole el archivo (file) por parámetro.

Dado a que las funciones transfer_method() son globales, JavaScript las declara ya como propiedades de un objeto global (window en el caso del navegador). De esta forma, el programador podría acceder a ellas directamente como se ve en el js_switch_global_object, en lugar de crear el objeto methods.

Como es de esperar, las estructuras de control para reiteración de sentencias de JavaScript son las mismas de C: for, while y do/while. Por ejemplo:

');
]]>

5 pts. Cree una función JavaScript que reciba un número n y retorne un arreglo con los primeros n números de Fibonacci. Utilice su función para crear un arreglo con los primeros 40 números de Fibonacci e imprímalos en una lista ordenada.

JavaScript provee un tipo de ciclo más, el ciclo for/in, cuya sintaxis es:

for (property_name in object)
   /* do something with */ object[property_name];

donde property_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. object 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, property_name adquiere el nombre de la propiedad y no su valor, es decir, property_name es siempre un string. Para obtener el valor de la propiedad debe entonces utilizarse el operador corchetes [] de la forma object[property_name]. Por ejemplo:

Ya que property_name puede ser una expresión arbitraria, cada vez que se itera se podría evaluar de forma diferente. Por ejemplo, este código copia los nombres de un objeto en un arreglo:

var obj = {x:1, y:2, z:3};
var arr = new Array( );
var i = 0;
for( arr[i++] in obj )
   ;

// Imprime cada nombre en el arreglo
for(i in arr) alert(i);

No hay forma de especificar en un for/in 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 es enumerable si es definida por el objeto mismo, es decir, no es heredada de otro objeto.

function genSpecialValue() { return Math.random() < 0.5 ? null : undefined; }
function genBoolean() { ... }
function genNumber() { ... }
function genString() { ... }
function genFunction() { ... }

function genObject() { ... }
function genArray() { ... }

function genRandomValue() { ... }

[
	8.1,
	false,
	{
		dicob: null,
		pavuwe:
			[
			]
		gofirute: "hekava",
	},
	function anonymous( /**/) { return "gisite"; },
],

[Contenido pendiente: Manejo de excepciones (try/catch/finally)].

Propiedades de Object

Todos los objetos de JavaScript heredan de la pseudoclase Object, y por ende, todos los objetos de JavaScript tienen las propiedades que esta pseudoclase defina. En lo siguiente se presentarán algunas de ellas. Cuando se crea un objeto siempre se guarda una referencia a la función que se utilizó para inicializar el objeto, en la propiedad constructor. Por ejemplo:

var d1 = new Date();
d1.constructor == Date    // Se evalúa como true

La propiedad constructor sirve para saber si un objeto es instancia directa de una psudoclase particular, mientras que el operador instanceof 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 instanceof Date        // true
d1 instanceof Object      // true, todo objeto es descendiente de Object
d1 instanceof Array       // false

var o1 = new Object();
var o2 = {};
o1.constructor == Object  // true
o2.constructor == Object  // true
o1 instanceof Object      // true
o2 instanceof 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 instanceof Array       // true
a2 instanceof Array       // true
a1 instanceof Object      // true
a2 instanceof Object      // true

function f1() {};
var f2 = function() {};
var f3 = new Function('', ';');
f*.constructor == Function // true
f*.constructor == Object   // false
f* instanceof Function     // true
f* instanceof Object       // true

El método toString() heredado de la pseudoclase Object es invocado automáticamente por JavaScript cuando necesita convertir el objeto en un string. La implementación por defecto retorna la cadena "[object Object]" que es poco significativa. Por ende, este método debería ser sobrescrito por clases descendientes.

El método valueOf() es invocado automáticamente por JavaScript cuando el objeto se utiliza en un contexto numérico. El programador también debería sobrescribirlo para clases propias, si su objeto puede convertirse automáticamente a un número.

Propiedades de Array

La propiedad más natural de un arreglo es length 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 tabla js_array_methods muestra una lista de métodos que cada arreglo hereda de la pseudoclase Array. Es importante resaltar que algunos de estos métodos modifican el arreglo directamente.

[1,2,3].push(9,null) // retorna 5, deja [1,2,3,9,null]

[1,2,3].pop() // deja [1,2]

[1,2,3].unshift(9,null) // retorna 5, deja [9,null,1,2,3]

[1,2,3].shift() // deja [2,3]

[1,2,3].join() // genera "1,2,3"
[1,2,3].join('; ') // genera "1; 2; 3"

[1,[8,9],2].toString() // retorna "1,8,9,2"

[1,2,3].reverse() // genera [3,2,1]

[7, 200, 81].sort() // genera [200,7,81]
[7, 200, 81].sort(function(a,b){return a-b;}) // genera [7,81,200]

[1,2,3,4,5].slice(1,3) // genera [2,3]

El operador corchetes [] se utiliza en JavaScript tanto para acceder a los elementos de un arreglo, como a las propiedades de un objeto. De esta forma, un objeto podría utilizarse para simular un arreglo, almacenando los elementos en propiedades con nombres numéricos ('1', '2', '3', ...), más una propiedad length asignada de manera acorde a la cantidad de elementos alojados en el objeto. Por ejemplo:

Cada vez que la función generarNombres() del js_array_like_objects_example es invocada, creará un objeto vacío resultado (línea 5), el cual llenará con número aleatorio de propiedades cuyo nombre son precísamente números secuenciales. En la línea 11 le crea una propiedad length y retorna una referencia al objeto. Las líneas 16 a 20 crean uno de estos objetos y lo utilizan como si fuese un arreglo normal. Sin embargo no lo es, hay algunas diferencias importantes, en especial que carece de los métodos heredados de la pseudoclase Array, y por ende el objeto tipo arreglo (array-like object) tiene poca funcionalidad para ser modificado. Es decir, se ha creado un arreglo de "sólo lectura", lo cual es una cualidad importante en JavaScript y ampliamente explotada por los navegadores para acceder al modelo de objetos del documento (DOM, Document Object Model) como se verá adelante.

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; lo cual no genera un error de sintaxis. Por el contrario, JavaScript permite al programador determinar la cantidad real de parámetros enviados, y por tanto, es fácil implementar funciones que trabajan adecuadamente con cantidades arbitrarias de argumentos.

Cada vez que se invoca una función, JavaScript llena un objeto tipo arreglo (array-like object) llamado arguments que es accesible desde la función. Como es de esperar arguments.length indica la cantidad de argumentos con que se invocó la función y la expresión arguments[i] accede al argumento i + 1 en la lista. El siguiente es un ejemplo de una función tradicional:

Como se ve en el ejemplo anterior, la invocación de min() con tres parámetros falla el resultado esperado por el llamador. La función min podría detectar esto con la propiedad length, heredada de Function, la cual indica la cantidad de parámetros especificados en la declaración de la función, tal como lo hizo el programador. Mientras que la propiedad arguments.length indica la cantidad de argumentos con que se hizo una invocación de la función. De acuerdo al js_function_arguments1, min.length siempre es dos, incluso aunque no se invoque la función nunca; mientras que el valor de arguments.length puede variar en cada invocación de la función. Cuando estas dos cantidades difieren, el programador puede saber que se ha invocado la función con menos o más argumentos de los esperados y reaccionar de alguna forma, por ejemplo:

Sin embargo, en JavaScript es fácil escribir una función que trabaje naturalmente con un número arbitrario de parámetros, como se ve a continuación.

Ya que una función es un objeto, puede tener propiedades, como la propiedad length que es creada por la pseudoclase Function, y el arreglo arguments visto anteriormente. El programador también puede crear sus propias propiedades, de la misma forma que se hace con cualquier otro objeto. Las propiedades que el programador defina tendrán el efecto de ser "variables estáticas" de la función. El siguiente ejemplo muestra una función que reporta el número de veces que ha sido invocada.

countCalls() ha sido llamada ' + ++countCalls.count + ' veces
');
}

countCalls();  // Imprime "countCalls() ha sido llamada 1 veces"
countCalls();  // Imprime "countCalls() ha sido llamada 2 veces"
countCalls();  // Imprime "countCalls() ha sido llamada 3 veces"
]]>

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 útiles.

El objetivo primordial de un navegador web es desplegar al usuario documentos (X)HTML en una ventana. De ahí nacen los dos objetos más importantes para el programador: la ventana del navegador (window), la cual contiene al documento web (document) del autor.

El objeto window 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 como propiedades del objeto global window. Así, las dos siguientes declaraciones fuera del cuerpo de una función hacen esencialmente lo mismo:

var answer = 722;
window.answer = 722;

De lo anterior se obtiene que da lo mismo escribir window.document que simplemente document. Dicho de otra forma, el objeto window es el más importante porque todos los demás objetos que existen se acceden a através de él, como se ve en la siguiente jerarquía parcial:

window
   parent
   top
   navigator
   location
   history
   screen
   document
      anchors[]
      links[]
      images[]
      applets[]
      forms[]
         elements[]

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 navegadores para 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 script, en un archivo .js externo, en atributos manejadores de eventos y en el pseudoprotocolo javascript:. Todos comparten el mismo objeto global window 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.

   
   



   
Su número de la suerte es:
   
   .


]]>

<img onclick="player.next();" onmousedown="player.forward();" src="img/button_next.svg">

Temporizadores y animaciones

El objeto global window provee varios métodos y otras propiedades para manipular el navegador, ventanas, direcciones, el historial y similares.

El método window.setTimeout(code, delay) ejecuta el código JavaScript enviado en el parámetro code, delay milisegundos después de que se hace la invocación. Retorna un identificador opaco que necesitará el programador si desea cancelar dicho temporizador con el método window.clearTimeout(). El código es invocado sólo una vez. Si se quiere que ocurra repetitivamente, el código en code debe establecer otro setTimeout() o bien usar el método setInterval(). El método timer = window.setInterval(code, period) ejecuta el código code repetitivamente en intervalos de period milisegundos, hasta que se invoque window.clearInterval(timer). Los temporizadores son muy útiles para realizar animaciones, como el siguiente reloj digital.

   
   



   
HH:MM:SS
   


]]>

En el documento del js_clock_animation, el elemento con identificador clock de la línea 11 será utilizado para desplegar la hora local del navegador. Cuando el navegador carga el cuerpo de este documento, mostrará el div como de costumbre, aplicándole los estilos que se declararon en la parte superior. Luego encontrará un elemento script y lo ejecutará como es sabido. La invocación a setInterval() en la línea 14 le indica al navegador que debe ejecutar el código updateClock() dentro de 1 segundo, cada segundo. Al ser invocada, la función updateClock() debe cambiar el contenido del <div id="clock">...</div> con el valor actual de la hora. JavaScript requiere una referencia al objeto div que tiene el identificador clock, y la consigue invocando el método document.getElementById() que se estudiará luego. Una vez obtenida la referencia al elemento div, se cambia su contenido con la hora actual en el navegador obtenida en forma de string.

El js_text_animation muestra un texto moverse de izquierda a derecha, en un ancho de 320 pixeles. Esta vez no se modifica el contenido de un elemento particular, sino su posición, lo cual es responsabilidad de la presentación, por lo que el código JavaScript debe modificar dinámicamente el estilo CSS del elemento con identificador text (línea 12). El estilo de un elemento se accede en JavaScript a través de su propiedad style, la cual es un objeto cuyas propiedades tienen el mismo nombre que las propiedades CSS en notación "camelCase" (margin, marginTop, etc.), y sus valores son siempre un string. En js_text_animation, cada vez que se invoca, animateText() calcula en la variable global textLeft la nueva posición del texto (líneas 19 y 20); y en la línea 22 asigna el resultado de este cálculo a la propiedad style.left, cuyo efecto es el mismo a haber escrito #text { left: <textLeft>px; } en CSS. Para que esto funcione, el elemento #text debe "flotar" sobre el documento, lo cual se hizo en la línea 7 indicando que su posición es absoluta.

   
   
   



   
Su nombre aquí
   


]]>

Información del navegador, la ventana y la pantalla

El objeto global window 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:

El objeto window.screen provee información sobre la pantalla del usuario, por ejemplo: las dimensiones en pixeles del escritorio (screen.width y screen.height), la profundidad de color en bits por píxel (screen.pixelDepth), el área usable del escritorio sin incluir la barra de tareas (screen.availWidth y screen.availHeight). Con estas propiedades el programador puede escoger qué imágenes presentar, centrar una ventana en el escritorio o tareas similares.

El objeto window.navigator contiene información sobre el navegador mismo, como su nombre (navigator.appName), versión (navigator.appVersion), el nombre codificado (navigator.appCodeName, el sistema operativo para el que se compiló el navegador (navigator.platform), si tiene habilitados los cookies (navigator.cookieEnabled), y la identificación que el browser envía en sus encabezados HTTP (navigator.userAgent). No es recomendable utilizar esta información para escribir funcionalidad dependiente del navegador, sino para propósitos de estadísticas o bitácoras.

Abrir y manipular ventanas

JavaScript permite al autor crear nuevas ventanas de navegador en las que puede cargar documentos existentes de su servidor web o generar un nuevo documento dinámicamente. Sin embargo, el abuso que se ha cometido por publicidad y otros fines, ha obligado a los fabricantes de navegadores a restringir esta funcionalidad de acuerdo a la política de seguridad, por ejemplo, a permitir abrir ventanas sólo en respuesta a un evento del usuario.

Una invocación al método window.open(url, name, features, replaceHistory) crea y retorna una referencia hacia una nueva ventana, y por ende, un nuevo objeto window con toda su descendencia de objetos. La nueva ventana cargará un documento si se especifica un url en el primer parámetro, 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 replaceHistory es true el historial de navegación en esa ventana es reemplazado; si es false o se omite, el nuevo documento es simplemente agregado al historial (y por tanto, el usuario podría presionar el botón "atrás" para retonar a documentos cargados previamente).

El siguiente ejemplo crea una pequeña ventana emergente de ayuda cuando se presiona el botón, y la cierra cuando se vuelve a presionar el botón. Las ventanas se cierran con el método window.close() que cierra gráficamente la ventana pero no destruye su correspondiente objeto window.

Ayuda

]]>

El tercer parámetro, features, de window.open() permite especificar el tamaño de la nueva ventana y otras decoraciones gráficas. Si se omite, se le dará tamaño estándar y todas las decoraciones existentes (barra de menú, barra de estado, ...). Algunas combinaciones son restringidas por razones de seguridad, por ejemplo, una ventana muy pequeña o situada en una zona no visible.

El objeto retornado por window.open() se puede manipular como cualquier otro objeto window. El ejemplo del js_open_window_document_write, genera un documento dinámicamente en una nueva ventana, utilizando su respectivo método document.write().

Hello world!");   // Output document content
subdoc.close();                          // End the document
]]>

Nótese que tanto document como window tinen métodos open() y close(). El método document.open(url) carga un documento a partir del url o genera uno vacío si se omite url. Invocar a document.write() es seguro en una ventana nueva ya que el documento se está cargando (parsing). El método document.close() indica al navegador que el documento ha terminado de cargarse (parsing), el cual responde deteniendo la animación de carga. Si nunca se llama a document.close(), el navegador creerá que está ante un documento incompleto.

El objeto window tiene métodos para mover y redimensionar la ventana. Deben usarse con mucha cautela sólo en situaciones que realmente provean una mejor experiencia del usuario. De lo contrario es una pobre práctica, ya que la geometría y posición de la ventana debe ser un privilegio del usuario. Son los siguientes: window.moveTo(x, y) mueve la esquina superior izquierda a las coordenadas dadas; window.moveBy(despX, despY) mueve la ventana tantos pixeles relativos a la posición actual; window.resizeTo(width,height) y window.resizeBy(addToWidth, addToHeight) cambian el tamaño de la ventana.

El método window.focus() hace que la ventana sea la activa, y window.blur() hace que renuncie a serlo. Es común llamar a focus() después de hacer un window.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 diferentes fragmentos del documento dinámicamente. Si los fragmentos están identificados con el atributo id (como en <div id="frag1">...</div>) o con anclas (<a name="frag2">...</a>), se puede cambiar la ubicación del documento con un una de las siguientes instrucciones:

var subwindow = window.open('help.html', 'help_window');
subwindow.location.hash = "#frag1";    // crea una entrada en el History de subwindow
subwindow.location.replace("#frag1");  // no crea una entrada en el History de subwindow

Ubicación del documento

La propiedad window.location de una ventana representa el URL del documento que está desplegado en dicha ventana. Es un objeto que tiene las siguientes propiedades:

Al objeto mismo window.location se le puede asignar un string, de la forma window.location = url, que causa el mismo efecto que llamar su método window.location.replace(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.

Cuadros de diálogo

El objeto window provee tres métodos para desplegar cuadros de diálogo. window.alert(msg) despliega un mensaje y espera que el usuario lo acepte. window.confirm(msg) presenta un mensaje y solicita al usuario que decida si lo acepta o cancela, lo cual se retorna como un boolean. window.prompt(msg, defaultValue) presenta el mensaje msg y espera que el usuario ingrese un string el cual es retornado o null si cancela.

Deben usarse con moderación, o mejor aún, nunca. La mayoría de usuarios se sentirá molesta al experimentarlos y recuerde que ellos tienen el poder forzar el navegador a cerrarse, deshabilitarle JavaScript o nunca volver a su sitio. Así que estos métodos son de ligera utilidad para el programador durante el proceso de desarrollo. Hace varios años, el navegador reportaba errores de JavaScript utilizando diálogos, lo cual era impertinente: le reclamaba al visitante errores que no eran de él. Los navegadores han cambiado a ocultar los errores y el programador debe buscarlos en alguna bitácora, consola o similar.

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 de texto que encuentra en el archivo. Estos objetos se asocian entre sí en una jerarquía llamada modelo de objetos del documento (DOM: Document Object Model), la cual es accesible y modificable a través de JavaScript. Es decir, el DOM es una 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á la funcionalidad 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 html, llamado elemento documento (document element). 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 fig_node_tree muestra un documento sencillo y el árbol de nodos que el navegador genera a partir de él.

    
Reubicar nodos en el documento
    

        
        
Los
        
12
        
elementos
        
de
        
esta
        
lista
        
serán
        
ordenados
        
alfabéticamente
        
sin contar
        
Mayúsculas
        
Incluyendo este párrafo.
    
    
Ordenar
    

]]>

    
Crear e insertar nodos en el documento
    
Agregar nodo
    

        
Presione el botón para agregarle elementos a la lista
    
    

]]>

XML DOM y HTML DOM

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:

Valor	Constante	Pseudoclase XML	Pseudoclase HTML
1	Node.ELEMENT_NODE	Element	HTMLElement
2	Node.ATTRIBUTE_NODE	Attr
3	Node.TEXT_NODE	Text
4	Node.CDATA_SECTION_NODE	CharacterData
5	Node.ENTITY_REFERENCE_NODE	EntityReference
6	Node.ENTITY_NODE	Entity
7	Node.PROCESSING_INSTRUCTION_NODE	--
8	Node.COMMENT_NODE	Comment
9	Node.DOCUMENT_NODE	Document
10	Node.DOCUMENT_TYPE_NODE	--
11	Node.DOCUMENT_FRAGMENT_NODE	DocumentFragment
12	Node.NOTATION_NODE	--

Tipos de Node del XML DOM

El js_element_count muestra una función que recorre recursivamente todos los nodos del documento contando cuántos de ellos son elementos. Sugerencia: verifique si el conteo es correcto: cuente los elementos manualmente en el código fuente que genera la página o al inspeccionar el resultado.

   
   
   



   
Conteo de elementos
   
El número de elementos presentes en este documento es:
      


]]>

10 pts.

Escriba en un archivo .js, una función que recorre el documento en que fue invocada y retorna un string con el texto de todos los comentarios. Imprima este string en un elemento pre al final del documento. El elemento pre y su contenido debe crearlo desde JavaScript usando el DOM. Puede descargar una página que guste de la web que tenga comentarios y alterarla para incluir su script al final del cuerpo.

15 pts.

Escriba una función en un archivo doc_statistics.js que al ser invocada crea un nuevo documento en una ventana emergente con estadísticas del documento donde se invocó la función. El contenido de la ventana emergente es una tabla (X)HTML con las columnas: número de línea (#), el nombre del elemento (Elemento), la cantidad de veces en que aparece en el documento original (Ocurrencias), y el porcentaje de ocurrencia de dicho elemento en el documento (Porcentaje). En las filas de la tabla debe aparecer cada uno de los distintos elementos que conforman el documento, como se ve abajo. Al final agregre como pie de tabla una fila con los totales. Descargue de la web una página de su interés y modifíquela para ejecutar su script al final del documento. Note que su función sólo debe considerar elementos y no nodos de otro tipo.

#	Elemento	Ocurrencias	Porcentaje
1	html	1	0.1%
2	head	1	0.1%
...	...	...	...
45	img	95	10%
	Total	581	100%

Por cada tipo de nodo hay una pseudoclase hija de Node, que aparece en la tercera columna de la xml_dom_node_types. Por ejemplo, cuando el navegador carga el documento y encuentra un comentario, no construye un objeto Node puro, sino que construye un objeto de la pseudoclase Comment, la cual es hija de Node; y, de igual forma, cuando encuentra un párrafo creará un objeto Element que es también hijo de Node. Esta jerarquía de pseudoclases se ilustra la fig_node_inheritance.

Cada subclase agrega propiedades a la pseudoclase Node. Por ejemplo, la pseudoclase Element define las siguientes propiedades útiles:

Propiedad	Descripción
Element.tagName	String con el nombre del elemento, por ejemplo: "body", "p", etc. Equivale a Node.nodeName.
Element.attributes[]	Accede a los atributos del elemento en el orden en que fueron definidos.
Element.getAttribute(name)	Retorna el valor del atributo name como un string, o null si el elemento no tiene este atributo.
Element.setAttribute(name, value)	Asigna el string value al atributo con nombre name del elemento. Si el atributo no existe, lo crea.
Element.removeAttribute(name)	Elimina el atributo con nombre name del elemento. No produce ningún error si el atributo no existe.
Element.getAttributeNode(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.
Element.id	El valor del atributo id="value", si fue definido para este elemento.
Element.className	El valor del atributo class="value", si fue definido para este elemento.
Element.children[]	Un arreglo que contiene únicamente los elementos hijos de este elemento, en lugar de todos los nodos como ocurre con el arreglo childNodes heredado de Node. Quizá childElements hubiese sido un nombre más apropiado.
Element.childElementCount	La cantidad de elementos hijos. Equivale a children.length. Nótese que no es la cantidad de nodos hijos.
Element.innerHTML	Un string que con el marcado HTML o XML que representa el contenido del elemento. Si se asigna otro string, será "parseado" por el navegador, el resultado reemplazará a los nodos hijos del elemento, y el efecto será inmediatamente visible en el documento.
Element.outerHTML	Un string que con el marcado HTML o XML que representa el elemento mismo más su contenido. Si se asigna otro string, será "parseado" por el navegador, el resultado reemplazará al elemento y sus nodos hijos. El efecto será inmediatamente visible en el documento.
Element.style	Un objeto CSSStyleDeclaration con los estilos definidos en el documento para este elemento. Se puede modificar dinámicamente. No contiene los estilos computados.

Propiedades de Element en el XML DOM

El objeto Attr representa un atributo de un elemento particular, aunque casi nunca se utiliza, ya que el objeto Element tiene propiedades y métodos para manipular sus atributos. Quizá su propiedad más útil es Attr.specified 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 especializado para HTML (fig_node_inheritance). Dado que JavaScript utiliza XML para transferir datos entre el servidor y el cliente, requiere poder manipular estos documentos a través de una jerarquía de objetos. El DOM que se ha presentado hasta el momento se llama XML DOM, 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 llama HTML DOM y que heredan de las pseudoclases presentes en el XML DOM. Algunas de estas pseudoclases se presentan en verde en la fig_node_inheritance. El principal distintivo del HTML DOM es que define la pseudoclase HTMLElement para todos los elementos que sólo tienen los atributos comunes (em, span, dt, etc.) y una pseudoclase HTMLXxxElement para cada elemento Xxx que tiene atributos propios, como HTMLDocument, body (HTMLBodyElement), p (HTMLParagraphElement), ul (HTMLUListElement), etc.

Las pseudoclases HTMLXxxElement definen propiedades homónimas a los atributos (X)HTML que son de lectura y escritura. Por ejemplo HTMLImageElement define la propiedad string src que puede cambiarse dinámicamente con JavaScript y su efecto es inmediato en el navegador. Los nombres son homónimos a XHTML, en minúsculas, excepto el atributo class="" que en JavaScript se renombra className debido a que class es una palabra reservada. El tipo de datos de cada atributo es el más adecuado, por ejemplo, HTMLImageElement.src es un string, HTMLImageElement.width es un entero y HTMLBodyElement.onload es una función de JavaScript.

El autor puede utilizar estos atributos definidos por las pseudoclases HTMLXxxElement 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étodos getAttribute(name) y setAttributeValue(name, value) heredados de Element en el XML DOM; que a diferencia de los atributos de HTMLXxxElement, sólo retornan y reciben valores string.

5 pts. Reimplemente el ejercicio 5.22 (documento aleatorio) usando la jerarquía de Node, en lugar de usar una jerarquía de clases propias. Provea una función que al ser invocada obtiene una referencia al elemento body y construye un documento aleatorio.

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 objeto Document 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.

Si los métodos de la htmldocument_search_element se invocan con el objeto document, buscarán elementos en el documento completo, pero a veces, es útil buscarlos sólo en un trozo del documento. La pseudoclase Element también define sus propias versiones de dichos métodos (a excepción de getElementById() y getElementsByName()), y hacen lo mismo que sus contrapartes de Document, con la diferencia de que en lugar de buscar en todo el documento, buscan únicamente en el subárbol del elemento al cual el método es invocado.

Por conveniencia la pseudoclase HTMLDocument define las propiedades document.head, document.body y document.documentElement, que hacen referencia a sus respectivos elementos, lo cual ahorra al programador el tener que localizarlos con las funciones de búsqueda del documento:

document.head == document.getElementsByTagName('head')[0];
document.body == document.getElementsByTagName('body')[0];
document.documentElement == document.getElementsByTagName('html')[0];

Ejemplo: Preguntas frecuentes

El ejemplo del js_faq_example_xhtml muestra una sencilla sección de "Preguntas frecuentes". Inicialmente se presentan sólo las preguntas y no las respuestas, lo que permite al visitante recorrerlas rápidamente. Una vez que encuentre la pregunta que le intriga, puede hacer clic en ella para desplegar su respuesta.

Este ejemplo sirve para ilustrar varios conceptos comunes de la programación en JavaScript. De acuerdo a la filosofía Unobtrusive JavaScript, el uso de este lenguaje debería ser un aditamento opcional que mejora la comunicación con el usuario. En este caso, si el visitante tiene desactivado el intérprete de JavaScript en su navegador, podrá acceder a la sección de "Preguntas frecuentes" completa. Es decir, JavaScript no debe ser un requisito indispensable para que un documento web sea funcional; pero si está disponible, JavaScript sólo debería ser usado para mejorar la experiencia del usuario con el sitio web.

El documento web no debe especificar comportamiento, sino que éste siempre debe estar en un archivo externo, el cual se liga con el atributo src del elemento script como se hizo en la línea 15 de faq.xhtml en el js_faq_example_xhtml. Si los scripts van a ejecutarse hasta después de que el documento haya sido cargado por completo, es buena práctica incluirlos hasta final del documento web. De esta forma el contenido se cargará tan rápido como sea posible, sin ser retrasado por código JavaScript que aún no va a correr.

Al procesar la línea 15 de faq.xhtml en el js_faq_example_xhtml, el navegador deberá esperar a descargar el archivo faq.js completo. Cuando esto ocurre, encontrará que sólo tiene 1 instrucción ejecutable (línea 2), las demás sólo declaran funciones como propiedades del objeto window. La línea 2 es la única que el navegador ejecuta en esta etapa y básicamente le indica al navegador que debe invocar la función initFaq() inmediatamente después de que haya terminado de cargar el documento web por completo (esto se estudiará más adelante). El navegador registra el evento y continúa analizando (parsing) el resto del documento web faq.xhtml.

Una vez que el navegador ha terminado de analizar el documento faq.xhtml, dispara el evento onload y ejecuta todos los manejadores que se hayan asociado a dicho evento. En este caso, la única función asociada es initFaq de las líneas 5 a 44, la cual se invocará con el fin de inicializar la lista de preguntas y respuestas. Inicializar esta lista significa ocultar las respuestas y hacer que los textos de las preguntas reaccionen al clic del ratón con el fin de mostrar u ocultar alternadamente dichas respuestas. Adicionalmente crea un par de botones: "Mostrar todo" para los visitantes que quieran leer o imprimir todas las preguntas, y el botón "Ocultar todo" para quienes cambien de opinión.

   

      
¿Texto de la pregunta 1?

      
Respuesta de la pregunta 1.
   
   

      
¿Texto de la pregunta 2?

      
Respuesta de la pregunta 2.
      
Esta respuesta ocupa varios párrafos.
   




   
Manejo de eventos del DOM level 2


]]>

El método Element.addEventListener() es parte de lo que se conoce como DOM Level 2, el cual 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 en una de las siguientes tres fases:

• Capturing phase. El evento recorre desde el documento hasta el elemento esperando ser atendido. Es decir, un elemento padre del elemento que generó el evento puede atenderlo.
• 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 element.addEventListener(event, function, fase) controla la fase en la que será atendido del evento. Si es true se atenderá en la fase de captura, si es false en la fase objetivo o fase de ascenso (bubbling).

Otra ventaja de usar addEventListener() en lugar de asignar manejadores de eventos directamente a los atributos intrínsecos (llamado DOM Level 0), es que una misma función puede menejar eventos generados en distintos lugares del documento. Por ejemplo, si quiere hacer algo cuando el cursor del ratón pase sobre cualquier párrafo del documento, en el DOM 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 addEventListener().

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 segundo parámetro de element.addEventListener(event, function, fase) 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 this 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 popBubble es asignada a cada imagen de burbuja al evento onclick, lo que la convierte en un método, el cual utiliza el parámetro this para cambiar el origen de la imagen presionada por una burbuja estallada.