Ejercicio piezas

Leer los datos almacenados en el JSON para crear una página HTML.

Archivo datos: "piezas.json" Página web: "piezas.html"

1) Crear la página HTML que tenga <section>

<body onload="iniciar()">
    <h1>Piezas de ajedrez</h1>
    <section id="ajedrez"></section>
</body>

2) Crear la función Javascript

function iniciar() 
{
}

3) Crear una variable con todo los datos JSON.

var piezas = --AQUÍ-VA-EL-JSON--;   

4) Obtener una referencia de la etiqueta <section>

var ajedrez = document.querySelector('#ajedrez')

5) Crear un bucle para recorrer las propiedades del objeto. Para cada propiedad que hay en el objeto piezas.

for (var propiedad in piezas) 
{

}   

6) Obtener el valor indicado por la propiedad

var pieza = piezas[propiedad];

7) Obtener las propiedades de la pieza.

var nombre = pieza.nombre;
var puntos = pieza.puntos;

8) Poner etiquetas HTML:

nombre = "<h2>" + nombre + "</h2>";
propiedad = "<p>Código " + propiedad + "</p>";
puntos = "<p>" + puntos + " puntos</p>";

9) Añadirlo a la etiqueta <section>

ajedrez.innerHTML += "<article>" 
    + nombre + propiedad + puntos 
    + "</article>";

Ejercicio 2.2

1) Descarga una imagen de cada pieza de ajedrez y guardalas en la misma carpeta.

2) Añadir a la variable piezas los nombres de los archivo de imagen.

3) Mostrar las imágenes.

Proinf.net