Dr. Carlos Roberto Jaimez González
Introducción
El propósito de este laboratorio es presentar algunos ejemplos sencillos de las partes principales de una aplicación web del lado del cliente:
- HTML
- CSS
- JavaScript
Durante el laboratorio crearás un proyecto en NetBeans para manejar y editar tus archivos. Crearás tres archivos: HTML, CSS y JavaScript. Escribirás código JavaScript para añadir dinámicamente nuevos elementos HTML a un documento. Debes terminar el laboratorio antes del comienzo de la siguiente sesión de clase.
El laboratorio es recomendable que sea realizado con NetBeans, pero puedes utilizar algun otro ambiente de desarrollo, o inclusive notepad.
Ejemplo
Ahora veremos un ejemplo sencillo de código JavaScript. El ejemplo que he elegido es la construcción de una tabla de conversión, que muestra conversiones de Grados centígrados a Grados Fahrenheit.
Archivo HTML (converter.html)
Cuando se crea un nuevo archivo HTML, NetBeans coloca automáticamente la declaración <! DOCTYPE >, la cual especifica el tipo de documento que se está creando. En nuestro archivo HTML de ejemplo, observa que existen ligas a una hoja de estilo (converter.css), y también a un archivo JavaScript (converter.js).
Una forma de añadir contenido dinámicamente a una página web es mediante el evento onload, el cual es disparado cuando el browser ha terminado de cargar la página web. En nuestro ejemplo, cuando este evento se ejecuta, llama a la función tablaConversion(), la cual está definida en el archivo converter.js. Un elemento de división (<div id="conversion">) es usado como un contenedor para el código HTML que será generado dinámicamente.
El código HTML es proporcionado aquí para cortar y pegar directamente en NetBeans. Observa como NetBeans colorea y resalta el contenido de los archivos CSS y JavaScript, de acuerdo a las palabras reservadas en cada lenguaje. Si te colocas sobre las áreas de código, automáticamente NetBeans sugiere autocrear ciertas partes del código.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Centígrados a Fahrenheit</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/converter.css"/>
<script language="JavaScript" src="js/converter.js" type="text/javascript">
</script>
</head>
<body onload="tablaConversion('conversion', 0, 10);">
<h2>Conversión de Temperatura – Centígrados a Fahrenheit</h2>
<div id="conversion"></div>
</body>
</html>
En el código HTML presentado arriba, observa lo siguiente:
- El link a los archivos externos CSS y JavaScript.
- El evento onload del tag <body> usado para invocar la función tablaConversion().
- Las comillas sencillas que encierran la cadena ('conversion'), la cual es pasada como argumento.
- El hecho de que 'conversion' es exacmente el atribute id del tag div
Archivo CSS
Observa como NetBeans conoce la sintaxis de CSS, ya que identifica los posibles valores que son permitidos para ciertos atributos.
Teclea algunas de estas declaraciones CSS en el archivo converter.css. Observa nuevamente como NetBeans verifica la legalidad de tu archivo CSS.
Archivo JavaScript
Antes de ver cómo generar HTML dinámicamente para la tabla de conversió, primero consideremos la naturaleza de los datos que queremos crear. En esta solución colocaremos todo dentro del tag <pre>, con líneas separadas por elementos br.
Necesitaremos crear HTML similar al mostrado a continuación y colocarlo como hijo del tag <div>. Así debería verse el HTML generado.
<div id="conversion">
<pre>
0 : 32
1 : 33.8
2 : 35.6
3 : 37.4
4 : 39.2
</pre>
</div>
El código JavaScript para crear y ejecutar la adición a la estructura del documento HTML es mostrado a continuación.
Observa el uso de lo siguiente:
- document.getElementById(tagId) - Usado para recuperar del documento actual un nodo identificado de manera única mediante su atributo id. El documento actual es el documento que cargó este archivo JavaScript.
- document.createElement(tagName) - Crea un nuevo elemento que será añadido al documento.
- node.appendChild - "node" es una referencia a un elemento HTML. Añade el nodo hijo al final de su lista de hijos.
Estudia unos minutos cada uno de estos archivos (converter.html, converter.css, y converter.js). Observa como NetBeans se encarga de autocompletar sentencias de código conforme vas tecleandolo.
Cuando hayas terminado, puedes seleccionar el archivo converter.html desde el browser de tu elección y observar el resultado. Lo siguiente debería aparecer en tu browser:
Ejercicio JavaScript
La aplicación mostrada anteriormente produce una salida muy pobre. Ahora reescribiremos el código JavaScript para crear una tabla en lugar de escribir simplemente los datos en un tag <pre>.
El objetivo es producir una tabla como la siguiente:
Tip: Define en CSS dos clases (.odd and .even) una para los renglones pares y otra para los renglones nones. De esta manera obtendrás el efecto de renglones alternados.
Por ejemplo, el código CSS para los renglones pares y nones podría ser:
tr.even {background: red}
EL código HTML que estamos tratando de crear es como lo siguiente:
<table>
<thead>
<tr>
<th>Celsius</th><th>Fahrenheit</th>
</tr>
</thead>
<tbody>
<tr class="even"><td>0</td><td>32</td></tr>
<tr class="odd"><td>1</td><td>33.8</td></tr>
<tr class="even"><td>2</td><td>35.6</td></tr>
<tr class="odd"><td>3</td><td>37.4</td></tr>
<tr class="even"><td>4</td><td>39.2</td></tr>
</tbody>
</table>
Para modificar un atributo HTML en JavaScript utiliza setAttribute. Por ejemplo:
var r = document.createElement("tr");
r.setAttribute("class", odd(i));