Ejercicios Unidad 6

EJERCICIO: u6e1_analisispagina:

Dispones del código de una página web en html: u6e1_analisispagina_texto.html.

Introduce en el apartado de script el código necesario para extraer:

• El número de párrafos de la página.
• El texto del segundo párrafo.
• El número de enlaces de la página.
• La dirección del primer enlace.
• La dirección del penúltimo enlace.
• El número de enlaces que apuntan a /wiki/Municipio
• El número de enlaces del primer párrafo.

Para agregar texto en la página deberás introducir una etiqueta div con el id=info y añadir en ella toda la información detallada mediante:

Var info=document.getElementById(“info”);

Info.innerHTML = “Texto informativo”;

EJERCICIO: u6e2_listado:

Crea una página web que tenga un listado de tipo <ul> con un <li> de muestra.

Introduce un botón en la página que, cuando lo pulses, te muestre un prompt para que el usuario introduzca un texto.

Una vez cerrado el prompt el valor se añadirá como un nuevo <li> a la lista creada.

Añade dos botones más con texto “Borrar primer li” y “Borrar último li” de modo que cuando pulses el primer botón borre el primer elemento de la lista y cuando pulses el último borre el último elemento de la lista.

EJERCICIO: u6e3_formulario:

Crea de manera dinámica (es decir, al cargarse la página) el formulario que definimos en el ejercicio u5e1_formulario.

Ten en cuenta que el formulario deberá tener los atributos necesarios para que, al crearse, tenga la misma funcionalidad que el que creaste en html.

No olvides añadir las etiquetas <label> a cada uno de los elementos.

EJERCICIO: u6e4_generadorformularios:

Crea una aplicación que te permitirá generar tus propios formularios de manera dinámica. Para ello dibuja una tabla de una sola fila y varias columnas. En cada columna habrá un botón que realice lo siguiente:

1. Crear un input de tipo texto. Le preguntará al usuario mediante un prompt qué nombre (atributo name) tiene el input.
2. Crear un input de tipo password. Le preguntará al usuario mediante un prompt qué nombre (atributo name) tiene el input.
3. Crear un textarea. Le preguntará al usuario el nombre y generará automáticamente un textarea de 40 columnas y 5 filas.
4. Crear un label. Preguntará al usuario a qué input va referido (atributo for).
5. Crear una imagen. Preguntará al usuario qué ruta tiene la imagen (atributo src).
6. Crear un checkbox. Preguntará al usuario el nombre y el valor (atributos name y value).
7. Crear un radio. Preguntará al usuario el nombre y el valor (atributos name y value).
8. Crear un botón (submit). Preguntará al usuario el nombre y el valor (atributos name y value).

Ejercicio examen final

Queremos crear una página en la que generar una fila de una tabla con información de plantas de nuestra floristería haciendo uso del DOM del documento (puedes ayudarte con el primer ejercicio).

Para ello, realiza un programa en Javascript en un archivo aparte que añadirás en el head del html y que se cargará tras cargar el documento. Realizará lo siguiente:

1. Añade un botón al principio de la página con el texto “Generar planta”.

1. Solicitará al usuario la información de la planta (nombre, ubicación, ejemplares y flor) con 4 prompt.
2. Una vez introducidos los datos se creará un nueva fila en la tabla.

Junto al botón anterior añade otro con el texto “Borrar fila”. Este botón borrará la última fila introducida.

3. Al final de la página añade un botón más con que permita mostrar el número de filas de la tabla. No utilices un contador al generar las imágenes: haz un programa que cuente el número de nodos de cada fila que haya.

Ejercicio examen 2º evaluación

Queremos crear una página en la que colocar los personajes de la serie One Piece haciendo uso del DOM del documento.

Para ello, a partir de la página ejercicio2.html que dispone de una clase CSS con las propiedades de una imagen, realiza un programa en Javascript en un archivo aparte que añadirás en el head del html y que se cargará tras cargar el documento. Realizará lo siguiente:

1. Añade un botón al principio de la página con el texto “Generar personaje”.

a) Cuando hacemos clic en el botón deberá aparecer un prompt con el siguiente texto: “Elija el nombre del personaje: 1. Sanji, 2. Zoro, 3. Nami, 4. Luffy.

b) Cuando el usuario elija un número, mediante un switch, mostrará la imagen del personaje elegido (dispones de las 4 imágenes en la carpeta img_onepeace.

2. Junto al botón anterior añade otro con el texto “Borrar personaje”. Este botón borrará la última imagen introducida.

3. Al final de la página añade 4 botones más con los textos: “Nº Sanji”, “Nº Zoro”, “Nº Nami” y “Nº Luffy”. Cuando el usuario haga clic en cada uno de ellos mostrará el número de imágenes que hay de cada personaje. No utilices un contador al generar las imágenes: haz un programa que cuente el número de nodos de cada imagen que haya.

Otros ejercicios

1. Crea una página web que tenga un TextArea y un botón "Crear párrafo". Cuando el usuario haga clic sobre el botón se creará un nuevo párrafo que contendrá el texto del TextArea. En caso de que el TextArea esté vacío, mostrará un mensaje de error y no creará ningún párrafo.