P - Tarea JS - 09

tarea Tarea 09 - Estructuras secuenciales de programación. Funcionalidad para input y button.

Ejercicio 1: Realizar la carga del lado, L, de un cuadrado, mostrar por pantalla el perímetro, P, del mismo (P = 4·L).

Ejercicio 2: Hacer un programa que lea la base, B, y la altura, H, de un rectángulo, mostrando por pantalla su área (A = B·H).

Ejercicio 3: Desarrollar un programa que pida el precio, P, de un artículo y la cantidad, C, devolviendo por pantalla el total, T, incluido un iva del 21% (T = (C·P)·1,21).

Guarda la tarea en una carpeta llamada [09-estructuras_secuenciales] que deberá estar dentro de otra carpeta general llamada [tareas_JS] donde irás guardando todas las tareas propuestas del curso.

Detalles teóricos

Cuando en un problema sólo participan operaciones, entradas y salidas se la denomina estructura secuencial. Un programa donde se ingresa el nombre de una persona y su edad se trata de una estructura secuencial.
Un ejemplo de otro algoritmo con estructura secuencial sería: "realizar la carga de dos números por teclado e imprimir su suma y su producto".

Consideraciones:

Algo que debemos tener en cuenta es que si queremos que el operador + sume los contenidos de los valores numéricos ingresados por teclado, debemos llamar a la función parseInt y pasar como parámetro las variables n1 y n2 sucesivamente. Con esto logramos que el operador más, sume las variables como enteros y no como cadenas de caracteres. Si por ejemplo sumamos 3 + 2 sin utilizar la función parseInt el resultado será 32 en lugar de 5, ya que el operador + concatena las dos cadenas. En JavaScript no se puede indicarle de qué tipo es una variable, por eso requiere mucho más cuidado cuando operamos con sus contenidos.
Para que nuestros programas sean más profesionales a partir de ahora vamos a utilizar el elemento input para introducir datos y el elemento button para que el usuario pulsa cuando quiera obtener un resultado.
Apuntaremos, desde JavaScritp, a éstos y otros elementos HTML haciendo uso de su ID mediante getElementById()

Usa la estructura del ejemplo resuelto como base para resolver muchos de los ejercicios de este curso.

Ejemplo resuelto

En este ejemplo calculamos la suma de dos números.
(Nota: elimina la primera barra inclinada tanto de href como de src)


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Sumar dos números</title>
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
  <div class="contenedor">

    <div id="titulo"></div>
    <div id="info"></div>

    <label for="n1">Escribe un número a:</label>
    <input type="text" id="n1" size='10'><br>

    <label for="n2">Escribe un número b:</label>
    <input type="text" id="n2" size='10'>

    <button id='boton'>Calcular suma</button>
    <div id="resultado"></div>

  </div>

<!-- JavaScript -->
<script src="/js/codigo.js"></script>  
</body>
</html>


var boton = document.getElementById('boton');

// Calcular la suma
function Sumar(){
  var a = document.getElementById('n1').value;
  var b = document.getElementById('n2').value;
  a = parseInt(a);
  b = parseInt(b);
  return (a+b);
}
// Mostrar resultado en pantalla
function Mostrar(){
  var mensaje = 'La suma es = ';
  var resultado = document.getElementById('resultado');
  mensaje += Sumar();
  resultado.innerHTML = mensaje;
}

boton.onclick = Mostrar;


* { 
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.2s ease-in;
}
:focus { outline: 0 none transparent; }
body {
  min-height       : 100vh;
  font             : 16px/1.2 sans-serif;
  display          : flex;
  flex-direction   : column;
  background-color : rgba(70, 130, 180, 0.6);
}
.contenedor {
  max-width        : 800px;
  width            : 90%;
  margin           : auto;
  padding          : 2em;
  border-top       : 10px solid rgba(0, 0,0, 0.5);
  background-color : rgba(0, 0, 0, 0.05);
}
#titulo { font-size: 2em; }
#info   { font: italic 1em/1.1 serif; }

label, input, button { 
  margin  : 0.5em 0.25em;
  padding : 0.25em 0.5em;
}
input  { font-family: monospace; }
button { display: block; cursor: pointer; }

#info, #resultado {
  min-height       : 10vh;
  margin           : 1em 0;
  padding          : 0.5em;
  background-color : rgba(0, 0, 0, 0.05);
}

Etiquetas: JavaScript, Tarea

Imprimir