Ejercicios Unidad 7

EJERCICIO: u7e1_lectorficheros:

Modifica el código de la página holamundo_mejorado.html para que haga lo siguiente:

• Crea un campo de texto en el que, nada más cargarse la página, se cargue la url de la misma (ver Unidad 3).
• Crea un botón junto al campo de texto que se llame “Mostrar contenido” y que al hacer clic sobre él cargue en un textarea el contenido indicado en la url.
• Crea el textarea que inicialmente está vacío, pero que cargará el contenido de la url del campo de texto en él.

EJERCICIO: u7e2_localidad:

A partir de los códigos que hemos creado en clase deberás diseñar un programa que tenga las siguientes características:

• Una página con HTML que tenga un input de tipo texto y un botón: cuando el usuario introduzca el nombre de una localidad y pulse el botón obtendrá, en un div “resultado”, un mensaje que indicará si la ciudad está incluida dentro de una lista de ciudades o no. El mensaje será rojo si no está incluida y verde en caso afirmativo.
• Una archivo en PHP que compruebe que la localidad recibida por parámetro está o no incluida dentro de una lista de 10 localidades (utiliza un array en PHP y recórrelo para comprobarlo).
• La petición debe realizarse de forma asíncrona, de modo que no se recargará la página, sino que se mostrará el resultado una vez finalizada la consulta al servidor.

EJERCICIO: u7e3_xml:

A partir de los ficheros que permiten procesar un XML, modifícalos de manera que el XML a procesar lo hayas creado tu mismo con los siguientes datos:

• Series: será el elemento principal del XML.
• Serie: contendrá los datos de una serie en concreto, que serán:
• Título: nombre de la serie.
• Cadena: nombre de la cadena que produce la serie (HBO, FX, etc.)
• Director: nombre del director de la serie.
• Año: año de estreno de la serie.
• Terminada: podrá contener un valor “sí” o “no” en función si ha terminado o no su emisión.

Al procesar el XML se mostrarán todos los datos en una tabla. Tendrá las siguientes condiciones:

• El título, la cadena y el director: el título será negrita, y el director en cursiva.
• El año aparecerá en color rojo si la serie es anterior al año 2000, en amarillo si está entre el 2001 y el 2010 y en verde si es posterior al 2011. Estas variaciones se recogen en un archivo en CSS con reglas, como por ejemplo .rojo, .amarillo o .verde.
• En la celda “terminada” habrá una imagen determinada en caso de que en el XML se registre un Sí o un No.

EJERCICIO: u7e4_json:

Crea un archivo json equivalente al XML que creaste en el ejercicio anterior y comprueba su funcionamiento con el JSON Viewer (http://jsonviewer.stack.hu/).

Basándote en el ejemplo de la frutería, procesa el JSON de manera que obtengas el mismo resultado que obtuviste en el ejercicio anterior (la tabla de las series con las especificaciones dadas).

Recuerda que solamente tendrás que modificar los siguientes archivos:

• datosjson.php: donde modificarás el XML por el JSON.
• Index.js: donde procesarás los datos teniendo en cuenta que se trata de un archivo JSON.

EJERCICIO: u7e5_jquery:

A partir del fichero ejercicios.html:

• Añade la librería jQuery.
• Añade la referencia a un archivo llamado holamundo.js
• Crea el archivo holamundo.js que cargue la página con Jquery (con la acción .ready) que muestre un alert con el texto (“¡Hola, mundo!”).

EJERCICIO: u7e6_selectores:

A partir del fichero ejercicios.html crea un nuevo archivo llamado selectores.js que realice las siguientes acciones:

• Mostrar un alert delante de cada cambio que vayamos a hacer sobre el documento.
• Modificar todos los elementos <h1> con el texto “Come aquí”.
• Modificar el primer elemento <h2> con el texto “Frutas”.
• Modificar el segundo elemento <h2> con el texto “Vegetales”.
• Modificar el tercer elemento <h2> con el texto “Pan”.
• Modifica todos los elementos de la lista que estén a partir del índice 3 para que aparezca “superior”.
• Modifica el valor del campo de texto del formulario para que dentro aparezca “Introduce texto”.
• Modifica el valor de todas las celdas pares de la tabla para que aparezca “0” y las impares para que aparezca “1”.
• Cambia todos los elementos que tengan un atributo “href” para que vayan a http://www.google.com
• Cambia el texto de los párrafos de clase “excerpt” para que aparezca “Entrada”.

EJERCICIO: u7e7_selectores2:

Crea un archivo html que tenga una tabla con 10 filas (y mínimo 2 columnas). La primera y la última fila serán filas de encabezado (<th>).

Crea un CSS con las siguientes reglas:

• .rojo: permite modificar el fondo del elemento a color #F5A9BC.
• .azul: permite modificar el fondo del elemento a color #A9BCF5.
• .negrita: permite modificar el tipo de letra a negrita (bold).

Realiza las siguientes modificaciones con jQuery:

• Ponle borde a la tabla mediante el atributo border.
• Asigna a las filas de encabezado de la parte superior un borde doble.
• Asigna a las filas de encabezado de la parte inferior solo borde superior. El resto no se verán.
• Asigna a las celdas pares la clase .rojo.
• Asigna a las celdas impares la clase .azul.
• Asigna a las celdas de encabezado la clase .negrita.
• Aumenta el alto de las celdas de encabezado para que sea diferente del predeterminado.
• Oculta la fila 5 (método .hide()).
• Pon en amarillo todas las celdas que tengan el texto "Amarillo".

EJERCICIO: u7e8_imágenes:

Crea un archivo html que tenga tres imágenes iguales (por ejemplo, la que utilizaste para el ejercicio de los simpsons). Añade cuatro botones: "Restaurar", "Rotar", "Ocultar" y "Mostrar".

Añade los siguientes eventos para que, a través de JQuery, se realicen las siguientes modificaciones:

• Al colocarnos con el ratón sobre cualquiera de las imágenes, se mostrará otra imagen en su lugar (puedes utilizar tres imágenes del ejercicio de los simpsons, por ejemplo). También mostrará un mensaje con la ruta href correspondiente a la imágen que se está mostrando.
• Al hacer clic sobre cualquiera de las imágenes, su tamaño se aumentará y mostrará un mensaje con el tamaño actual. Si volvemos a hacer clic sobre ella, volverá al tamaño original (puedes comprobarlo con un if).
• Si hacemos clic sobre el botón "Restaurar", las imágenes volverán al tamaño original.
• Si hacemos clic sobre el botón "Rotar", las imágenes cambiarán de la primera a la segunda, de la segunda a la tercera, y de la tercera a la primera.
• Si hacemos clic sobre el botón "Ocultar", las imágenes desaparecerán.
• Si hacemos clic sobre el botón "Mostrar", las imágenes aparecerán de nuevo.