Gestión de Coches con Clases y Validación en JavaScript

Classified in Technology

Written on in English with a size of 4.18 KB

Definición de la Clase Coche

A continuación se implementa la clase Coche en JavaScript, la cual define atributos privados por convención, métodos de cálculo y un método estático para listar los elementos en una ventana emergente:

class Coche {
    constructor(marca, modelo, anioFabricacion, precioCompra, precioVenta) {
        this._marca = marca;
        this._modelo = modelo;
        this._anioFabricacion = anioFabricacion;
        this._precioCompra = precioCompra;
        this._precioVenta = precioVenta;
    }

    calculaGanancia() {
        return (this._precioVenta - this._precioCompra);
    }

    calculaEdad() {
        var anioActual = new Date();
        return (anioActual.getFullYear() - this._anioFabricacion);
    }

    static listarCoches() {
        var tabla = "<table border>" +
            "<tr>" +
            "<th>Marca</th>" +
            "<th>Modelo</th>" +
            "<th>Año Fabricación</th>" +
            "<th>Edad del coche</th>" +
            "<th>Precio Compra</th>" +
            "<th>Precio de venta</th>" +
            "<th>Ganancia/Pérdida</th>" +
            "</tr>";

        arrayCoches.forEach(coche => {
            tabla += ("<tr><td>" + coche._marca + "</td><td>" + coche._modelo + "</td><td>" + coche._anioFabricacion + "</td><td>" + coche.calculaEdad() + "</td><td>" + coche._precioCompra + "</td><td>" + coche._precioVenta + "</td><td>" + coche.calculaGanancia() + "</td></tr>");
        });

        tabla += "</table>";
        var miVentana = window.open("", "Coches", "height=500px,width=1000px");
        miVentana.document.write(tabla);
    }
}

Inicialización del Listado de Vehículos

Se inicializa el array con instancias predeterminadas de Coche:

var arrayCoches = [
    new Coche("Opel", "Corsa", 2014, 5000, 6500),
    new Coche("Ferrari", "Enzo", 2010, 15000, 20000),
    new Coche("Lamborghini", "Murcielago", 2000, 8000, 17000)
];

Proceso de Alta y Registro en el DOM

Función encargada de recolectar la información ingresada en el formulario HTML, verificarla y agregar el nuevo registro:

function alta() {
    var marca = document.getElementById("marca").value;
    var modelo = document.getElementById("modelo").value;
    var anio = document.getElementById("anio").value;
    var precioVenta = document.getElementById("precioVenta").value;
    var precioCompra = document.getElementById("precioCompra").value;

    if (confirm("¿Seguro que quieres dar de alta?")) {
        if (marcaValida(marca) && modeloValido(modelo) && anioValido(anio) && precioValido(precioVenta) && precioValido(precioCompra)) {
            arrayCoches.push(new Coche(marca, modelo, anio, precioCompra, precioVenta));
            alert("La operación se ha completado");
        } else {
            alert("Los datos introducidos no son válidos");
        }
    } else {
        alert("La operación ha sido cancelada");
    }
}

Funciones de Validación de Datos

Se emplean las siguientes comprobaciones para garantizar la integridad de los datos ingresados:

  • marcaValida y modeloValido: Verifican una longitud comprendida entre 2 y 20 caracteres.
  • anioValido: Comprueba una estructura de 4 dígitos y que no exceda el año actual.
  • precioValido: Valida que sea un valor numérico y mayor o igual a cero.
function marcaValida(marca) {
    return (marca.length >= 2 && marca.length <= 20);
}

function modeloValido(modelo) {
    return (modelo.length >= 2 && modelo.length <= 20);
}

function anioValido(anio) {
    var expresion = /\d{4}/;
    var anioActual = new Date();
    return (anio <= anioActual.getFullYear() && expresion.test(anio));
}

function precioValido(precio) {
    var expresion = /\d/;
    return (expresion.test(precio) && precio >= 0);
}

Related entries: