Ruta JavaScript

JavaScript para principiantes

Con HTML y CSS tienes una página con estructura y estilo. Con JavaScript le añades comportamiento.

Qué es JavaScript y tu primera línea de códigoDónde se escribe, variables básicas y tu primer ejemplo interactivo

Disponible

Variables y tipos de datosPróximamente

Condicionales (if / else)Próximamente

Funciones básicasPróximamente

Lección 1 — Qué es JavaScript y tu primera línea de código

JavaScript (JS) es el lenguaje que hace que una página web reaccione: que algo pase al hacer clic en un botón, que un texto cambie sin recargar la página, que se valide un formulario antes de enviarlo. Si HTML es el esqueleto y CSS la ropa, JavaScript son los músculos.

Se escribe dentro de una etiqueta <script>, normalmente justo antes de cerrar </body> — así el navegador ya ha leído todo el HTML antes de ejecutar el código:

index.html

<body>
  <h1>Hola</h1>

  <script>
    console.log("¡Esto se ve en la consola del navegador!");
  </script>
</body>

console.log() imprime un mensaje en la consola del navegador (se abre con la tecla F12, pestaña "Console"). Es la herramienta que más vas a usar para comprobar que tu código hace lo que crees que hace.

Para guardar datos usamos variables. Hoy en día se usan casi siempre let (para valores que pueden cambiar) y const (para valores que no cambian):

consola del navegador

const nombre = "EGV Code";
let visitas = 1;

visitas = visitas + 1;

console.log(nombre, visitas); // EGV Code 2

Ahora un ejemplo real: un botón que cambia un texto de la página al hacer clic, usando document.getElementById() para "buscar" un elemento por su id:

index.html

<p id="mensaje">Todavía no has hecho clic.</p>
<button id="miBoton">Haz clic aquí</button>

<script>
  const boton = document.getElementById("miBoton");
  const mensaje = document.getElementById("mensaje");

  boton.addEventListener("click", function () {
    mensaje.textContent = "¡Has hecho clic!";
  });
</script>

💡 Pruébalo tú mismo: pega el código del botón en el <body> de tu página HTML de la lección 1, guarda y ábrelo en el navegador. Al hacer clic, el texto debería cambiar al momento — sin recargar la página. También puedes abrir la consola (F12) en cualquier página y escribir console.log("hola") para probar sin necesidad de guardar ningún archivo.