INSTITUCIÓN EDUCATIVA ALBERTO LEBRUN 2025
MUNERA Versión: 1
AREA: TECNOLOGÍA E INFORMÁTICA
DOCENTE: ADRIANA JULIETH VALENCIA
FRANCO
TALLER HTML CON JAVASCRIPT
1. Ejecuta cada código y examina que está haciendo. Luego agrégale
Un nuevo botón que cambie de color el fondo
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<h1 id="titulo">Hola Mundo</h1>
<button onclick="cambiarTexto()">Haz clic aquí</button>
</body>
</html>
Javascript
function cambiarTexto() {
[Link]("titulo").innerText = "¡Texto cambiado con JavaScript!";
2. En el siguiente código ejecútalo y agrégale un botón que ahora haga la resta y la
multiplicación
<input id="num1" type="number" placeholder="Número 1">
<input id="num2" type="number" placeholder="Número 2">
<button onclick="sumar()">Sumar</button>
<p id="resultado"></p>
INSTITUCIÓN EDUCATIVA ALBERTO LEBRUN 2025
MUNERA Versión: 1
AREA: TECNOLOGÍA E INFORMÁTICA
DOCENTE: ADRIANA JULIETH VALENCIA
FRANCO
Javascript
function sumar() {
let a = parseFloat([Link]("num1").value);
let b = parseFloat([Link]("num2").value);
[Link]("resultado").innerText = "Resultado: " + (a + b);
3. Ejecuta el siguiente código y trata de que el objeto cambie de tamaño
<div id="caja" style="width:150px; height:150px; background-color:lightblue; border-
radius:10px;"></div>
Javascript:
const caja = [Link]("caja");
[Link]("mouseover", function() {
[Link] = "orange";
});
[Link]("mouseout", function() {
[Link] = "lightblue";
});
4. Ejecuta el siguiente código y agrega otro campo que sea el apellido y se visualice en el
saludo
<label>Nombre:</label><input type="text" id="nombre" placeholder="Escribe tu
nombre">
<p id="saludo"></p>
Javascript:
const campo = [Link]("nombre");
const texto = [Link]("saludo");
[Link]("keyup", function() {
[Link] = "Hola, " + [Link];
INSTITUCIÓN EDUCATIVA ALBERTO LEBRUN 2025
MUNERA Versión: 1
AREA: TECNOLOGÍA E INFORMÁTICA
DOCENTE: ADRIANA JULIETH VALENCIA
FRANCO
});
5. Ejecuta el siguiente código y agrega un botón que ponga el contador desde cero
<p id="contador">Has hecho clic 0 veces</p>
<button id="boton">Haz clic</button>
Javascript:
let clics = 0;
const boton = [Link]("boton");
const texto = [Link]("contador");
[Link]("click", function() {
clics++;
[Link] = "Has hecho clic " + clics + " veces";
});