Pequeño simulador interactivo en JavaScript

Fernando - Sep 11 - - Dev Community

Mediante un simulador interactivo podremos imitar algunas operaciones que se realizan en la vida cotidiana , este apartado comprende una inicialización a lo que se conoce como algoritmos.

Herramientas a utilizar para la construcción:
1) function( ) { … }
2) prompt (" … ")
3) for (inicio; condición; contador) { … }
4) if ( condición ) { … } else { … }
5) alert (" … ")
6) parseInt( ), parseFloat( ), toFixed( ), isNaN( )

Paso1:

Declaro una función la cual debe llevar un nombre descriptivo de lo que la misma va a realizar. El nombre puede ser el que usted elija.

function calcularCostoTotal(){...}
Enter fullscreen mode Exit fullscreen mode

Paso 2:

Dentro de la funcion pido al usuario que ingrese una cantidad de productos mediante El método prompt() y la almaceno en una variable. Teniendo en cuenta que el método prompt() siempre devuelve una cadena de texto realizo el parseo de los datos mediante otro método, en este caso parseInt() para transformar lo ingresado en entero.

Si quieres indagar más acerca del método parseInt() puedes hacerlo en el siguiente enlace:

parseInt

const cantidadDeProductos = parseInt(
    prompt("Ingrese la cantidad de productos:")
  );
Enter fullscreen mode Exit fullscreen mode

Paso 3:

Dentro de la función defino momentáneamente una variable que almacene el costo total y la inicializo con un valor de 0.

let costoTotal = 0;
Enter fullscreen mode Exit fullscreen mode

Paso 4:

Recorro cada una de las posiciones definidas en la variable "cantidaDeProductos" a través de un ciclo for.
El ciclo for tendrá una variable i que hará de puntero y no dejará de circular hasta que la variable i sea <= a la cantidad de productos que el usuario haya establecido, mientras tanto incrementara de uno en uno.
Dentro del ciclo for A cada uno de los productos les defino un precio pidiéndole al usuario que lo ingrese mediante un prompt( ) y dicho precio lo guardo en una variable con un nombre descriptivo por ejemplo "precioProducto".

for (let i = 1; i <= cantidadDeProductos; i++) {
    const precioProducto = parseFloat(
      prompt(`Ingrese el precio del producto ${i}:`)
    );
Enter fullscreen mode Exit fullscreen mode

Paso 5:

Dentro del ciclo for realizo una validación para comprobar que el usuario ingrese un número concreto como precio del producto, y que dicho número no sea 0.
Para la validación estoy usando el metodo isNaN() puedes investigar mas en el siguiente enlace:

isNaN

if (!isNaN(precioProducto) && precioProducto > 0) {
      costoTotal += precioProducto;
Enter fullscreen mode Exit fullscreen mode

Si lo que esta dentro de la condición del if() es valido, a la variable "costoTotal" le asigno y adiciono en el mismo acto el valor de la variable "precioProducto".
De lo contrario le digo que el precio es invalido que lo ingrese nuevamente.

} else {
      alert("El precio ingresado es inválido. Inténtelo nuevamente.");
      i--;
Enter fullscreen mode Exit fullscreen mode

finalmente decremento i de uno en uno .

Paso 6:

Mediante el método alert( ) muestro por pantalla el costo total de los productos ingresados por el usuario.

alert(`El costo total de los productos es: $${costoTotal.toFixed(2)}`);
}
Enter fullscreen mode Exit fullscreen mode

Para convertir los decimales y establecer un parámetro se utiliza el método toFixed( ). Puedes leer mas acerca del mismo en el siguiente enlace:

tofixed()

Paso 7:

Finalmente llamo a la función para que la misma se ejecute.

calcularCostoTotal();
Enter fullscreen mode Exit fullscreen mode

El ejemplo anterior solo muestra algunas de las posibles funcionalidades que se podrían llevar a cabo mediante el uso de herramientas sencillas que forman parte del lenguaje javascript como las funciones integradas prompt(), alert() y console.log() y algunos métodos como parseFloat( ), toFixed(), isNaN( ).


//FUNCTION:
function calcularCostoTotal() {
  const cantidadDeProductos = parseInt(
    prompt("Ingrese la cantidad de productos:")
  );

  let costoTotal = 0;
  //FOR:
  for (let i = 1; i <= cantidadDeProductos; i++) {
    const precioProducto = parseFloat(
      prompt(`Ingrese el precio del producto ${i}:`)
    );
    //IF-ELSE:
    if (!isNaN(precioProducto) && precioProducto > 0) {
      costoTotal += precioProducto;
    } else {
      alert("El precio ingresado es inválido. Inténtelo nuevamente.");
      i--;
    }
  }
  alert(`El costo total de los productos es: $${costoTotal.toFixed(2)}`);
}

calcularCostoTotal();

Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . .
Terabox Video Player