Javascript, arrays
Este sencillo ejercicio con HTML y Javascript puede servir de introducción para hablar de los arrays en Javascript.
Al cargar una web que contenga este código, se ejecutará mostrando los elementos de un array de diversas formas, como viene comentado en el código.
<!DOCTYPE html>
<html>
<body>
<i><p id=»listatostring»></p></i>
<i><p id=»unelemento»></p></i>
<i><p id=»0″></p>
<p id=»1″></p>
<p id=»2″></p>
<p id=»3″></p></i>
<i><p id=»todo»></p></i>
<script>
// crear un array
var fruits = [«Banana», «Orange», «Apple», «Mango»];
//limpia elementos vacíos
fruits = fruits.filter(Boolean);
// mostrar el array
// El método <i>toString()</i> devuelve un array como una string con los elementos del array separados por comas
document.getElementById(«listatostring»).innerHTML = fruits.toString();
// Sintaxis para enseñar un elemento de un array: <i>element[index]
document.getElementById(«unelemento»).innerHTML = fruits[3];
//recorrer el array
for (var i=0; i<fruits.length; i++) {
// Mostrar el array separado en distintos elementos HMTL
// permite filtrado e elementos con condicionales
if (fruits[i]!=»Apple») {
document.getElementById(i).innerHTML = fruits[i];
// mostrarlo de otra forma, quizá más elegante
// Mostrar el array dentro de un elemento HTML sin usar toString(),
// añadiendo un espacio entre elementos
document.getElementById(«todo»).innerHTML += » «+fruits[i];
}
}
</script>
</body>
</html>