Antes de empezar, algunos enlaces de interés:
- El código fuente del programa y un ejemplo del resultado
- Nuestro artículo anterior sobre Interfaces HTML
- Una introducción al lenguaje javascript y otra sobre la librería jQuery
<!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:
- Siempre hay que inicializar la aplicación, esperando a que todo esté cargado
- En la inicialización se deben establecer los elementos con los que va a interactuar el usuario, y asociar a ellos los eventos correspondientes.
- 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.
