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>
<h1 id="id1" onclick="f1()" >JAG</h1>
<img id="id2" src="https://lc.cx/rK8Iq4" width="40" height="80" onclick="f2()">
<button id="id3" onclick="f3()" >boton1</button>
<script>
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.
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;
}