Semana 2

En esta semana se estudia el uso de funciones, manejo de variables, estructuras de control de flujo de programa en JavaScript. También se explica cómo generar dinámicamente contenido HTML con JavaScript; específicamente a través de la creación de objetos (createElement) y atributos (setAttribute) DOM, y su incorporación (appendChild) a una página web; y a través de innerHTML.

Los objetivos que deben cumplirse al final de esta semana son los siguientes:


Presentación. Diapositivas con la introducción a JavaScript.
En esta presentación se proporciona una introducción a JavaScript, expresiones y tipos; arreglos; objetos; funciones; JavaScript en el browser; ejecución de código JavaScript; acceso y modificación de contenido HTML mediante JavaScript, conocido como Dynamic HTML (DHTML); programas de ejemplo con JavaScript.

Ejemplo de clase. Cálculo de factorial con JavaScript.
En este ejemplo, el profesor ilustra el uso de JavaScript, uso de funciones, manejo de variables, estructuras de control de flujo de programa. En el ejemplo el estudiante debe introducir un número, al cual se le calcula el factorial y se muestra en la caja de texto de la derecha.
SOLUCIÓN del Ejemplo de clase. Cálculo de factorial con JavaScript.
Archivo ZIP con los archivos para la solución del ejemplo de clase, los cuales incluyen: Ejercicio01_factorial2func.html con página web para la captura del número y muestra del factorial; y Ejercicio01_factorial2func.js con las funciones JavaScript utilizadas en el ejercicio.
SOLUCIÓN del Ejemplo de clase. Cálculo de factorial con JavaScript.
En este link se abre una pestaña nueva con la solución del ejemplo de clase.

Ejemplo de clase. Intérprete de JavaScript.
En este ejemplo, el profesor ilustra el uso de JavaScript, uso de funciones, manejo de variables, estructuras de control de flujo de programa. En el ejemplo el estudiante introduce código JavaScript; al presionar el botón Run, el intérprete ejecuta el código JavaScript, y muestra el resultado de la evaluación en la caja de texto que se encuentra abajo.
SOLUCIÓN del Ejemplo de clase. Intérprete de JavaScript.
Archivo ZIP con los archivos para la solución del ejemplo de clase, los cuales incluyen: Ejercicio02_interprete.html con página web para la captura del código JavaScript y muestra del resultado. En el mismo archivo HTML se incluye el código JavaScript para el intérprete, el cual pudo haberse colocado en un archivo JavaScript separado.
SOLUCIÓN del Ejemplo de clase. Intérprete de JavaScript.
En este link se abre una pestaña nueva con la solución del ejemplo de clase.

Tarea. Calculadora con JavaScript.
En esta tarea el estudiante debe de realizar una calculadora con JavaScript, la cual contenga las funciones básicas. Los botones que deberá contener son los siguientes: 0,1,2,3,4,5,6,7,8,9,0,+/-,.,*,/,+,-,=,C,backspace. Deberá funcionar con JavaScript utilizando el método getElementById.

Ejemplo de clase. Generador de Cajas de Texto con Objetos.
En este ejemplo, el profesor ilustra el uso de JavaScript; en particular muestra la generación dinámica de contenido con JavaScript, a través de la invocación de métodos para la creación de objetos (createElement) y atributos (setAttribute) DOM, y su incorporación (appendChild) a una página web.
SOLUCIÓN del Ejemplo de clase. Generador de Cajas de Texto con Objetos.
Archivo ZIP con los archivos para la solución del ejemplo de clase, los cuales incluyen: generaCajasTexto.html con página web para la captura del número de cajas y el despliegue de las mismas; y generaCajasTexto.js con las funciones JavaScript utilizadas en el ejemplo.
SOLUCIÓN del Ejemplo de clase. Generador de Cajas de Texto con Objetos.
En este link se abre una pestaña nueva con la solución del ejemplo de clase.

Ejemplo de clase. Generador de Cajas de Texto con innerHTML.
En este ejemplo, el profesor ilustra el uso de JavaScript; en particular muestra la generación dinámica de contenido con JavaScript, a través del uso de la propiedad innerHTML para la incorporación de contenido a una página web.
SOLUCIÓN del Ejemplo de clase. Generador de Cajas de Texto con innerHTML.
Archivo ZIP con los archivos para la solución del ejemplo de clase, los cuales incluyen: generaCajasTextoInnerHTML.html con página web para la captura del número de cajas y el despliegue de las mismas; y generaCajasTextoInnerHTML.js con las funciones JavaScript utilizadas en el ejemplo.
SOLUCIÓN del Ejemplo de clase. Generador de Cajas de Texto con innerHTML.
En este link se abre una pestaña nueva con la solución del ejemplo de clase.