Actividad 3.6

Un poco de todo lo visto

En esta actividad ponemos en práctica diversos conceptos de HTML y JavaScript que hemos aprendido hasta ahora. Utilizamos eventos onclick para interactuar con distintos elementos del DOM como un título, una imagen y un botón, lo que permite cambiar el contenido y los estilos de la página de manera dinámica. Además, usamos prompt() para capturar datos del usuario y parseInt() para convertir esos datos en números, ajustando el tamaño de la imagen según la entrada del usuario. También se aplican cambios de estilo a través de la propiedad style, cambiando colores de fondo y texto.

Ejemplos:

<html>

<head>

<title>Ejemplo onclick</title>

</head>

<body>

<button id="id3" onclick="f3()" >boton1</button>

var elem1=document.getElementById("id1");

var elem2=document.getElementById("id2");

var elem3=document.getElementById("id3");

var estilo1 = "color:darkslategray;background:lightblue";

var estilo2 = "color:white;background:midnightblue";

function f1() {

var texto1=prompt("Escriba el Titulo:");

elem1.textContent=texto1;

}

function f2() {

var texto2=prompt("Tamaño de la img:");

var num=parseInt(texto2);

elem2.width = num;

elem2.height = num;

elem2.src = "https://acortar.link/GDcjdu";

elem1.style=estilo1;

}

function f3() {

var texto3=prompt("Escriba el texto del buton:");

elem3.textContent=texto3;

elem1.style=estilo2;

}

</script>

</body>

</html>

Actividad 3.6A

En esta actividad, crearás una página web que permite al usuario interactuar con una imagen mediante botones. Podrán cambiar el tamaño de la imagen a 200x200 o 400x400 píxeles y alternar entre dos imágenes diferentes usando enlaces específicos. Esta práctica ayudará a los estudiantes a entender cómo usar HTML y JavaScript para crear interactividad en una página web.

Crea una nueva página HTML con el nombre "Act36A". Dentro de la etiqueta <body>, agrega los siguientes elementos:
- <h1>Imagen</h1>
- <img id="id1" src="https://i.gifer.com/MQBP.gif" width="200" height="200">
- <button onclick="cambiarTamanio1()">Boton Tamaño 1</button>
- <button onclick="cambiarTamanio2()">Boton Tamaño 2</button>
- <button onclick="cambiarImagen1()">Cambiar Imagen 1</button>
- <button onclick="cambiarImagen2()">Cambiar Imagen 2</button>
Dentro de la etiqueta <script>, crear las siguientes variables y funciones:
- Variable que guarde la referencia al elemento HTML imagen.
  1. - var elem1 = document.getElementById("id1");
- Función para cambiar el tamaño de la imagen

function cambiarTamanio1() {

elem1.width = 200;

elem1.height = 200;

}

- Función para cambiar el tamaño de la imagen (400x400)

function cambiarTamanio2() {

elem1.width = 400;

elem1.height = 400;

}

- Función para cambiar la imagen a la primera URL

function cambiarImagen1() {

elem1.src = "https://acortar.link/X1VIZi";

}

- Función para cambiar la imagen a la segunda URL

function cambiarImagen2() {

elem1.src = "https://acortar.link/lnyqWL";

}

Actividad 3.6B

Crea una nueva página HTML como el ejemplo anterior con el nombre "Act36B".
Dentro de la etiqueta <body>, agrega los siguientes elementos:
- <h1 id="id1" onclick="f1()" >JAG</h1>
- <img id="id2" src="https://acortar.link/GDcjdu" width="40" height="80" onclick="f2()">
- <button id="id3" onclick="f3()" >boton1</button>
- <button id="id4" onclick="f4()" >boton2</button>
Dentro de la etiqueta <script>, crear:
- Las variables elem1, elem2, elem3, y elem4 que guarden las referencias a elementos HTML específicos usando document.getElementById("idetificador"). Esto te permite acceder y modificar esos elementos desde JavaScript.
  - - var elem1=document.getElementById("id1");
    - var elem2=document.getElementById("id2");
    - var elem3=document.getElementById("id3");
    - var elem4=document.getElementById("id4");
- Las variables estilo1 y estilo2 que guarden las cadenas de texto con estilos CSS. Estos se aplican a los elementos cuando los llamas con .style.
  - - var estilo1 = "color:lightyellow;background:brown;font-size:14";
    - var estilo2 = "color:lightgray;background:black;font-size:20";
- La función f1() que solicite al usuario que ingrese un nuevo texto mediante prompt(), luego actualiza el contenido del encabezado <h1> con ese texto y aplica el estilo definido en estilo1 tanto al <h1> como a los botones boton1 y boton2.

function f1() {

var texto1=prompt("Escriba el Titulo:");

elem1.textContent=texto1;

elem1.style=estilo1;

elem3.style=estilo1;

elem4.style=estilo1;

}

- La función f2() aplica el estilo definido en estilo2 al encabezado <h1> (elem1) y a los botones boton1 (elem3) y boton2 (elem4), cambiando su color, fondo y tamaño de fuente según lo especificado en esa variable.

function f2() {

elem1.style=estilo2;

elem3.style=estilo2;

elem4.style=estilo2;

}

- La función f3()cambia el tamaño de la imagen (elem2) al modificar sus propiedades width (ancho) y height (alto). Esto agranda la imagen cuando se ejecuta la función.

function f3() {

var texto2=prompt("Tamaño de la img:");

var num=parseInt(texto2);

elem2.width = num;

elem2.height = num;

}

- La función f4()modifica el tamaño de la imagen (elem2) al establecer sus propiedades width (ancho) y height (alto) en 400 píxeles cada una, lo que hace que la imagen sea más grande cuando se ejecuta la función.

function f4() {

elem2.width = 200;

elem2.height = 200;

}