Dispongo de dos clases:
- Disco
- Tienda
Los discos se guardan en la tienda siempre y cuando al introducirlos en un formulario estén correctamente rellenados los campos. Si todo está OK, pulsamos el botón "Guardar disco" y llamaremos a la función addDisco(disco), función a la cual le pasamos el disco con los datos del formulario.
Mi duda está en los comentarios siguientes: ¿cómo relleno con los datos del formulario un objeto de tipo Disco? ¿Se puede crear un div para mostrar el error en caso de que: "El campo nombre no es correcto"?
Os dejo el código probado y testeado de las clases Disco y Tienda.
//Clase Disco. Le pasamos los atributos necesarios. Método constructor.
var Disco = function(nombre, cantante, ano, tipo, estanteria){
this.nombre = nombre;
this.cantante = cantante;
this.ano = ano;
this.prestado = false;
//Comprobamos que existe el tipo de musica pasado por argumento.
comprueba_tipo = function(tipo){
//Array de tipos de musica.
var array_tipos = ["rock", "pop", "puck", "indie"];
//Si no existe en el array... establecemos la primera posición de éste.
if(array_tipos.indexOf(tipo)<0){
return array_tipos[0];
}else{
return tipo;
}
}
//Establece la propiedad tipo de musica en funcion parametro tipo.
this.setTipoMusica = function(tipo){
this.tipo = comprueba_tipo(tipo);
}
this.tipo = comprueba_tipo(tipo);
//Comprobamos que la porpiedad estanteria sea un valor entre 1 y 10. En caso
//contrario, establecer el valor 0 por defecto.
var comprueba_estanteria = function(estanteria){
//Si la estanteria está entre 1 y 10, OK!
if(isNaN(new Number(estanteria))){
estanteria = 0;
}else{
//Si no esta entre 1 y 10, por defecto toma el valor 0.
if(estanteria<1 || estanteria>10){
estanteria = 0;
}
}
return estanteria;
}
//Establece la propiedad estanteria validando que sea un valor numerico entre 1 y 10.
this.setEstanteria = function(estanteria){
this.estanteria = comprueba_estanteria(estanteria);
}
this.estanteria = comprueba_estanteria(estanteria);
//Cambia la propiedad del estado del disco.
this.presta = function(nuevoEstado){
this.prestado = nuevoEstado;
}
//Metodo toString().
this.toString = function(){
return "El nombre del disco es "+this.nombre+" del cantante "+this.cantante+" fue publicado en "+this.ano+" de tipo de musica "+this.tipo+" en la estanteria "+this.estanteria+". Prestado: "+this.prestado+"";
}
}
//Comprobar la clase. Creamos un objeto pasandole datos a los argumentos.
/*var miDisco = new Disco("MachupichuPop", "Osmar", 1990, "pop", 8);
console.log(miDisco.toString());
miDisco.presta(true);
miDisco.setEstanteria(3);
miDisco.setTipoMusica("mamamam");
console.log(miDisco.toString());*/
//Clase Tienda. Constructor sin parametros.
var Tienda = function(){
//Creamos un array de discos.
this.numTotalDiscos = new Array();
//Devuelve el numero total de discos.
this.getNumeroDiscos = function(){
return this.numTotalDiscos.length;
}
//Devuelve el numero de discos que no estan prestados.
this.getNumeroDiscosDisponibles = function(){
var cantidad = 0;
for(var i=0; i<this.numTotalDiscos.length; i++){
if(this.numTotalDiscos[i].prestado==false){
cantidad++;
}
}
return cantidad;
}
//Añade un disco al array.
this.addDisco = function(disco){
this.numTotalDiscos.push(disco);
}
//Muestra los titulos de los discos almacenados.
this.getTituloDisco = function(i){
return this.numTotalDiscos[i].titulo;
}
//Devuelve el objeto Disco que esta en la posicion i-esima.
this.getDisco = function(pos){
return this.numTotalDiscos[pos];
}
//Elimina el disco cuyo titulo coincide con el que se pasa como parametro.
this.deleteDisco = function (titulo){
for(var i=0; i<this.numTotalDiscos.length; i++){
if(this.numTotalDiscos[i].nombre == titulo){
this.numTotalDiscos.splice(i,1);
break;
}
}
}
//Devuelve verdadero si existe el disco cuyo titulo coincide con el que se pasa.
this.existeDisco = function(tituloRecibido){
var existe = false;
for(var i=0; i<numTotalDiscos.length;i++){
var titulo = this.numTotalDiscos[i].nombre;
if(titulo==tituloRecibido)
existe = true;
break;
}
return existe;
}
//Modifica el titulo de un disco si existe.
this.modificaDisco = function(titulo, nuevoDisco){
for(var i=0; i<this.numTotalDiscos.length; i++){
if(this.numTotalDiscos[i].nombre == titulo){
this.numTotalDiscos[i] = nuevoDisco;
break;
}
}
}
}
//Creamos una tienda, y en ella insertamos varios discos para comprobar el funcionamiento.
var miTienda = new Tienda();
var miDisco1 = new Disco("MachupichuPop111", "Osmar111", 1989, "pop", 3);
miDisco1.presta(true);
var miDisco2 = new Disco("MachupichuPop222", "Osmar222", 1990, "pop", 8);
var miDisco3 = new Disco("MachupichuPop333", "Osmar33", 1956, "indie", 11);
miDisco3.presta(false);
miTienda.addDisco(miDisco1);
miTienda.addDisco(miDisco2);
miTienda.addDisco(miDisco3);
console.log(miDisco1);
console.log(miDisco2);
console.log(miDisco3);
console.log("Tengo "+miTienda.getNumeroDiscos()+ " disco/s en la tienda");
console.log("Tengo "+miTienda.getNumeroDiscosDisponibles()+ " disco/s prestados en mi tienda");
console.log("En la posicion 3 está el objeto Disco:[[[ "+miTienda.getDisco(2)+" ]]]"); //[2] es la posicion 3, empieza a contar el array desde pos[0].
Código HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Mi tienda de discos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/formulario.css" />
<script src="js/disco.js"> </script>
<script src="js/tienda.js"> </script>
<script src="js/formulario.js"></script>
</head>
<body>
<h1>Tienda de discos</h1>
<form id="formulario">
<div id="informacion" class="linea_formulario">
</div>
<div class="linea_formulario">
<label for="nombre">Nombre del disco</label>
<input type="text" name="nombre" id="nombre" />
<div class="limpia"> </div>
</div>
<div class="linea_formulario">
<label for="cantante">Cantante</label>
<input type="text" name="cantante" id="cantante" />
<div class="limpia"> </div>
</div>
<div class="linea_formulario">
<label for="anio">Año</label>
<input type="text" name="anio" id="anio" />
<div class="limpia"> </div>
</div>
<div class="linea_formulario">
<label for="estanteria">Estantería</label>
<input type="text" name="estanteria" id="estanteria" />
<div class="limpia"> </div>
</div>
<div class="linea_formulario">
<label for="favorito">Tipo de música</label>
<select name="tipo" id="tipo">
<option selected value="none">Elige uno...</option>
<option value="rock">Rock</option>
<option value="pop">Pop</option>
<option value="punk">Punk</option>
<option value="indie">Indie</option>
</select>
<div class="limpia"> </div>
</div>
<div class="linea_formulario">
<label for="prestado">Prestado:</label>
<div class="botones">
<input type="radio" name="prestado" id="prestado_si" value="si" /><span>Si</span>
<input type="radio" name="prestado" id="prestado_no" value="no" checked="checked"/><span>No</span>
</div>
</div>
<div class="linea_formulario">
<input type="button" id="guardar" value="Guardar disco" />
<input type="button" id="eliminar" value="Eliminar disco" />
<input type="button" id="ver" value="Ver disco" />
<input type="button" id="modificar" id="enviar" value="Modificar disco" />
<div class="limpia"> </div>
</div>
<div id="listado" class="linea_formulario">
Todavía no tienes ningún disco.
</div>
</form>
</body>
</html>
Código Javascript (aquí las dudas, mirar comentarios):
/*Creo un objeto/instancia de la clase Tienda.*/
var miTienda = new Tienda();
/* Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.
*/
window.addEventListener('load', iniciar, true);
//Función que se ejecuta tras cargarse el documento y registra el resto de eventos.
function iniciar(){
//Evento para validar que los campos estén con información correcta y NO estén vacíos.
document.getElementById('guardar').addEventListener('click', validarCampos, false);
}
/******************************************************************************
**************** FUNCIONES PARA LA COMPROBACION DE LOS CAMPOS ****************
******************************************************************************/
//Función que se encarga de validar los campos del formulario.
function validarCampos(evento){
//Valido los diferentes apartados del formulario. Si todo está OK...
if (validarCamposText(this) && comprobarNombre() && comprobarCantante() && comprobarAnio() && comprobarEstanteria() && confirm("¿Desea enviar el disco?")){
return true;
//Guardamos el disco en la tienda. Para ello tenemos la variable/objeto tienda llamada "miTienda".
//Si todo está correcto, llamaremos a la función "GuardarDisco()". A la cuál tendremos que pasarle el objeto Disco, ¿no?
}else{
//Cancelar el evento por defecto del envío del formulario.
evento.preventDefault();
return false;
}
}
//----------------------------------------------------------//
//Funcion para validar todos los campos input de tip "text".
function validarCamposText(objeto){
//La propiedad form del botón enviar contiene la referencia del formulario dónde está ese botón submit.
var formulario = objeto.form;
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Eliminamos la clase Error que estaría asignada a algún campo.
formulario.elements[i].className="";
}
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Escogemos los que son de tipo "text" y los que están vacíos...
if (formulario.elements[i].type == "text" && formulario.elements[i].value.trim()==""){
//Mostramos en un div, llamado "errores", un mensaje para el usuario de que el campo está vacío.
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" no puede estar vacío.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
//Aprovechamos para tratar el campo "Año", sólo debería admitir un valor numérico entre 200 y 2017.
}else if (formulario.elements[i].id=="anio"){
if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <2000 || formulario.elements[i].value >2017){
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o el año no está entre 2000 y 2017.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}else if (formulario.elements[i].id=="estanteria"){
if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <0 || formulario.elements[i].value >10){
document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o la estantería no está entre 0 o 10.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}
}
return true;
}
//Función para comprobar que el campo nombre no está vacío.
function comprobarNombre(){
if (!document.getElementById("nombre").value.trim()==""){
var nombre = document.getElementById('nombre').value;
//console.log(nombre);
return true;
}else{
document.getElementById("errores").innerHTML="El campo NOMBRE es obligatorio.";
document.getElementById("nombre").focus();
return false;
}
}
//Función para comprobar que el campo cantante no está vacío.
function comprobarCantante(){
if (!document.getElementById("cantante").value.trim()==""){
var cantante = document.getElementById('cantante').value.trim();
//console.log(cantante);
return true;
}else{
document.getElementById("errores").innerHTML="El campo CANTANTE es obligatorio.";
document.getElementById("cantante").focus();
return false;
}
}
//Función para comprobar que el campo anio no está vacío. Se deberá controlar con una expresión
//regular que tenga el formato: 2003, 2013, 2015... --> 4 dígitos.
function comprobarAnio(){
//4dígitos.
var patron = /^\d{4}$/;
//Analizamos el patrón.
if (patron.test(document.getElementById("anio").value)){
document.getElementById("anio").className="";
return true;
}else{
document.getElementById("errores").innerHTML="El campo AÑO es obligatorio.";
document.getElementById("anio").focus();
return false;
}
}
//Función para comprobar que el campo estanteria no está vacío.
function comprobarEstanteria(){
if (!document.getElementById("estanteria").value==""){
var estanteria = document.getElementById('estanteria').value;
//console.log(estanteria);
}else{
document.getElementById("errores").innerHTML="El campo ESTANTERIA es obligatorio.";
document.getElementById("estanteria").focus();
return false;
}
}