viernes, 17 de mayo de 2013

Javascript, jQuery y FirefoxOS: La programación orientada a eventos

En el artículo anterior vimos como crear un programa para FirefoxOS, pero ese programa no hacía nada más que mostrar un texto. En esta ocasión vamos a permitir al usuario interactuar con la aplicación, y para eso introduciremos el uso de javascript y jquery con un sencillo ejemplo de un programa que simula tiradas de dados.

Antes de empezar, algunos enlaces de interés:
En esta ocasión, además de los archivos ya vistos, tendremos un par de carpetas con los scripts (js) y los estilos (css). Pero de nuevo empezaremos viendo el HTML que contiene los elementos del interfaz:

<!DOCTYPE html>
<html>
<head>
    <title>Tirada de dados</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/estilo.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    Número de caras: <input type="number" id="numero_caras" value="6" />
    Número de dados: <input type="number" id="numero_dados" value="1" />
    <input type="button" value="Tirar dados" id="tirar_dados" />
    <div id="result" ></div>
</body>
</html>

Esta vez podemos ver las siguientes novedades respecto al código anterior:
  • En la cabecera tenemos los enlaces a la hoja de estilos <link>, y al javascript <script>
  • En el body tenemos varios elementos <input>, dos de tipo "number" (para introducir números) y el tercero, un botón.
  • Por último tenemos un elemento <div> que es una simple capa vacía en donde escribiremos el resultado de la tirada.


La idea es sencilla. Al pulsar el botón se calcula la tirada, que se mostrará en el campo resultado. Todo esto se hace en el script "app.js":

$(iniciar);

function iniciar() {
    $("#tirar_dados").click(tirar_dados);
}

function tirar_dados() {
    var suma=0;
    var tiradas=new Array();
    for(var i=0;i<$('#numero_dados').val();i++){
        tiradas.push(Math.ceil($('#numero_caras').val()*Math.random()));
        suma+=tiradas[tiradas.length-1];
    }
    $("#result").text("Resultado: "+suma+" = "+tiradas.join(" + "))
}

En realidad no suelo escribir código de esta manera, pero creo que será más fácil de explicar:
  • En la línea 1 se usa una función de jQuery que obliga a esperar a que se cargue la página antes de hacer nada más.
  • Cuando se ha cargado la página se llama a la función iniciar. Lo único que se hace aquí es seleccionar el botón con identificador "tirar_dados" y establecer un evento de manera que cuando alguien lo pulse se llame a la función "tirar_dados"
  • El cálculo se hace en la función "tirar_dados", y consiste simplemente en:
    • Cada tirada la "calculamos" generando un valor aleatorio entre 0 y 1, multiplicándolo por el valor indicado en el campo "número de caras" y redondeando el resultado hacia arriba (línea 11)
    • Repetimos estas tiradas tantas veces como número de dados se haya indicado (líneas 10 a 13)
    • Y vamos sumando los resultados en una variable para obtener el resultado final (línea 12)
  • Finalmente mostramos el resultado (en el bloque "result"), mostrando tanto la suma como la lista de tiradas parciales separadas por "+" (línea 14)
Hay varias cosas que quiero que os queden claras aquí por que luego se usarán en cada tutorial, así que pasaré sobre ellas sin comentarlas de nuevo:
  1. Siempre hay que inicializar la aplicación, esperando a que todo esté cargado
  2. En la inicialización se deben establecer los elementos con los que va a interactuar el usuario, y asociar a ellos los eventos correspondientes.
  3. Tanto para inicializar, como para asociar eventos, como para hacer cambios en los objetos del documento HTML, se utilizará jQuery. Así que acostumbraos a ver la instrucción $('selector').
Queda un detalle por resolver, y este es que el bloque <div> en el que se muestran los resultados tiene un estilo diferente, y naturalmente esto lo hemos establecido en el archivo "css/estilo.css":

#result{
 font-size:1.3em;
 font-weight:bolder;
}

Es un archivos sencillo, que simplemente establece el bloque identificado como "result" en negrita y con un tamaño de fuente de 1.3em. Para quienes no lo sepáis, la unidad "em" es una unidad de medida relativa al tamaño de fuente del bloque dentro del que está el actual, en este caso del <body>. En nuestro caso concreto 1.3em significa que el tamaño del texto en "result" será un 30% mayor que el tamaño del texto en el <body>.

Usaremos mucho esta medida relativa pues se ajusta mejor al dispositivo que usemos. De hecho en el próximo tutorial de esta serie vamos a tratar justamente el uso de hojas de estilo para dar una apariencia consistente a las aplicaciones de FirefoxOS, y en este contexto hablaremos más de tamaños y otras cuestiones de estilo.

4 comentarios:

  1. Hola, aquí el mapache duvitativo. En "numero de dados" ¿ por qué value="1" ? Si el programa permite hacer tiradas con varios dados...

    Después en el archivo apps veo que en número de tiradas has metido un array , eso lo entiendo, así uno selecciona cuántos dados desea tirar. Pero en la parte de HTML ese 1 me despista. Si me lo pudieras explicar te estaría muy agradecida :)

    ResponderEliminar
    Respuestas
    1. "value" en un input de un formulario HTML indica el valor por defecto, aunque luego el usuario lo pueda cambiar.

      Cuando el usuario escribe ahí otro número, ese valor cambia, y es recogido por la función "$('#numero_dados').val()".

      Eliminar
  2. Hola, por momento perfecto.
    Cómo puedo hacer dos dados diferentes y hacer roll a la vez?

    Saludos

    ResponderEliminar
    Respuestas
    1. Hay diversas maneras de hacer eso, pero es más cuestión de diseño que de programación. Es decir, lo importante es definir como el usuario introduce la información sobre que dados, y cuantos, queremos tirar.

      Por ejemplo, si sabemos de antemano que los dados que podemos tirar son de 4,6,8,10,12 y 20 caras, podemos poner un input numérico para cada una y que el usuario escriba en ellos cuantos dados de dicho tipo quiere tirar.

      Si no lo sabemos, otra opción sería meter una opción que permita añadir dados: Escoges cuantas caras quieres, le das a añadir, y te añade un dado con tantas caras. Naturalmente también habría que dar la opción de eliminar dados. Este puede ser un ejemplo más complejo, y por tanto interesante, para un próximo artículo.

      Eliminar