Paradigmas de Programación Primer Seminario

César Vaca Rodríguez, Dpto. de Informática, UVa 111 Feb. 2011

Paradigmas de Programación

Primer Seminario

Departamento de Informática

Universidad de Valladolid

Curso 2010-11

Grado en Ingeniería Informática

Grado en Ingeniería Informática de Sistemas


Objetivos Crear una “aplicación” que simula algunas características

del “mecanismo de Antikythera”: Mostrar posiciones del sol, la luna y algunos planetas en la esfera celeste para una determinada fecha.

Se realizará mediante HTML, CSS y JavaScript (es decir, vamos a crear una página web dinámica)

Resultados de aprendizaje: Conceptos de HTML, CSS y JavaScript Orientación a objeto Orientación a eventos Modelo MVC: Separación de contenido, presentación y

respuesta a eventos.


1. Contenido El contenido está definido por el lenguaje HTML, que

describe los elementos de la página.

Estos elementos consistirán en imágenes y “controles” que permiten mostrar y pedir datos al usuario.

Aquellos elementos que se van a referenciar en el código se les asigna un identificador

Podeis descargar el esquema de página en la siguiente dirección:

http://www.infor.uva.es/~cvaca/asigs/docpar/eclipse01.zip

Y las imágenes utilizadas en:

http://www.infor.uva.es/~cvaca/asigs/docpar/imgsem1.zip


http://www.infor.uva.es/~cvaca/asigs/docpar/imgsem1.zip


Estructura de una página HTML

<HTML>

<HEAD>

<TITLE>

<SCRIPT>

<STYLE>

<BODY>

Bloque

<DIV>

<TABLE>

Inline

<SPAN>

<BR>

<IMG>

<FORM>

<INPUT type ="text">

<INPUT type ="button">


Página inicial<HTML><HEAD> <TITLE>Paradigmas de Programacion - Seminario #1</TITLE></HEAD><BODY id="cuerpo"> <DIV id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT type="text" size="10" id="fecha_ent" /><BR> <INPUT type="text" size="10" id="hora_ent" /><BR><BR> <SPAN id="txt_int"><B>Intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " /> <INPUT type="button" value=" - " /> <INPUT type="button" value=" <-> " /><BR><BR> </FORM> </DIV> <DIV id="img_zod"><IMG src="zodiaco.png"></DIV> <DIV id="img_som1"><IMG src="minisombra.png"></DIV>


Página inicial <DIV id="img_lun1"><IMG src="luna.png"></DIV> <DIV id="img_sol1"><IMG src="sol.png"></DIV> <DIV id="img_ven1"><IMG src="venus.png"></DIV> <DIV id="img_mar1"><IMG src="marte.png"></DIV> <DIV id="img_jup1"><IMG src="jupiter.png"></DIV> <DIV id="img_som2"><IMG src="sombra.png"></DIV> <DIV id="img_lun2"><IMG src="luna.png" id="fase_lunar"></DIV> <DIV id="img_sol2"><IMG src="sol.png"></DIV> <DIV id="img_ven2"><IMG src="venus.png"></DIV> <DIV id="img_mar2"><IMG src="marte.png"></DIV> <DIV id="img_jup2"><IMG src="jupiter.png"></DIV> <DIV id="img_map"><IMG src="mapamundi.gif"></DIV> <DIV id="img_cur"><IMG src="cursor.png"></DIV></BODY></HTML>


2. Presentación La presentación se puede ajustar haciendo uso de los

estilos CSS

Cada elemento HTML tiene asociada una serie de propiedades

Nos interesa sobre todo la posibilidad de usar el posicionamiento absoluto de elementos.

Los estilos se definen en el apartado style de la cabecera del documento, y se asocian a los elementos modificando la propiedad class.

Podeis descargar la página modificada en:






Segunda iteración<HTML><HEAD> <TITLE>Paradigmas de Programacion - Seminario #1</TITLE> <STYLE type="text/css"> .objMovible1 { position:absolute; z-index:1; } .objMovible2 { position:absolute; z-index:2; } .objMovible3 { position:absolute; z-index:3; } .objMovible4 { position:absolute; z-index:4; } .objMovible5 { position:absolute; z-index:5; } body { color: #FFFFFF; background: #0000A0; font: 13px Arial, sans-serif; } </STYLE></HEAD>


Segunda iteración<BODY id="cuerpo"> <DIV class="objMovible5" style="top:205;left:712;" id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT type="text" size="10" id="fecha_ent" /><BR> <INPUT type="text" size="10" id="hora_ent" /><BR><BR> <SPAN id="txt_int"><B>Intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " /> <INPUT type="button" value=" - " /> <INPUT type="button" value=" <-> " /><BR><BR> </FORM> </DIV>

<DIV class="objMovible4" style="top:10;left:15;" id="img_zod"> <IMG src="zodiaco.png"> </DIV> <DIV class="objMovible5" style="top:99;left:340;" id="img_som1"> <IMG src="minisombra.png"></DIV>


Segunda iteración <DIV class="objMovible5" style="top:335;left:576;" id="img_lun1“>.. <DIV class="objMovible5" style="top:571;left:340;" id="img_sol1“>.. <DIV class="objMovible5" style="top:335;left:104;" id="img_ven1">.. <DIV class="objMovible5" style="top:325;left:114;" id="img_mar1">.. <DIV class="objMovible5" style="top:345;left:94;" id="img_jup1">..

<DIV class="objMovible3" style="top:335;left:370;" id="img_som2">.. <DIV class="objMovible2" style="top:335;left:340;" id="img_lun2">.. <DIV class="objMovible1" style="top:335;left:280;" id="img_sol2">.. <DIV class="objMovible1" style="top:275;left:340;" id="img_ven2">.. <DIV class="objMovible1" style="top:395;left:340;" id="img_mar2">.. <DIV class="objMovible1" style="top:385;left:360;" id="img_jup2">..

<DIV class="objMovible1" style="top:10;left:712;" id="img_map">.. <DIV class="objMovible2" style="top:53;left:882;" id="img_cur">..</BODY></HTML>


3. Cálculos El cálculo de las posiciones del sol, luna y planetas requiere

conocimientos de mecánica celeste...


3. Cálculos .. que se han codificado en un módulo javascript:

http://www.infor.uva.es/~cvaca/asigs/docpar/astro.js

RA (Ascensión Recta)

DE

C (

Dec

linac

ión)

Eclípticatpo -> tipo Date, fecha actuallat, lon -> gradosr = calcAstro(tpo,lat,lon);r[0].RA -> RA del solr[0].DEC -> Dec del solr[0].late -> Latitud eclíptica del solr[1] -> Sombra tierrar[2] -> Lunar[2].fase -> Fase luna (0-1)r[3] -> Venusr[4] -> Marter[5] -> Júpiter

http://www.infor.uva.es/~cvaca/asigs/docpar/astro.js


Elementos de Javascript

Tipos de datos No es necesario declarar las variables (salvo en el bloque ppal, con var)

y no tienen un tipo de datos asociado. Conversión automática entre tipos de datos. Operador de asignación (=), comparaciones (==, !=), lógicos

(!,&&,||) Los arrays pueden indexarse por cualquier valor, pueden almacenar

valores de tipos distintos y se pueden asignar fuera de rango.

var v = [1,[2,3.14],”hola”];v[1][2] 3.14

“Registros”:

var r = {nombre:”pedro”, edad:25};r.edad 25

Cadenas de caracteres: Se puede usar indistintamente comillas simples o dobles. No son arrays.


Elementos de Javascript Estructuras de control:

Las sentencias terminan en punto y coma. Bloques: { s1; s2; } Condicional: if(cond) { ... } else { ... } Bucles: for(inicio; cond; paso) { ... }

inicio es una sentencia (tipicamente una asignación) ejecutada una sóla vez antes de comenzar el bucle.

cond representa la condición de permanencia en el bucle. paso es una sentencia (tipicamente de incremento) ejecutada al final de

cada iteración. Operadores especiales:

Autoincremento ( x++; y--;) Autoasignación ( x += 5; y /= 2; ) Condicional

Definición de funciones:

function min(a,b) { return(a < b ? a : b); }


Elementos de Javascript

Orientación a objeto: Los objetos son elementos dinámicos que contienen tanto

propiedades (“campos”) como métodos (“funciones” que modifican propiedades del objeto o devuelven valores asociados al objeto)

El acceso/invocación de propiedades/métodos se realiza mediante el operador punto

Los arrays, “registros”, strings y elementos de la página HTML son objetos.

Para este seminario no es necesario crear objetos. Objeto Math

Es un objeto preexistente (clase estática) Math.PI Math.round(expr) Math.sqrt(expr)


Elementos de Javascript Objetos de tipo Date

Creación (fecha actual): fecha = new Date(); Acceso y modificación del dia, mes, año, hora, minutos:

min = fecha.getMinutes();fecha.setMinutes(35);

Los meses se numeran de 0 a 11. Incremento de una fecha (x es el número de milisegundos)

fecha.setTime(fecha.getTime() + x); Objetos de tipo String

Acceso a carácter: “Hola”.charAt(2) “l” Parsing: “12/8/2010”.split(“/”) [“12”,”8”,”2010”]

Objetos de tipo Array Longitud (propiedad): [1,2,3,4].lenght 4 Indices comienzan en cero.


Document Object Model (DOM)

<INPUT>


Trabajando con DOM Acceso a un elemento de la página web:

Acceso y modificación del texto de un <INPUT>:

Modificación del texto de un elemento inline (<SPAN>):

Modificación de una imagen (<IMG>);

e = document.getElementById(“identificador”);

e.value

e.innerHTML

e.src = “fichero”


Cambio de propiedades CSS Posicionamiento absoluto (pixels):

Ocultar y hacer visible un elemento:

Cambiar el color de fondo (aplicado a <BODY>):

Los colores se especifican en hexadecimal, en orden RGB.

e.style.left

e.style.visibility = ‘hidden’;

e.style.backgroundColor = ‘#FFA0B8’

e.style.top

e.style.visibility = ‘visible’;


Orientación a Eventos

Para que una página web sea dinámica, es necesario que pueda cambiar cuando el usuario interactua con sus elementos.

Javascript tiene acceso al documento (via el modelo DOM) y puede cambiar su contenido.

Es necesario poder asociar código javascript a la ocurrencia de eventos del usuario sobre elementos del documento.

También debe ser posible mantener un estado (variables globales) durante la visualización del documento.


Tercera iteración<HTML><HEAD> <TITLE>Paradigmas de Programacion - Seminario #1</TITLE> <SCRIPT SRC="astro.js"></SCRIPT> <SCRIPT type="text/javascript"> // --- Variables globables --- var fecha; // fecha mostrada var lat = 41.75; // latitud (grados) var lon = -4.74; // longitud (grados) ... Otras funciones, variables y constantes ... function onIniciar() { ... } function cambiarFecha(event) { ... } function cambiarHora(event) { ... } function cambiarLatLon(event) { ... } function animar(incr) { ... } function invertir() { ... } </SCRIPT> <STYLE type="text/css“> ... </STYLE></HEAD>


Tercera iteración<BODY id="cuerpo" onload="iniciar()"> <DIV class="objMovible5" style="top:205;left:712;" id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT ... id="fecha_ent" onkeypress="cambiarFecha(event)"/><BR> <INPUT ... id="hora_ent" onkeypress="cambiarHora(event)"/><BR><BR> <SPAN id="txt_int"><B>Intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " onclick="animar(true)" /> <INPUT type="button" value=" - " onclick="animar(false)" /> <INPUT type="button" value=" <-> " onclick="invertir()" /><BR><BR> </FORM> </DIV> ... <DIV class="objMovible1" id="img_map"> <IMG src="mapamundi.gif" onmousedown="cambiarLatLon(event)“> </DIV> <DIV class="objMovible2" id="img_cur"> <IMG src="cursor.png“ onmousedown="cambiarLatLon(event)"></DIV></BODY></HTML>


Concurrencia

A veces es necesario que un proceso se ejecute en paralelo a otro. En nuestro caso deseamos mostrar una animación pero seguir siendo capaces de responder a eventos del usuario.

Javascript tiene un modelo de concurrencia muy sencillo, basado en temporizadores y acceso no restringido a las variables globales.

Podemos pedir que una función se ejecute continuamente a intervalos periódicos (medidos en milisegundos):

Para detener la repetición:

id = setInterval(“función”,msegs);

clearInterval(id);


Su turno!

Rellene las funciones que faltan en la página siguiente para poder ver en funcionamiento la simulación del mecanismo de Antikythera!

http://www.infor.uva.es/~cvaca/asigs/docpar/eclipse.zip

http://www.infor.uva.es/~cvaca/asigs/docpar/eclipse.zip

Documents

Paradigmas de Programación Primer Seminario