2. Pedir datos al usuario
JavaScript
2. Pedir datos al usuario
2.1. ¿Cómo pedimos datos al usuario?
Para comenzar a hacer programas un poco más serios, necesitamos datos que manipular. Una primera alternativa sencilla para obtener esos datos es pidiéndoselos al usuario. Igual que tenemos un "alert" que permite mostrar una ventana de aviso, también disponemos de un "prompt" que nos servirá para pedir datos.
Por ejemplo, podemos preguntar su nombre al usuario haciendo:
<html>
<body>
Pedir datos...
<script>
prompt("Dime tu nombre");
</script>
</body>
</html>Ese primer dato que indicamos entre paréntesis y comillas es el texto que queremos que aparezca como aviso para el usuario.
También podemos indicar un segundo dato, que sería un valor inicial para el texto que va a introducir el usuario:
<html>
<body>
Pedir datos...
<script>
prompt("Dime tu nombre", "ejemplo de nombre");
</script>
</body>
</html>Pero claro, normalmente querremos guardar eso que el usuario ha tecleado, para poder utilizarlo. Para eso usaremos "variables": un espacio de memoria del ordenador al que damos un nombre y en el que podemos guardar datos. Por ejemplo, podríamos pedir al usuario su nombre y guardarlo en una variable llamada "nombre":
<html>
<body>
Tu nombre es...
<script>
var nombre = prompt("Dime tu nombre");
document.write( nombre );
</script>
</body>
</html>2.2. Operaciones con números
Ahora que sabemos pedir datos, podemos solicitarle que introduzca dos o más, y a continuación hacer operaciones con ellos. Por ejemplo, podemos (intentar) pedirle dos números y mostrar su suma, así:
<html>
<body>
Sumador de numeros...
<script>
var n1 = prompt("Dime un numero");
var n2 = prompt("Dime otro numero");
document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
document.write(n1+n2);
</script>
</body>
</html>Pero esto no funciona bien. Vamos a analizar poco a poco qué sabemos hacer y qué está fallando:
-
Si escribimos document.write("hola"), se mostrará "hola" en la página (pero sin las comillas).
-
Si escribimos document.write("hola"+"tu"), se mostrará "holatu", todo junto (también sin las comillas, claro), porque el operador de la suma (+) se puede usar para textos, y lo que hace es crear un nuevo texto formado por esos dos.
-
Si escribimos document.write(2+3), como vimos en el apartado anterior, aparecerá un 5 en la página, porque, al no haber comillas, se toman como números y su suma tendrá un valor numérico.
- En cambio, en este programa, si introducimos los números 2 y 3, nos dirán que su suma es 23...
El motivo es que los datos que introducimos se consideran textos, y aunque 2+3 sea 5, si pedimos el resultado de n1+n2 se considerará que queremos unir esos dos textos en uno, de modo que el resultado no será un número, sino un nuevo texto, "23".
¿Se puede solucionar? Por supuesto: basta con decirle "toma esto como un número" antes de sumar. Eso lo conseguimos con "parseInt" (el dato que hay que tomar como número se indicará entre paréntesis):
<html>
<body>
Sumador de numeros...
<script>
var n1 = prompt("Dime un numero");
var n2 = prompt("Dime otro numero");
document.write("La suma de "+ n1 + " y "+ n2 + " es: ");
document.write(parseInt(n1)+parseInt(n2));
</script>
</body>
</html>Podemos hacer más operaciones matemáticas, claro. Las más básicas son:
- + Suma (ejemplo: 2+3 es 5)
- - Resta (ejemplo: 5-3 es 2)
- * Multiplicación (ejemplo: 2*3 es 6)
- / División (ejemplo: 3/2 es 1.5)
Ejercicios propuestos
- 02.01 - Crea una página web que pida al usuario su nombre y su (primer) apellido y escriba "Hola Sr. " seguido de su apellido, una coma y su nombre (por ejemplo, "Hola, Sr. Cabanes, Nacho")
- 02.02 - Crea una página web que pida al usuario dos números y escriba su multiplicación
- 02.03 - Crea una página web que pida al usuario dos números y escriba su diferencia
- 02.04 - Crea una página web que pida al usuario dos números y escriba su división
- 02.05 - Crea una página web que pida al usuario dos números a y b, y escriba el resultado de a2-b2
- 02.06 - Crea una página web que pida al usuario el ancho y el alto de un rectángulo y escriba cuanto es su perímetro (la suma de todos los lados) y su superficie (base por altura)