Skip to main content

​
Primeros Pasos

Esta guía te ayudará a configurar tu entorno de desarrollo y escribir tu primer código JavaScript para manipular el DOM.

​
Configuración del Entorno

1

Crea la estructura de archivos

Crea una carpeta para tu proyecto y los siguientes archivos:
mkdir mi-proyecto-web
cd mi-proyecto-web
touch index.html
touch script.js
touch style.css
2

Configura el archivo HTML

Crea un archivo HTML básico con la estructura necesaria:
index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi Primer Proyecto Web</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Mi Proyecto Web</h1>
    </header>
    <main>
      <button id="mi-boton">Haz clic aquí</button>
      <p id="resultado"></p>
    </main>
  </body>
</html>
El atributo defer en la etiqueta <script> asegura que el JavaScript se ejecute después de que el HTML se haya cargado completamente.
3

Escribe tu primer código JavaScript

En script.js, agrega el siguiente código:
script.js
console.log('Script cargado correctamente');

// Seleccionar elementos del DOM
const boton = document.getElementById('mi-boton');
const resultado = document.getElementById('resultado');

// Agregar un event listener
boton.addEventListener('click', function() {
  resultado.textContent = '¡Hiciste clic en el botón!';
  console.log('Botón clickeado');
});
4

Abre el archivo en tu navegador

Abre index.html en tu navegador web favorito. Puedes:
  • Hacer doble clic en el archivo
  • Arrastrar el archivo a la ventana del navegador
  • Usar la opción “Abrir archivo” en el menú del navegador
5

Abre la Consola de Desarrollador

Para ver los mensajes de console.log() y depurar tu código:
Presiona F12 o Ctrl+Shift+I (Windows/Linux) o Cmd+Option+I (Mac)

​
Ejecutar el Proyecto de Ejemplo

Este repositorio incluye ejemplos completos que puedes ejecutar directamente.

​
Estructura del Proyecto

El proyecto incluye varios archivos de ejemplo:
  • index.html - Página principal con estructura HTML
  • script.js - Ejemplos de manipulación del DOM
  • clase-10.js - Ejemplos de programación asíncrona
  • clase-11.js - Ejemplos de Fetch API y almacenamiento
  • style.css - Estilos para la interfaz
  • normalize.css - Normalización de estilos entre navegadores

​
Cambiar entre Ejemplos

En el archivo index.html, puedes cambiar qué script se carga modificando las líneas: 
<!-- <script src="script.js" defer></script> -->
<!-- <script src="clase-10.js" defer></script> -->
<script src="clase-11.js" defer></script>
Simplemente comenta/descomenta la línea del script que quieras ejecutar.
Solo debe haber un <script> activo a la vez. Asegúrate de comentar los demás con <!-- -->.

​
Verificar que Todo Funciona

Si todo está configurado correctamente, deberías:
  1. Ver el mensaje “Script cargado correctamente” en la consola del navegador
  2. Ver un botón en la página
  3. Al hacer clic en el botón, ver el mensaje “¡Hiciste clic en el botón!” en la página
  4. Ver “Botón clickeado” en la consola
Si algo no funciona, revisa la consola del navegador. Los errores de JavaScript aparecerán allí con información sobre qué salió mal y en qué línea.

​
Próximos Pasos

Ahora que tienes tu entorno configurado, estás listo para:

Manipulación del DOM

Aprende a seleccionar y modificar elementos HTML

Selectores

Domina los diferentes métodos de selección

Event Listeners

Maneja interacciones del usuario

JavaScript Asíncrono

Entiende la programación asíncrona

Build docs developers (and LLMs) love

Get started for freeTalk to us