30 enero 2013

JavaScript para impacientes - 6 - Depuración

Es habitual que nuestros programas no funcionen al primer intento. A veces el error es algo tan simple como pulsar la tecla incorrecta, y escribir "ig" en vez de "if". En lenguajes que distinguen entre mayúsculas y minúsculas (como es el caso de JavaScript), está el caso adicional de que escribamos "If", que tampoco es válido.

En los entornos de desarrollo "de escritorio" no suele ser un problema: la línea errónea se marcará en color rojo, ya sea en el momento de teclearla o bien en el momento de ir a probar el programa. En un lenguaje orientado a un navegador esto no suele ser tan inmediato: hay algún entorno avanzado que lo permite, pero si usamos un editor de textos y un navegador como únicas herramientas, estamos un poco más "sólos". Aun así, la mayoría de navegadores nos permiten acceder a una "consola de JavaScript", en la que nos aparecerían los mensajes de error (en caso de haberlos) y en ocasiones incluso podremos teclear órdenes "en tiempo real" para ver su resultado.

Por ejemplo, si nuestro navegador es Chrome, en el menú Herramientas tendremos la opción "Consola de JavaScript":


Por ejemplo, si escribimos "Document.write" en vez de "document.write", recibiremos un mensaje de error (en inglés); que nos dice qué está fallando y en qué linea:


Lo mismo ocurre si escribimos "document.Write", que tampoco es válido, porque la "w" debería estar en mayúsculas:



Por supuesto, si lo que escribimos mal es una orden del lenguaje, como "If" en vez de "if", también se nos mostrará un mensaje de error muy similar:


Lo mismo ocurre con Firefox: tendremos una "Consola web" dentro del submenú "Desarrollador web":


Que también indicará que fichero está analizando, qué error encuentra y en qué línea está dicho error (junto con algún error adicional quizá, como en nuestro caso, que nos avisa de que no hemos indicado -aún- qué tipo de símbolos internacionales queremos usar).


Opera también permite depurar nuestros programas, desde el menú "Developer Tools", en la opción "Error Console":



 Que nos mostrará un mensaje muy similar a los de Chrome y Firefox (fichero, error y número de línea), aunque un poco más detallado, porque nos muestra los detalles de la línea que provocó el fallo:


En Safari también existe esta posibilidad, pero está un poco más escondida: desde las opciones tenemos que indicar que queremos "Mostrar el menú Desarrollo en la barra de menús":


 A partir de entonces, dentro del menú aparecerá un nuevo submenú llamado "Desarrollo", y entre sus opciones estará la de "Iniciar depuración de JavaScript":


Que mostrará el código fuente de la página e, intercalados entre las líneas originales, los posibles errores:



25 enero 2013

Dos horas para la hackercup

La edición de esta año de la "Hacker Cup" de Facebook empieza en poco más de dos horas, a las 16.00 hora del pacífico, es decir, la una de la madrugada en Europa continental. No es una buena hora para un europeo, pero como hay 72 horas para la ronda de calificación, debería dar tiempo al menos a echarle un vistazo.

No dan muchos detalles sobre si serán varios problemas o uno solo. Sólo dicen que el programa diseñado para resolver cada problema debe tardar menos de 6 minutos en hacerlo. Se supone que darán primero algunos casos de entrada de ejemplo, que permitan probar nuestra solución, pero... echo en falta algo más de transparencia, algún detalle sobre ediciones anteriores, como hacen en Google Code Jam y en el concurso de programación de Tuenti.

Más detalles (en inglés) sobre la Hacker Cup :

http://www.facebook.com/notes/facebook-hacker-cup/hacker-cup-2013-faq/591459627536609

Y si quieres retos adicionales para practicar:

http://www.nachocabanes.com/retos/

23 enero 2013

JavaScript para impacientes - Funciones (2)


5.3. Valor devuelto por una función

Una función no sólo es un bloque de órdenes. También puede devolver un resultado, como ocurre "en el mundo real" con las funciones matemáticas. Ese valor devuelto se podrá usar en cualquier punto de un programa en el que pudiéramos emplear una variable. Por ejemplo, podemos crear una función que calcule (y devuelva) la suma de tres números y usarla para sumar lo que el usuario teclee en 3 casillas:


<html>
<body>
<script language="JavaScript">
function sumar(num1, num2, num3)
{
    var suma = parseInt(num1)+parseInt(num2)+
        parseInt(num3);
    return suma;
}
 
function sumarCasillas(numero1, numero2, numero3, posicionResultado)
{
    var casilla1=document.getElementById( numero1 );
    var n1 = casilla1.value;
    var casilla2=document.getElementById( numero2 );
    var n2 = casilla2.value;
    var casilla3=document.getElementById( numero3 );
    var n3 = casilla3.value;
    var resultado=document.getElementById( posicionResultado );
    resultado.innerHTML = "Suma1: " +sumar(n1,n2,n3);
}
</script>    
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        Tercer numero:
        <input type="text" name="num3" id="num3" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" 
            onclick="sumarCasillas('num1', 'num2', 'num3', 'resultado');">
            Calcular suma</button>
 
    </form>
</body>
</html>
 


Ejercicios propuestos
  • 05.03.01 - Crea una función que calcule el mayor de 3 números. Con ella, crea una página que muestre tres casillas al usuario, permita que éste introduzca tres valores y escriba cuál es el mayor de ellos.
  • 05.03.02 - Crea una función que calcule el perímetro de un cuadrado, a partir de su lado. Crea también otra función que calcule la superficie de un cuadrado a partir de su lado. Con ellas, crea una página que muestre una casilla al usuario, en la que éste deberá introducir el lado del cuadrado, y cuando se haga clic en un botón, se mostrará el perímetro y el área de ese cuadrado.
  • 05.03.03 - Crea un programa similar al 05.03.02, pero que calcule la longitud de una circunferencia y la superficie de un círculo, ambos a partir de su radio.

5.4. Algunas funciones predefinidas

Tenemos muchas funciones predefinidas, que nos pueden hacer la vida más sencilla. Bastantes de ellas son numéricas, y otras, que veremos en el próximo apartado, permiten manipular textos. Entre las numéricas, ya habíamos visto las que permiten generar números al azar (Math.random) y quedarnos con la parte entera de un número (Math.floor):


<html>
<body>
<script language="JavaScript">
    var azar1 = Math.random();
    document.write("Al azar entre 0 y 1: " + azar1  + "<br />");
 
    var azar2 = Math.random() * 5;
    document.write("Al azar entre 0 y 5, con decimales: " 
        + azar2  + "<br />");
 
    var azar3 = Math.floor( Math.random() * 6 );
    document.write("Al azar entre 0 y 5, entero: " 
        + azar3  + "<br />");

    var azar4 = Math.floor( Math.random() * 8 )+1;
    document.write("Al azar entre 1 y 8, entero: " 
        + azar4  + "<br />");

    var azar5 = Math.floor( Math.random() * 11 )+10;
    document.write("Al azar entre 10 y 20, entero: " 
        + azar5  + "<br />");

</script>
</body>
</html>
 


Otras funciones matemáticas que pueden resultar útiles son:


<html>
<body>
<script language="JavaScript">
document.write("Raiz de 5: " + Math.sqrt(5)  + "<br />");
document.write("Valor absoluto de -1: " + Math.abs(-1)  + "<br />");
document.write("Dos elevado al cubo: " + Math.pow(2,3)  + "<br />");
document.write("Logaritmo natural de 10: " + Math.log(10)  + "<br />");
document.write("Coseno de 45 grados (PI/4 radianes): " + 
    Math.cos( Math.PI/4 )  + "<br />");
document.write("Seno de 60 grados: " + 
    Math.sin( 60 * (Math.PI / 180) )  + "<br />");
</script>
</body>
</html>
 


Y también tenemos muchas funciones para manejar fechas y horas, como por ejemplo:


<html>
<body>
<script language="JavaScript">
var hoy = new Date();
document.write("Dia del mes: " + hoy.getDate()  + "<br />");
document.write("Numero de mes: " + (hoy.getMonth()+1)  + "<br />");
document.write("Anyo con 4 cifras: " + hoy.getFullYear()  + "<br />");
document.write("Dia de la semana (0=domingo): " + hoy.getDay()  + "<br />");
document.write("Hora (0 a 24): " + hoy.getHours()  + "<br />");
document.write("Minutos: " + hoy.getMinutes()  + "<br />");
document.write("Segundos: " + hoy.getSeconds()  + "<br />");
document.write("Milisegundos: " + hoy.getMilliseconds()  + "<br />");
 
var otraFecha = new Date(2000, 2, 1);
document.write("Dia de la semana del 1-feb-2001: " + 
    otraFecha.getDay()  + "<br />");
</script>
</body>
</html>
 


Ejercicios propuestos
  • 05.04.01 - Crea un programa que permita convertir de grados a radianes (usando la equivalencia: PI radianes = 180 grados).
  • 05.04.02 - Crea un programa que pida al usuario una fecha (día, mes y año) y diga a qué día de la semana corresponde (como cifra del 0 -domingo- al 6 -sábado).
  • 05.04.03 - Mejora el programa 05.04.02 para que muestre el nombre del día de la semana, en vez de la cifra numérica.

20 enero 2013

JavaScript para impacientes - 5.Funciones (1)


Hemos visto que podemos asociar un fragmento de programa a un clic sobre un elemento de una página web. El problema es que si el fragmento es muy grande, el resultado puede resultar difícil de leer. Una alternativa más compacta es crear pequeños "bloques de programa", que llamaremos funciones.

5.1. Una función básica

En su forma más básica, una función nos permite agrupar varias órdenes y dar un nombre a ese conjunto. Así, el ejemplo del apartado 4.5 se podría reescribir así:

<html>
<body>
<script>
function calcularSuma()
{
    var casilla1=document.getElementById("num1");
    var n1 = casilla1.value;
    var casilla2=document.getElementById("num2");
    var n2 = casilla2.value;
    var resultado=document.getElementById("resultado");
    resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
    resultado.style.color = "blue";
}
</script>    
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" onclick='calcularSuma()'>Calcular suma</button>
 
    </form>
</body>
</html>
 

Ejercicios propuestos
  • 05.01.01 - Crea una versión usando funciones del ejercicio que cambia el color del fondo cada vez que el usuario haga clic sobre ella (ejercicio 04.05.01).
  • 05.01.02 - Crea una versión usando funciones del ejercicio que muestra un párrafo y dos botones para hacer el tamaño del texto más grande y más pequeño, respectivamente (ejercicio 04.05.02).
  • 05.01.03 - Crea una versión usando funciones del ejercicio que crea un párrafo y dos botones que sirvan para hacer ocultar y mostrar ese párrafo (ejercicio 04.05.03).
  • 05.01.04 - Crea una versión usando funciones del ejercicio que muestra tres casillas de texto y un botón que sume los números que haya escritas en esas tres casillas (04.05.04).
  • 05.01.05 - Crea una versión usando funciones del ejercicio que muestra dos casillas de texto y cuatro botones, que permitan calcular su suma, su diferencia, su multiplicación y su división (04.05.05).

5.2. Funciones "personalizables"

No siempre querremos que una función maneje los mismos datos. Por ejemplo, si queremos que una función compruebe si los datos que el usuario ha introducido en una casilla son válidos, es innecesario crear una función para cada casilla. Es preferible crear una única función a la que le podamos indicar qué casilla concreta ha de verificar. Para ese, podemos indicar "parámetros" a la función, que detallaremos en el paréntesis que sigue a su nombre, así:

<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
    var casilla1=document.getElementById( numero1 );
    var n1 = casilla1.value;
    var casilla2=document.getElementById( numero2 );
    var n2 = casilla2.value;
    var resultado=document.getElementById( posicionResultado );
    resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
    resultado.style.color = "blue";
}
</script>    
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" 
            onclick="calcularSuma('num1', 'num2', 'resultado');">
            Calcular suma</button>
 
    </form>
</body>
</html>
 

En este caso, la función "calcularSuma" recibe tres datos: la primera casilla, la segunda casilla y la posición en la que queremos mostrar el resultado; al llamar a la función, deberemos rellenar esos detalles con los datos reales de las casillas que queramos usar. Así, podemos aplicar esa misma función a bloques distintos de casillas, como en este ejemplo:

<html>
<body>
<script>
function calcularSuma(numero1, numero2, posicionResultado)
{
    var casilla1=document.getElementById( numero1 );
    var n1 = casilla1.value;
    var casilla2=document.getElementById( numero2 );
    var n2 = casilla2.value;
    var resultado=document.getElementById( posicionResultado );
    resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
    resultado.style.color = "blue";
}
</script> 
 
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" 
            onclick="calcularSuma('num1', 'num2', 'resultado');">
            Calcular suma</button>
    </form>
 
    <form>
        Primer numero alternativo:
        <input type="text" name="num3" id="num3" />
        <br />
 
        Segundo numero alternativo:
        <input type="text" name="num4" id="num4" />
        <br />
 
        <p id="resultado2">Suma: </p>
 
        <button type="button" 
            onclick="calcularSuma('num3', 'num4', 'resultado2');">
            Calcular suma</button>
    </form>
 
</body>
</html>
 

Ejercicios propuestos
  • 05.02.01 - Crea una variante del ejemplo previo, que multiplique los números de las casillas, en vez de sumarlos. La función deberá llamarse "calcularProducto".
  • 05.02.03 - Crea una versión mejorada del ejercicio 05.01.02, que muestre tres párrafos distintos, cada uno de ellos con dos botones para hacer el tamaño su texto más grande o más pequeño.
  • 05.02.03 - Crea una versión mejorada del ejercicio 05.01.03, que muestre tres párrafos distintos, con dos botones para cada uno, que sirvan para hacer ocultar y mostrar el párrafo correspondiente.

17 enero 2013

JavaScript para impacientes - Estilos, clicks y modificación de la página

(Si no lo has leído antes, posiblemente te interesará el apartado anterior)

4.3. Nociones mínimas de estilos

Desde hace muchos años, los procesadores de texto (como Word, o LibreOffice Writer) permiten crear textos largos de dos formas: la mala y la buena. La mala es empezar a escribir, e ir cambiando cada tipo de letra cuando lo necesitamos: si queremos un título un poco más grande, cambiamos su tamaño; si queremos que tenga otro tipo de letra, lo escogemos; si queremos otro color, lo seleccionamos en la lista desplegable de colores... La forma buena es escribir todo el texto, y después cambiar "los estilos" que nos interesen: si decimos que el estilo "Título 1" debe tener tipo de letra Tahoma, en tamaño 15, estar centrado y en color azul, todos aquellos párrafos que habíamos definido como "Título 1" cambiaran inmediatamente. Esto ahorra trabajo y evita inconsistencias (además de otras muchas ventajas "secundarias", como el hecho de que podamos crear índices sólo con un clic).
Esta misma idea se puede aplicar a una página web: podemos hacer fácilmente que todos los estilos "Título 1" estén centrados, o usen cierto color, o tengan un cierto margen, o tal tipo de letra, o un borde en la parte superior... Para eso utilizaremos "hojas de estilo en cascada" (CSS). Nuevamente, apenas veremos una mínima parte de las posibilidades de CSS, pero será suficiente para hacer documentos un poco más atractivos y para ver cómo modificar la apariencia de una página "al vuelo" con la ayuda de JavaScript.
Es frecuente que una "hoja de estilo" sea un fichero aparte de la página HTML (de hecho, esto también es frecuente para los programas en JavaScript), pero por ahora, para que todo quede en un mismo sitio, dejaremos la definición de los estilos al principio de nuestra página: antes del cuerpo (body) de la página, incluiremos una cabecera (head), que por ahora sólo contendrá los detalles estilos, entre . Vamos a ver un ejemplo, y luego comentaremos los detalles:


<html>
<head>
    <style>
    body 
    {
        background-color: rgb(200,200,200);
        font-family: Sans-Serif;
    }
 
    h1
    {
        font-size: 1.4em;
        color: blue;  
    }
 
    h2
    {
        margin-left: 10px;
    }
 
    p 
    {
        margin-left: 20px;
        text-align: justify;
    }
 
    table
    {
        border: 2px solid black;
        border-collapse: collapse;
    }
 
    td
    {
        border: 1px solid rgb(120,120,120);
        padding: 5px;
    }
    </style>    
</head>
<body>
    <h1>Ejemplo de apariencias</h1>
 
    <h2>Apariencia del texto</h2>
 
    <p>Este es un parrafo</p>
 
    <p>y este es otro, que tiene texto en <b>negrita</b> y texto en <i>cursiva</i>, 
    e incluso <font color=rgb(0,0,255)>texto azul (si el navegador lo permite)</font>.</p>
 
    <p>Podemos... <br/> partir un parrafo</p>
 
    <h2>Listas</h2>
 
    <ul>
        <li>Este es el primer elemento de una lista</li>
        <li>Y este es el segundo</li>
    </ul>
 
    <ol>
        <li>Esta lista tiene numeros</li>
        <li>Y mas numeros</li>
    </ol>
 
    <h2>Tablas</h2>
 
    <table>
        <tr><td>Enero</td><td>Febrero</td></tr>
        <tr><td>234</td><td>325</td></tr>
    </table>
 
</body>
</html>
 


En este caso, tenemos:
  • Para todo el cuerpo de la página (body), el tipo de letra será "Sans-Serif" (sin adorno, como la Arial o la Helvetica) y el fondo será de un color gris bastante claro (tanto la cantidad de rojo, como la de verde y la de azul son 200 de un máximo de 255).
  • Los títulos 1 (h1) tienen un tamaño de un 140% del texto normal (1.4em) y color azul.
  • Los títulos 2 (h2) tienen un margen a la izquierda de 10 píxeles.
  • Cada párrafo (p) tendrá un margen izquierdo de 20 píxeles y alineación justificada (el texto "se estirará" para llegar desde el margen izquierdo hasta el margen derecho).
  • Las tablas tendrán un borde exterior, que será sólido (no punteado ni de "rayitas"), de color negro y de 2 píxeles de grosor. Además, las líneas que bordean dos casillas adyacentes se juntarán (collapse) en una única línea.
  • Cada casilla de una tabla tendrá un borde de un píxel en un color gris intermedio, y un relleno (padding) de 5 píxeles entre el texto y el borde.
El resultado sería

4.4. Respondiendo a clicks

La mayoría de elementos de una página aceptan que añadamos un dato adicional, llamado "onclick", y en el que podríamos indicar un fragmento de programa en JavaScript que queremos que se ponga en marcha cuando hagamos click en ese elemento:

<html>
<body>
<p onclick="document.write('Hola... ');">Haz clic aqui!</p>
</body>
</html>
 

Como se ve en este ejemplo, no hace falta que se trate de un botón. En nuestro caso, se escribe algo cuando se hace clic sobre un cierto párrafo.
Para que esta posibilidad sea útil, tendremos que aprender a crear "funciones" en JavaScript, de modo que el fragmento de programa que incluyamos sea breve y conciso. A eso nos dedicaremos dentro de muy poco.

4.5. Modificando elementos de la página


Desde JavaScript podemos acceder a los elementos que contiene una página, leer su contenido y cambiarlo. Nos ayudará añadirles un nuevo detalle, un "identificador" (id): <input id="num1" name="num1" type="text" />.
A partir de entonces, podemos acceder a ese elemento mediante su identificador, usando "getElementById": var casilla1=document.getElementById("num1");
Y podemos leer o cambiar sus detalles. Por ejemplo, si es una casilla de texto, podríamos leer su ".value", y si es un párrafo podríamos cambiar su ".innerHTML" (el texto que contiene). Incluso podríamos cambiar su color o cualquier otra característica de su estilo: ".style.color = ..."
Vamos a ver un primer ejemplo, que sume dos números introducidos por el usuario, pero no utilizando ventanas emergentes, sino leyendo lo que se ha tecleado en dos casillas de texto que son parte de un formulario, y modificando el contenido de un párrafo para escribir el resultado:


<html>
<body>
    <form>
        Primer numero:
        <input type="text" name="num1" id="num1" />
        <br />
 
        Segundo numero:
        <input type="text" name="num2" id="num2" />
        <br />
 
        <p id="resultado">Suma: </p>
 
        <button type="button" onclick='
            var casilla1=document.getElementById("num1");
            var n1 = casilla1.value;
            var casilla2=document.getElementById("num2");
            var n2 = casilla2.value;
            var resultado=document.getElementById("resultado");
            resultado.innerHTML = "Suma: " +(parseInt(n1)+parseInt(n2));
            resultado.style.color = "blue";
            '>Calcular suma</button>
 
    </form>
</body>
</html>
 



Ejercicios propuestos
  • 04.05.01 - Crea una página web que cambie el color del fondo cada vez que el usuario haga clic sobre ella.
  • 04.05.02 - Crea una página web con un párrafo y dos botones que sirvan para hacer el tamaño del texto más grande y más pequeño, respectivamente.
  • 04.05.03 - Crea una página web con un párrafo y dos botones que sirvan para hacer ocultar y mostrar ese párrafo (pista, puedes cambiar el color, para que sea igual que el del fondo, o bien usar "display:none" para ocultar y "display:inline" para mostrar).
  • 04.05.04 - Crea una página web con tres casillas de texto y un botón que sume los números que haya escritas en esas tres casillas.
  • 04.05.05 - Crea una página web con dos casillas de texto y cuatro botones, que permitan calcular su suma, su diferencia, su multiplicación y su división.

14 enero 2013

JavaScript para impacientes - 4. Más sobre HTML. Interacción básica con la página.

(Si no lo has leído antes, posiblemente te interesará el apartado anterior)

Lo que hemos hecho hasta ahora nos ha permitido ir cogiendo algunos fundamentos, pero todavía hacemos "cosas que no son bonitas", e incluso cosas que quizá no funcionen, porque muchos navegadores bloquean las "ventanas emergentes", de modo que nuestros "alert" y nuestros "prompt" quizá no siempre se comporten como esperamos.

Por eso, vamos a ver algo más de HTML que nos permita hacer "cosas un poco menos feas", y también veremos nociones básicas de cómo modificar esa apariencia y de cómo leer datos usando la propia página (por ejemplo, con "casillas de texto", lo que nos permitirá evitar las ventanas emergentes).

4.1. Apariencia básica

Algunos cambios de apariencia que podemos hacer en HTML son muy simples y pueden hacer que el resultado final sea más vistoso. Por ejemplo:

  • Podemos escribir en negrita un texto, encerrándolo entre <b> y </b>.
  • Podemos escribir en cursiva un texto, usando entre <i> y </i>.
  • Podríamos subrayar, pero no es recomendable, para que no se confunda con un enlace entre páginas.
  • Podemos indicar que algo forma parte de un mismo párrafo, delimitándolo entre <p> y </p>.
  • Se puede forzar un salto a la línea siguiente dentro de un párrafo, usando <br />
  • Si tenemos distintos párrafos, es posible que se trate de un documento largo, dividido en varios apartados. En ese caso, podríamos tener varios niveles de títulos: el más importante se destacaría entre <h1> y </h1>, los subtítulos irían entre <h2> y </h2>, si estos contienen subapartados, sus títulos irían entre <h3> y </h3>, y así sucesivamente.
  • Para crear listas, las encerraremos entre <ul> y </ul>. Cada elemento de la lista estará entre <li> y </li> .
  • Si la lista debe tener números en vez de viñetas usaremos <ol> para indicar dónde comienza y </ol> para indicar el final (los elementos se siguen delimitando con <li> y </li>).
  • Si los datos deben estar colocados en forma de tabla, tendremos que detallar a tres niveles: la tabla empezará con <table> y </table>, cada fila empezará por <tr> y terminará con <tr>, y cada casilla de una fila empezará con <td>y terminará con </td>.
  • Podemos usar colores, por ejemplo comenzando con <font color="blue;"> y terminando con </font>, o incluso indicando la cantidad de rojo-verde-azul (desde 0 hasta 255) que debe tener un elemento, si usamos la sintaxis >font color=rgb(0,0,255)>, pero esta forma de trabajar puede dar lugar a páginas difíciles de mantener, así que dentro de poco dentro de poco veremos la alternativa elegante, las "hojas de estilo". Además, en navegadores modernos (que usen "HTML versión 5"), puede que no se haga caso a ese "font", que hoy en día se considera una característica obsoleta.
Vamos a ver un ejemplo y su resultado: el fuente de la página podría ser:


<html>
<body>
    <h1>Ejemplo de apariencias</h1>
 
    <h2>Apariencia del texto</h2>
 
    <p>Este es un parrafo</p>
 
    <p>y este es otro, que tiene texto en <b>negrita</b> y texto en <i>cursiva</i>, 
    e incluso <font color=rgb(0,0,255)>texto azul (si el navegador lo permite)</font>.</p>
 
    <p>Podemos... <br/> partir un parrafo</p>
 
    <h2>Listas</h2>
 
    <ul>
        <li>Este es el primer elemento de una lista</li>
        <li>Y este es el segundo</li>
    </ul>
 
    <ol>
        <li>Esta lista tiene numeros</li>
        <li>Y mas numeros</li>
    </ol>
 
    <h2>Tablas</h2>
 
    <table>
        <tr><td>Enero</td><td>Febrero</td></tr>
        <tr><td>234</td><td>325</td></tr>
    </table>
 
</body>
</html>
 


y el resultado sería:




Nota 1: Se pueden hacer muchas más cosas con HTML, pero este no pretende ser un curso de HTML. Para nosotros, HTML será una herramienta auxiliar, así que no profundizaremos más en apariencia básica, sino en otros detalles que nos interesan más, como los formularios o los estilos.

Nota 2: ¿Demasiadas abreviaturas? Para quien habla un poco de inglés no serán tan duras: no es sólo que "table" sea la traducción de "tabla", sino que "tr" es la abreviatura de "table row" (fila de tabla), "br" es la de "break" (partir), "li" lo es de "list item" (elemento de la lista), "ul" viene de "unordered list"... En la práctica, hay que memorizar mucho menos de lo que puede parecer en un principio. Además, es frecuente usar herramientas que nos permitan diseñar la parte visible de la página sin tener que teclear nada, y así centrarnos en la lógica. Pero de esas herramientas hablaremos más adelante. Cuando uno empieza, es preferible "teclear todo", para memorizar las estructuras básicas; más adelante llegará el momento de ahorrar trabajo (y tiempo).

Ejercicios propuestos
  • 04.01.01 - Crea una página web con tres párrafos. El primero contendrá 3 palabras (separadas) en negrita. El segundo tendrá toda una frase (pero no todo el párrafo) en cursiva. El tercero tendrá dos saltos de línea intermedios. Debe haber un título antes del primer párrafo.
  • 04.01.02 - Crea una página web que muestre una lista ordenada con los días de la semana y una lista sin numerar con los meses de año
  • 04.01.03 - Crea una tabla con un "horario": columnas para representar los días del lunes al viernes, otra columna inicial para las horas; los datos intermedios serán las tareas que hay que realizar a cada hora de cada día

4.2. Formularios

Una forma habitual de pedir datos al usuario es mediante un "formulario", que tenga casillas para introducir textos, para escoger entre varias opciones...
  • El formulario comenzará con
    y acabará con
  • Las casillas de introducción de texto se indicarán con <input type="text" />. Podemos darle un nombre ("name"), que será necesario si esa página se va a comunicar con otra, pero en nuestro caso, que "jugaremos" desde la misma página, no lo será tanto. También podemos indicar un valor por defecto ("value"), que aparezca ya escrito, antes de que el usuario introduzca nada: <input name="nombre" type="text" value="Nacho" />
  • Las casillas para contraseñas se crean de la misma forma, pero serán del tipo "password", en vez de "text": <input name="clave" type="password" />
  • Las "casillas de selección múltiple" (checkbox) se indican de forma similar: <input name="intereses" type="checkbox" value="Viajes" />Interesado en los viajes<br /> <input name="intereses" type="checkbox" value="Deporte" />Aficionado a los deportes
  • Las "casillas de selección única" (radio buttons) son parecidas, pero sólo una de ellas podrá estar seleccionada simultáneamente: <input name="sexo" type="radio" value="Hombre" /><input name="sexo" type="radio" value="Mujer" />
  • Las listas desplegables se indican entre <select> y </select>, y cada una de sus opciones entre <option> y </option>: <select name="ciudad"><option value="m">Madrid</option><option value="se">Sevilla</option></select>
  • La forma habitual de crear un botón que termine un formulario es con un <input name="Enviar" type="submit" />, pero estos botones hacen que el formulario se dé por terminado y se salte a una segunda página que lo procese. Como nosotros no vamos a usar una segunda página (al menos por ahora), sino que será la propia página la que manipule esos datos, por ahora usaremos un <button>: <button type="button">Enviar</button>
Un ejemplo:

<html>
<body>
    <form>
        Dime tu nombre:
        <input type="text" name="nombre" value="Nacho" />
        <br />
 
        Y tu clave:
        <input type="password" name="clave" />
        <br />
 
        Intereses:<br />
        <input type="checkbox" name="intereses" value="Viajes">
        Interesado en viajar
        <br />
        <input type="checkbox" name="intereses" value="Deporte">
        Aficionado a los deportes
        <br />
 
        Sexo: <br />
        <input type="radio" name="sexo" value="Hombre" />
        Hombre <br />
        <input type="radio" name="sexo" value="Mujer" />
        Mujer <br />
 
        Ciudad: 
        <select name="ciudad">
            <option value="m">Madrid</option>
            <option value="se">Sevilla</option>
        </select>
        <br />
 
        <button type="button">Enviar</button>
 
    </form>
</body>
</html>
 


que se vería:




Ejercicios propuestos
  • 04.02.01 - Crea un formulario que muestre que pida al usuario su nombre y su contraseña, e incluya un botón para "Enviar" esa información (que, por ahora, no se enviará realmente a ningún sitio).
  • 04.02.02 - Crea un formulario para que el usuario introduzca una fecha: el día será una casilla de texto, el mes será una lista desplegable y el año será una serie de "radio buttons" que permita escoger los años 2012, 2013, 2014 o 2015.
  • 04.02.03 - Crea un formulario que permita indicar al usuario su nombre (en un casilla de texto), sus años de experiencia como programador (en otra casilla de texto) y los lenguajes de programación que conoce (a escoger uno o varios entre C, C++, C#, Java, JavaScript, Pascal. Debes usar una tabla de dos columnas: en la primera columna estará el texto que explica lo que el usuario debe introducir en cada campo y en la segunda columna aparecerá el correspondiente campo. Esto ayudará a que los datos queden alineados y la apariencia en pantalla sea más elegante.
(Puedes seguir leyendo...)

12 enero 2013

JavaScript para impacientes - 3.5. Condiciones repetitivas 2: do-while


(Si no lo has leído antes, posiblemente te interesará el apartado anterior)

Cuando queremos que algo se repita al menos una vez, lo que hemos hecho es "dar una primera pasada" y luego repetir con "while":

<html>
<body>
Dividiendo numeros...
<script>
    var n1 = prompt("Dime un numero");
    var n2 = prompt("Dime otro numero");
    while (n2 == 0)
    {
        n2 = prompt("No debe ser cero. Dime otro");
    }
    document.write(n1 + " dividido entre "+ n2 + " es: ");
    var resultado = parseInt(n1) / parseInt(n2);
    document.write(resultado);
</script>
</body>
</html>
 

Pero tenemos también otra construcción un poco más natural: do-while, en la que la condición se comprueba al final, no al principio, de modo que no es necesaria esa "primera pasada":

<html>
<body>
Dividiendo numeros con do-while...
<script>
    var n1 = prompt("Dime un primer numero");
    var n2;
    do
    {
        n2 = prompt("Dime el segundo numero (no debe ser cero)");
    }
    while (n2 == 0);
    document.write(n1 + " dividido entre "+ n2 + " es: ");
    var resultado = parseInt(n1) / parseInt(n2);
    document.write(resultado);
</script>
</body>
</html>
 

Ejercicios propuestos
  • 03.05.01 - Crea una página web que muestre los números pares del 10 al 20 (ambos incluidos), usando "do-while"
  • 03.05.02 - Crea una página que pida al usuario una serie de números, hasta que se pulse Intro sin escribir nada (se introduzca una cadena vacía), momento en el que se dejará de pedir datos y se mostrará la suma de todos ellos. Esta variante debe usar do-while, en vez de while.
  • 03.05.03 - Crea una página web que pida al usuario su nombre y su contraseña, y se repita hasta que introduzca como nombre "Juan" y como contraseña "1234", usando do-while en vez de while.

3.6. Contadores con "for"

Existe una tercera forma de comprobar condiciones repetitivas: la orden "for". Internamente, se parece muchísimo a un "while", como veremos en los próximos dos ejemplos, pero se use usar para contar, por analogía con otros lenguajes de programación.
Primero veamos esa analogía: en lenguajes como BASIC, se puede contar del 1 al 10 con la orden "FOR X = 1 TO 10", que se podría traducir como "para x que va a tomar valores desde 1 hasta 10". Si queremos avanzar de 2 en 2, sería algo como "FOR X = 1 TO 10 STEP 2". En lenguajes que derivan de C (como es el caso de JavaScript), la sintaxis, aunque recuerda a ésta, es un poco más complicada: la orden "for" tendrá 3 partes, separadas por "punto y coma":
  • La primera parte dará un valor incial a una variable (por ejemplo, "x = 1")
  • La segunda detallará qué condición se debe repetir (por ejemplo, " x <= 10")
  • La tercera parte será la que se encargue de pasar de un valor de la variable al siguiente (como podría ser "x = x+1" o bien "x++" si queremos avanzar de uno en uno, y "x = x+2" o "x+=2" para avanzar de dos en dos.
Suena difícil, pero no lo es tanto. Primero vamos a recordar cómo podíamos contar usando "while" (usando la forma abreviada para incrementar el valor de la variable que hace de contador):

<html>
<body>
Vamos a contar con "while"... 
<script>
    var contador = 1;
    while (contador <= 10)
    {
        document.write(contador + " ");
        contador++;
    }
</script>
</body>
</html>
 

Convertir esto a un "for" es relativamente sencillo:

<html>
<body>
Vamos a contar con "for"... 
<script>
    var contador;
    for (contador = 1; contador <= 10; contador++)
    {
        document.write(contador + " ");
    }
</script>
</body>
</html>
 

Ejercicios propuestos
  • 03.06.01 - Crea una página web que muestre los números del 1 al 20 (ambos incluidos), usando "for"
  • 03.06.02 - Crea una página web que muestre los números del 1 al 16, (ambos incluidos), saltando de 3 en 3, usando "for"
  • 03.06.03 - Muestra los números pares del 10 al 20 (ambos incluidos), usando "for"
  • 03.06.04 - Muestra los números del 15 al 5, descendiendo (ambos incluidos), usando "for"
  • 03.06.05 - Escribe los múltiplos del 5 que hay entre el 5 y el 50 (ambos incluidos), usando "for"
  • 03.06.06 - Escribe los múltiplos de 3 que hay entre el 50 y el 5 (ambos incluidos), descendiendo, usando "for"
Pista: para hallar los múltiplos de 5, se puede comenzar en 5, y sumar 5 en cada pasada. Otra alternativa es calcular el resto de la división: si al dividir el número entre 5 se obtiene resto 0, quiere decir que era un múltiplo de 5. Tenemos un operador para calcular el resto de la división (que también se conoce como "la operación módulo"): el símbolo de porcentaje. "5 % 3" es la forma de escribir "el resto de dividir 5 entre 3", o simplemente "5 módulo 3":

<html>
<body>
Multiplos de 5... 
<script>
    var contador;
    for (contador = 1; contador <= 10; contador++)
    {
        if (contador % 5 == 0)
            document.write(contador + " ");
    }
</script>
</body>
</html>
 

3.7. ¿Cuándo usar cada tipo de condición repetitiva?

Casi cualquiera estructura repetitiva se podría usar para casi cualquier caso, pero, por su construcción, cada una resulta ligeramente más cómoda que las demás para un tipo de problema concreto:
  • "for" - Cuando sepamos cuantas veces queremos repetir algo, y usaremos un contador para hacerlo (por ejemplo, escribir 5 veces un texto)
  • "do-while" - Cuando algo se deba repetir al menos una vez (por ejemplo, pedir una contraseña)
  • "while" - Cuano se trate de algo repetitivo, pero que quizá no llegue a ocurrir nunca, como el mostrar datos de una base de datos... que podría estar vacía.
Ejercicios propuestos
  • 03.07.01 - Crea una página web que pida un número al usuario y muestre cuáles son sus divisores.
  • 03.07.02 - Pide un número y muéstralo como producto de sus factores primos (por ejemplo: 24 = 2*2*3). Para hacerlo de forma más mecánica, puede ayudarte que termine en "*1": 24 = 2*2*3*1
  • 03.07.03 - Genera al azar un número del 1 al 100 y da al usuario 6 oportunidades para adivinarlo.
  • 03.07.04 - Pide al usuario dos números y calcula cuanto es el primero elevado al seguno, usando multiplicaciones sucesivas. Por ejemplo. 2 elevado a 3 es lo mismo que 2*2*2, y su resultado es 8
  • 03.07.05 - Pide al usuario un ancho y un alto y dibuja un rectángulo formado por asteriscos, que tenga ese ancho y ese alto. Por ejemplo, para anchura 4 y altura 3 podría ser:
****
****
****
  • 03.07.06 - Crea un página web que calcule el cambio de una compra, utilizando monedas (o billetes) del mayor valor posible. Supondremos que tenemos una cantidad ilimitada de monedas (o billetes) de 100, 50, 20, 10, 5, 2 y 1, y que no hay decimales. La ejecución podría ser algo como:
Precio? 44
Pagado? 100
Su cambio es de 56: 50 5 1

Precio? 1
Pagado? 100
Su cambio es de 99: 50 20 20 5 2 2

(Puedes seguir leyendo...)