En esta semana se repasan las dos técnicas para generar dinámicamente contenido HTML con JavaScript; a través de la creación de objetos y a través de innerHTML. También se estudia cómo cambiar dinámicamente estilos CSS de una página web con JavaScript.
Los objetivos que deben cumplirse al final de esta semana son los siguientes:
 |
Laboratorio 1. Convertidor de Grados Centígrados a Farenheit. En este laboratorio el estudiante integrará los conocimientos y habilidades adquiridos previamente. Se le presentan primeramente algunos ejemplos sencillos de las partes principales de una aplicación web del lado del cliente: HTML, CSS, JavaScript. Posteriormente se le solicita construir una tabla de conversión, la cual muestra conversiones de Grados centígrados a Grados Fahrenheit. |
 |
Tarea. Tabla de conversión dinámica con JavaScript. En esta tarea el estudiante debe de realizar la tabla de conversión de grados centígrados a farenheit más dinámica para el usuario. El usuario tendrá la posibilidad de elegir dos modos de conversión, mediante una lista desplegable: Grados Centígados a Farenheit, y Grados Farenheit a Centígados. También tendrá la posibilidad de indicar el rango de conversión. Por ejemplo: de 0 a 10, de 5 a 16, de 20 a 45, etc. Una vez elegido el modo de conversión y especificado el rango, el usuario puede realizar la conversión a través de un botón Convertir. |
 |
Ejemplo de clase. Cambia Estilos con JavaScript. En este ejemplo, el profesor ilustra el uso de JavaScript; en particular muestra el cambio dinámico de estilos sobre un fragmento de texto. Los estilos que se ilustran en este ejemplo son los siguientes: color del texto, fuente del texto y tamaño de la fuente del texto. |
 |
SOLUCIÓN del Ejemplo de clase. Cambia Estilos con JavaScript. Archivo ZIP con los archivos para la solución del ejemplo de clase, los cuales incluyen: cambiaEstilos.html con página web para el cambio dinámico de estilos sobre un fragmento de texto. Los estilos que se ilustran en este ejemplo son los siguientes: color del texto, fuente del texto y tamaño de la fuente del texto. El código JavaScript que permite los cambios dinámicos, se encuentra en la pá:gina web. |
|
SOLUCIÓN del Ejemplo de clase. Cambia Estilos con JavaScript. En este link se abre una pestaña nueva con la solución del ejemplo de clase. |
|
Tarea. Mini editor de texto en JavaScript. En esta tarea el estudiante debe de realizar un mini editor de texto en JavaScript, en el cual se pueda introducir texto, y se puedan modificar las siguientes características del mismo: color del texto, color del fondo del texto, tipo de la fuente del texto, y tamaño de la fuente. |