Programación Web • ITI-07 •

Introducción a JavaScript + Practica 1

Después de trabajar con HTML (estructura) y CSS (estilos), el siguiente paso natural en el desarrollo web es aprender el tercer pilar:

JavaScript, el lenguaje que permite que una página web sea dinámica e interactiva.

1. ¿Qué es JavaScript?

JavaScript es un lenguaje de programación que permite crear páginas web dinámicas.

Con JavaScript podemos hacer que una landing page:

  • responda a clics
  • cambie textos automáticamente
  • muestre animaciones
  • valide formularios
  • interactúe con el usuario

2. Características principales de JavaScript

Lenguaje interpretado

JavaScript no necesita compilarse.

El navegador lo ejecuta directamente:

  • Chrome
  • Firefox
  • Edge

Lenguaje del lado del cliente

Se ejecuta principalmente en el navegador del usuario.

Ejemplos:

  • abrir menús
  • validar formularios
  • efectos visuales

Lenguaje basado en eventos

JavaScript responde a acciones como:

  • clics
  • teclas
  • scroll
  • movimientos del mouse

Compatible con HTML y CSS

JavaScript se conecta directamente con el contenido de la página para modificarlo.

3. El DOM (Document Object Model)

¿Qué es el DOM?

El DOM es la estructura en forma de árbol que el navegador crea a partir del HTML.

Ejemplo:

<h1>Hola mundo</h1>

JavaScript lo interpreta como un objeto manipulable.

Ejemplo de estructura DOM

Se convierte en:

document body header section.hero footer

¿Qué permite el DOM?

JavaScript puede:

  • seleccionar elementos

  • cambiar textos

  • modificar estilos

  • crear nuevos componentes

  • reaccionar a eventos del usuario

4. ⚙️ Integración de JavaScript en HTML

Paso 1: Crear un archivo JavaScript

script.js

Paso 2: Enlazarlo al HTML

Antes de cerrar el <body>:

<script src="script.js"></script>
</body>

Paso 3: Seleccionar elementos del DOM

Ejemplo:

const boton = document.querySelector("button");

Paso 4: Programar un evento boton.addEventListener(“click”, () => { alert(“¡Gracias por visitar mi landing page!”); });

5. Actividades prácticas con la Landing Page

Actividad 1: Botón funcional en el Hero

script.js

const boton = document.querySelector(".hero button");

boton.addEventListener("click", () => {
  alert("Bienvenido a mi portafolio personal 🚀");
});

Actividad 2: Cambiar texto dinámicamente

const titulo = document.querySelector(".hero h1");

titulo.addEventListener("click", () => {
  titulo.textContent = "¡Gracias por hacer clic!";
});

Actividad 3: Interacción en las cards

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
  card.addEventListener("mouseenter", () => {
    card.style.transform = "scale(1.05)";
  });

  card.addEventListener("mouseleave", () => {
    card.style.transform = "scale(1)";
  });
});

Actividad 4: Modo oscuro (mini proyecto)

<button id="darkModeBtn">🌙</button>
const btn = document.getElementById("darkModeBtn");

btn.addEventListener("click", () => {
  document.body.classList.toggle("dark");
});
.dark {
  background: #111;
  color: white;
}

Entregables

  • index.html

  • styles.css

  • script.js

  • Página funcional con interacción mínima