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

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

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.

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');
});

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

Abre la Consola de Desarrollador

Para ver los mensajes de console.log() y depurar tu código:

Chrome / Edge
Firefox
Safari

Presiona F12 o Ctrl+Shift+I (Windows/Linux) o Cmd+Option+I (Mac)

Presiona F12 o Ctrl+Shift+K (Windows/Linux) o Cmd+Option+K (Mac)

Presiona Cmd+Option+C (primero habilita el menú de desarrollo en Preferencias)

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:

Ver el mensaje “Script cargado correctamente” en la consola del navegador
Ver un botón en la página
Al hacer clic en el botón, ver el mensaje “¡Hiciste clic en el botón!” en la página
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

Introducción

Fundamentos

JavaScript Asíncrono

HTTP y Almacenamiento

Ejemplos Prácticos

Primeros Pasos

Primeros Pasos

Configuración del Entorno

Ejecutar el Proyecto de Ejemplo

Estructura del Proyecto

Cambiar entre Ejemplos

Verificar que Todo Funciona

Próximos Pasos

Manipulación del DOM

Selectores

Event Listeners

JavaScript Asíncrono

​Primeros Pasos

​Configuración del Entorno

​Ejecutar el Proyecto de Ejemplo

​Estructura del Proyecto

​Cambiar entre Ejemplos

​Verificar que Todo Funciona

​Próximos Pasos

Manipulación del DOM

Selectores

Event Listeners

JavaScript Asíncrono

Primeros Pasos

Configuración del Entorno

Ejecutar el Proyecto de Ejemplo

Estructura del Proyecto

Cambiar entre Ejemplos

Verificar que Todo Funciona

Próximos Pasos