domingo, 8 de abril de 2012

Array de objetos en JavaScript

Array de objetos en JavaScript



Objetos en nuestra Array: (Abre la consola de JavaScript para ver el objeto directamente)







Buenas tardes!

Hoy toca explicar como hacer una array de objetos usando JavaScript. Es posible que normalmente estemos acostumbrados a trabajar con un Array de numeros como este:

var array = [0,1,2,3,4,5,6]

Donde cada posición es un numero (integer) o cadenas de caracteres. Pero en ocasiones, los numeros o cadenas de caracteres se nos quedan cortos y debemos crear un objeto en cada posicion. Por lo tanto, en algun momento de la implementacion de nuestro programa nos puede interesar hacer un Array de objetos como los del ejemplo anterior (arriba del todo).

Probad de añadir elementos rellenando los campos de 'Nombre', 'Tipo', 'Texto' con lo que queráis. Una vez rellenados apretad al botón 'Añadir Objeto'.
Podremos ver nuestra Array con sus objetos dentro.

Para eliminar objetos basta con rellenar el campo valor y seleccionar el atributo que queremos usar para decidir qué elemento eliminar. Por ejemplo:
Si en 'valor' especificamos: 'aa'  (sin las comillas)   y en el select dejamos seleccionado 'Nombre' nos eliminará todos los objetos de nuestra Array que contenga en el atributo 'nombre' el valor 'aa'.

El código en si es bien simple, hay algunos elementos secundarios (básicamente estilos de CSS) que no forman parte de la estructura básica del objetivo del snipet.

El código fuente es el siguiente:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style type="text/css">
.muestra-objeto {
display: inline;
float: left;
overflow: auto;
width: 180px;
height: 180px;
background-color: aliceBlue;
border-color: red;
}
</style>

<script>
//Inicializamos el array i el objeto.
var array = new Array();
var objeto = {"nombre": null,"tipo": null, "timestamp": null, "texto": null};


function afegirObjecte(divs) {

console.log("Objeto directamente del formulario:");
console.log(divs);
//Extraemos lo que nos interesa de los divs y definimos el timestamp:
var nombre = divs.childNodes[1].value;
var tipo = divs.childNodes[3].value;
var texto = divs.childNodes[5].value
var timestamp = new Date().getTime();

//Insertamos objeto en Array:
array.push({"nombre": nombre,"tipo": tipo, "timestamp": timestamp, "texto": texto});
console.log("Array despues de añadir este objeto: ");
console.log(array);
mostrarObjetosArray()
}

//Para eliminar un objeto debemos especificar cuál queremos eliminar. Para ello definimos dos parametros en la función
//filtro: sera uno de los atributos del objeto: nombre, tipo, texto o timestamp
//valor: aquel objeto que en el filtro que hemos definido contenga el valor aquí indicado será el elegido para eliminar.

function eliminarObjeto(divs) {

console.log("Objeto directamente del formulario:");
console.log(divs);
var valor = divs.childNodes[1].value;
var filtro = (divs.childNodes[3].value).toLowerCase(); //Recordemos que es sensible a mayusculas y minusculas (lo pasamos a minusculas).
var arrayTemp = new Array();
for (var i = 0; i < array.length; i++) {

if (array[i][filtro] != valor) {
arrayTemp.push(array[i]);
}
}
if (array.length == arrayTemp.length) {
alert("No se ha eliminado nada. \nRecuerda que 'valor' y filtro deben coincidir i existir en la array principal.");
}
array = arrayTemp;
console.log("Array despues de eliminar el objeto: ");
console.log(array);
mostrarObjetosArray()
}

function mostrarObjetosArray() {

var content = document.getElementById("mostrar-array");
while (content.hasChildNodes() == true) { //Eliminamos todo lo que hay en pantalla, del objeto y lo generaremos de nuevo.
content.removeChild(content.childNodes[0])
}
for (var i = 0; i < array.length; i++) { //Para cada elemento existente en la array
var div = document.createElement("fieldset"); //Creamos un div (cuadrado azulado en la pantalla);
div.className = "muestra-objeto"
var divNombre = document.createElement("div");
divNombre.textContent = "-Nombre: "+array[i].nombre;
var divTipo = document.createElement("div");
divTipo.textContent = "-Tipo: "+array[i].tipo;
var divTimestamp = document.createElement("div");
divTimestamp.textContent = "-Dia/Hora: "+new Date(array[i].timestamp).toUTCString();
var divTexto = document.createElement("div");
divTexto.textContent = "-Texto: "+array[i].texto;
div.appendChild(divNombre);
div.appendChild(document.createElement("hr"));
div.appendChild(divTipo);
div.appendChild(document.createElement("hr"));
div.appendChild(divTimestamp);
div.appendChild(document.createElement("hr"));
div.appendChild(divTexto);
content.appendChild(div);
}
}
</script>
</head>
<body>
<div style="width: 100%">
<fieldset style="display: inline;float:left;">
<div id="formulario">
<input type="text" placeholder="Nombre" id="nombre" />
<input type="text" placeholder="Tipo" id="tipo" />
<input type="text" placeholder="Texto" id="texto" />
<input type="button" value="Añadir objeto" onclick="afegirObjecte(document.getElementById('formulario'))" />
</div>
</fieldset>
<fieldset style="display: inline;float:left;">
<div id="formulario-eliminar">
<input type="text" placeholder="Valor" id="valor" />
<select>
<option>Nombre</option>
<option>Tipo</option>
<option>Texto</option>
</select>
<input type="button" value="Eliminar Objetos" onclick="eliminarObjeto(document.getElementById('formulario-eliminar'))" />
</div>
</fieldset>
</div>
<br />
<fieldset style="float:left;display: block;width:100%;">
<div>
<p>Objetos en nuestra Array: (Abre la consola de JavaScript para ver el objeto directamente) </p>
<div id="mostrar-array"></div>
</div>
</fieldset>
</body>
</html>

sábado, 7 de abril de 2012

"Capicua" o "Palindromo" en JavaScript

"Capicua" o "Palindromo" en JavaScript


Buenas tardes a todos!

Después de un tiempo sin redactar nada.. vuelvo a la carga con un pequeño snipet que puede ayudar a los mas nobeles en programación.
Como comprobar si una palabra es capicua (palindromo) usando una función de JavaScript.

La forma humana de resolver este problema es intentar leer la palabra al revés y fijarnos si el orden de las letras es el mismo que si se lee normal. Pues eso mismo se puede implementar usando la programación.

Para ello declaramos el método .reverse para las cadenas de caracteres (palabras), ya que por defecto JavaScript no trae esta función. Para ello se usa la propiedad prototype que nos permite construir métodos para un tipo de dato.

Llegados a este punto, lo demás es muy sencillo, simplemente comprobar si la palabra al revés es igual que la palabra normal.

Codigo fuente:




<html>
<head>
<script>

     //Definimos un metodo para el tipo de datos "string", que lo unico que hace es devolver nuestra palabra en orden inverso.
String.prototype.reverse=function(){return this.split("").reverse().join("");}

function testCapCua(word) {


//Una vez definido, ya lo tenemos practicamente hecho.
var inverseWord = word.reverse();
if (word == inverseWord) { //Si la palabra es igual a la palabra girada.
alert("La palabra '"+word+"' SI es cap i cua");
return(true); //Es capicua/palindromo.
}
else {
alert("La palabra '"+word+"' NO es cap i cua: '"+inverseWord+"'");
return(false); //NO es capicua/palindromo.
}
}
</script>
</head>

<body>
<input type="text" placeholder="Introducir palabra." id="input-word" />
<input type="button" onclick="testCapCua(document.getElementById('input-word').value)" value="Comprobar"/>
</body>
</html>