Taller: Javascript

Taller: Javascript
Tipo de taller: en parejas
Fecha de entrega: Jueves 25 de agosto 2016, 23:59 (SICUA)
Objetivos
• Usar funciones implementadas en Javascript para generar contenido dinámico. • Asociar eventos de elementos HTML con funciones Javascript • Usar Javascript del lado del cliente para implementar páginas web con contenido dinámico • Usar funciones matemáticas y objetos/arreglos de Javascript Elementos a calificar
-­‐ -­‐ -­‐ -­‐ README con respuestas a preguntas sobre el uso de la consola de JS. Correcta implementación de una calculadora básica en JS Correcto manejo de resultados NaN, pilas de operaciones inválidas, etc. Uso de reglas CSS o algún framework de front end (ej., foundation) para mejorar la apariencia visual del la calculadora Pasos previos a el taller
Javascript proporciona un medio para la implementación de lógica de presentación del lado del cliente; lógica de negocio también puede ser implementada con Javascript del lado del cliente, pero no es una buena práctica, salvo que la aplicación sea muy sencilla (ej., una calculadora) y la lógica de negocio no requiera tareas computacionalmente costosas. Recuerde que Javascript se ejecuta en el browser, en esa medida la ejecución del lado del cliente está limitada por los recursos del cliente (máquina) y las restricciones impuestas por el browser. Uno de los elementos más importantes de JS es la capacidad de modificar dinámicamente el árbol de contenido (DOM) de las páginas HTML y los atributos visuales de cada elemento en el árbol; revise por favor las diapositivas de la clase y la API descrita en este enlace: http://www.w3schools.com/js/js_htmldom_document.asp Si usted no está muy familiarizado con Javascript se recomienda leer el capítulo 1 del libro Head First Java Script, Michael Morrison, O’Reilly. Si, considera que el contenido del capítulo es demasiado básico para sus conocimientos de JS, pase directamente al capítulo 2. En este punto, usted ya debería conocer los conceptos básicos de Javascript. 1. Use la consola Javascript del browser para ejecutar los ejemplos básicos (statements individuales) presentados en la diapositivas de la clase; para esto primero abra la página del departamento y luego abra la consola JS del browser. Las sentencias a digitar en la consola son las siguientes: Ø Ø Ø Ø Ø window.alert( "Hola mundo !" );
confirm("¿Estás de acuerdo ?" );
document.getElementsByTagName("div");
window.prompt("¿Cómo te llamas? " );
console.log("mensaje" );
Ø Ø Ø Ø Ø Ø Ø Ø Ø Ø Ø Ø Ø Ø var precio1 = 6;
var precio2 = 7;
var total = precio1 + precio2;
var pi = 3.14;
var persona = "Juan Perez";
var saludo = 'Hola Juan';
var fin = false;
var z = 'Hola Mundo';
var arr = [];
// Array
var obj = {};
// Object
console.log( typeof(precio1) );
// number
console.log( typeof(pi) );
// string
console.log( typeof(arr) ); // object
console.log( typeof(obj) );
Ø Ø Ø Ø Ø Ø Ø Ø var numeros = [ 1, 2, 3 ];
var carros = ["Saab", "Volvo", "BMW"];
var mezcla = [ 1, "Hola" ];
var persona = { nombre: "Juan", apellido: "Perez", edad: 20 };
carros[0];
carros[4];
persona.apellido;
persona.edad;
2. Use la consola Javascript para modificar la apariencia visual de la página del departamento con las siguientes sentencias: Ø var btn = document.createElement("BUTTON");
Ø var t = document.createTextNode("UN BOTON GIGANTEZCOOOOO EN LA PAGINA
DEL DEPARTAMENTO");
Ø btn.appendChild(t);
Ø document.body.appendChild(btn);
3. Ubique el botón en la página. En qué parte del HTML quedó el botón? El botón es visible en la página? Por qué? 4. Use la consola Javascript para modificar la apariencia visual de la página del departamento con la siguiente sentencia: document.getElementById('sp-header-wrapper').appendChild(btn)
Qué pasa en este caso? El botón es visible? Dónde aparece el botón? Esta sentencia modifica la página del lado del servidor?: 5. Modifique los elementos del menú de la página de forma similar a como se indica en las diapositivas del curso. Instrucciones del taller
El objetivo principal de este taller es implementar una calculadora básica en JS, basándose en la plantilla proporcionada y haciendo uso del editor en línea Plunker. 1. Vaya al sitio de Plunker (https://plnkr.co/) y autentíquese en el sitio usando su usuario de GhitHub 2. Descargue el proyecto base del taller de la url https://goo.gl/e0dbAW 3. El archivo calculadora.html contiene un diseño básico de la calculadora basado en divs y botones. Este archivo importa/usa un archivo js (calc_operations.js) para la definición de las funciones JS que se ejecutarán como respuesta a los eventos onclick de los botones. Adicionalmente el html hace referencia a un css (styles.css) para que usted defina reglas que mejoren la apariencia visual de la calculadora 4. Cree un nuevo plunker usando el proyecto base y pruebe el proyecto base en Plunker 5. El proyecto base solo tiene implementada la función para el evento onclick de los dígitos en la calculadora: 6. Implemente la funcionalidad de borrado del display (botón C) 7. Revise el siguiente enlace para entender los diferentes scopes de las variables en JS: http://www.w3schools.com/js/js_scope.asp 8. En este punto la calculadora solo sirve para pintar dígitos en el display y limpiar el display. Usted debe implemtar las operaciones matématicas + , -­‐ , /, *. El valor de la operación se deplegará en la calculadora cuando el usuario haga clic en el botón =. En esta medida usted debe mantener pilas internas de operaciones y dígitos. Esta(s) pila s) debe(n) ser declarada(s) como arreglo(s) dinámico(s) global(es)1. Para llenado de la(s) pila(s) termine la implementación del método compute en el js, y ajuste la función display para guardar el valor actual en el display 9. Implemente las otras funciones de la calculadora: x^2, Sqrt(x), x Pow y. Revise la guía de funciones matemáticas de Javascript: http://www.w3schools.com/js/js_math.asp 10. La función compute debe mostrar ERROR o NaN en el display en los casos de pilas de operaciones mal formadas u operaciones que den resultado NaN (ej. 0/0) 11. Ajuste la función clear (borrado de display) para que borre cualquier dato guardado en sus variables globales 12. Mejore la apariencia visual de la calculadora usando reglas CSS o algún framework de front-­‐end 13. Agregue un label arriba del display para ver la pila de operaciones de forma similar a la calculadora en línea de google: 14. No olvide el efecto del botón (-­‐) en las operaciones 15. Entregue el taller via SICUA como un archivo zip con todos los archivos del proyecto (.html, .js, .css) y un README.txt. En el archivo README.txt escriba (i) los nombres de los estudiantes en el grupo, (ii) la URL pública de su Plunk con la implementación de la calculadora, y (iii) las funcionalidades adicionales implementadas Bonos: Se darán puntos adicionales para las siguientes funcionalidades: -­‐ Botones para constantes fundamentales (Pi y e) y funciones trigonométricas -­‐ Operación factorial correctamente implementa (evitando volcamientos de memoria) -­‐ Display adicional con historial de números y operaciones. -­‐ Manejo de paréntesis en la calculadora 1
Tip: revise la función push de js http://www.w3schools.com/jsref/jsref_push.asp