Cómo escribir JavaScript con ChatGPT sin complicarte la vida

Desde hace un tiempo, mi día a día en Redsauce ha consistido en la creación de aplicaciones y la resolución de retos de código tanto internos como para clientes.

Si bien es cierto que cuando comencé entre mi stack tecnológico apenas podía contar con HTML y Bootstrap, tras la aparición de ChatGPT hace unos años me sentí como Spiderman, tras la picadura de la araña. Tenía superpoderes.

Y ahí comenzó mi viaje entre las diversas herramientas para aprender la forma más efectiva y fácil de pedirle cosas a la IA, que me entendiese y que el resultado fuera exactamente el que deseaba.

Ahora bien, escribir JavaScript con ayuda de la IA no es un camino de rosas: hay que llevar cuidado con las validaciones y el cumplimiento de estándares de rendimiento, sobre todo si tu proyecto necesita integrarse con otros sistemas. Y, como en todo desarrollo, lo ideal es que alguien pueda revisar el código, así que la programación en pareja sigue siendo una estupenda idea para asegurarnos de que todo funcione correctamente.

Sigo sin ser tan bueno como mis compañeros desarrolladores, pero a lo largo de este tiempo, y tras haber programado este mismo blog que estás leyendo (efectivamente, esto no es un wordpress) y alguna que otra cosa, creo que podré compartir contigo algún consejo sobre cómo programar en javascript, con la ayuda de ChatGPT.

Y como nada se entiende mejor que un ejemplo, ¿qué tal si intentamos añadir un botón a tu web para cambiar entre modo claro y modo oscuro?

Elige tu herramienta

Parece que cada 2 semanas sale una nueva IA, más potente, con más funciones y más polivalente que la anterior. No te digo que descartes por completo el uso de nuevas herramientas, ni mucho menos. Mi consejo es que te familiarices con una, una que confíes para el largo plazo, que veas que ha ido incorporando funciones, y hoy por hoy (ya veremos en un mes), que tenga modelo de razonamiento.

¿Te ha pasado alguna vez eso de que empiezas algo organizándolo y preparándolo todo, pero luego acabas procrastinando el verdadero inicio?

Pues con esto lo mismo, siempre va a haber algo nuevo que probar, mejor empieza con lo que conozcas y domínalo. Luego ya lo mejoraremos si es que se puede. Mi recomendación, estira el bolsillo y gástate los 20€ al mes de ChatGPT, no te arrepentirás.

Domina tu herramienta

La vas a usar, y mucho. Y cuánto más la uses más rápido empezarás a encontrarle las cosquillas. Verás en qué momentos las respuestas que te da se están montando con las anteriores, ha perdido el hilo, necesita que le repitas las cosas o que replantees la solicitud.

Vamos, como cuando tu amigo o pareja te dice: "Para, para, que no me estoy enterando, vuelve a repetírmelo".

Tras varios meses picando piedra con ChatGPT, casi puedo predecir el momento exacto en el que merece la pena abrir un nuevo chat y volver a comenzar que seguir en una conversación que no lleva a ningún puerto.

Aprende a escribir prompts

De verdad, es mucho más fácil de lo que crees y cada vez lo es más. Con las nuevas adiciones de memoria o los modelos de razonamiento, cada vez tienes que darle menos datos y contexto para que te entienda perfectamente. No obstante yo sigo usando esta fórmula que funciona a las mil maravillas:

[persona] + [contexto] + [tarea] + [ejemplo] + [formato] + [tono]

Y te hago hincapié en algunos puntos que he visto especialmente importantes a la hora de escribir Javascript con chatGPT.

1. Da un buen [contexto], define “qué es el éxito” aquello que convertiría su respuesta en algo perfecto. Menciona también el entorno en el que te encuentras, así como las limitaciones que tienes. A más especifiques en tu primera interacción, más fácil te resultará después seguir pidiéndole cosas.

2. Ponle un [ejemplo]. Esto es súper importante. Da igual si se lo das como una captura, como un código de stackoverflow o cómo un dibujo con plastidecores. Por muy bien que creas que te explicas, un ejemplo vale más que mil palabras.

3. Define el [formato] de salida. ¿Quieres el script inline? Díselo, ¿Quieres que las variables sean “pepito”? Díselo, ¿Quieres que te de exactame un código por el que sustituir el que le compartas? DÍSELO!!

Para nuestro ejemplo:

• [persona]: Actúa como un desarrollador front-end con experiencia en temas de color y usabilidad.

• [contexto]: Estoy creando un sitio web sencillo que solo tiene HTML y un archivo CSS con dos clases: .light-mode y .dark-mode. Quiero alternar entre ellas pulsando un botón.

• [tarea]: Escribe el código JavaScript necesario para que, cuando se pulse el botón, se intercambien las clases, y así cambiar los colores del sitio.

• [ejemplo]: Tengo un index.html con un <button id="theme-toggle">Cambiar tema</button> y un <div id="contenido">Contenido de ejemplo</div>.

• [formato]: Quiero que me des únicamente la parte de JavaScript y, además, que expliques con comentarios paso a paso qué hace cada parte.

• [tono]: Explicativo y sencillo, como si fuera para un principiante.

Pro tip para prompts

Si tu mismo lees el prompt y lo ves enrevesado, pero eres tan vago que no quieres ni corregirlo, puedes sencillamente añadir esto al final:

Hazme 5 preguntas que mejorarán tu respuesta

Mejoremos ese Javascript

Ahora que ya sabes escribir prompts, tu objetivo es crear código que funcione. Para ello te recomiendo lo siguiente:

Aquí es donde entra la magia del ir y venir con ChatGPT para lograr el código final.

1. Comienza con una idea clara

Idea: Quiero un botón que cambie la clase del body (o cualquier contenedor principal) de .light-mode a .dark-mode y viceversa.

Trata de escribírselo como si se lo dijeras a un colega o un patito de goma. Cuánto más breve y conciso lo consigas explicar, más se parecerá eso a un buen prompt.

Tendré un body con clase por defecto .light-mode. Al hacer clic en el botón, quiero que el body se cambie a .dark-mode. Si ya está en .dark-mode, que vuelva a .light-mode.

2. Divide tu código en secciones independientes

De esta forma podrás ir añadiendo funcionalidad por funcionalidad sin crear un código spaghetti que a parte de no funcionar, no vas a saber ni por dónde meterle mano.

HTML:

• Botón para cambiar el tema.

• Contenido que se verá afectado por el cambio de tema.

CSS:

• Clases .light-mode y .dark-mode con sus respectivos estilos (fondo, color del texto, etc.).

JavaScript:

• Evento de clic en el botón.

• Función que alterna entre los temas.

Extrae la parte de tu código donde quieres añadir dicha funcionalidad

Imagina que tu index.html es algo así (lo compartirías con ChatGPT para que comprenda el contexto):

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tema Dinámico</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="light-mode">
<button id="theme-toggle">Cambiar Tema</button>
<div id="contenido">
<h1>Mi sitio web</h1>
<p>Este es un texto que cambiará de color según el tema.</p>
</div>
<script src="script.js"></script>
</body>
</html>

Y tu styles.css podría tener (de forma muy simple):

.light-mode {
  background-color: white;
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

Pídele a ChatGPT que te genere el Javascript

Tras explicarle a ChatGPT tu código HTML y CSS y compartírselo, pídele ahora lo que quieres: un JS para hacer el “toggle”. Un ejemplo de respuesta que podrías obtener de ChatGPT sería:

// 1. Seleccionamos el botón
const themeToggleBtn = document.getElementById('theme-toggle');

// 2. Escuchamos el evento de clic
themeToggleBtn.addEventListener('click', () => {
  // 3. Seleccionamos el body (o donde necesites cambiar la clase)
  const bodyElement = document.body;

  // 4. Comprobamos si está en modo claro
  if (bodyElement.classList.contains('light-mode')) {
    // Cambiamos a oscuro
    bodyElement.classList.remove('light-mode');
    bodyElement.classList.add('dark-mode');
  } else {
    // Cambiamos a claro
    bodyElement.classList.remove('dark-mode');
    bodyElement.classList.add('light-mode');
  }
});

Si falla, añade logs

Si no funciona (tal vez se te olvidó enlazar bien el script.js, o tu botón no se llama theme-toggle), pídele a ChatGPT que añada logs para detectar dónde está el fallo:

console.log('El botón se ha cargado:', themeToggleBtn);

themeToggleBtn.addEventListener('click', () => {
  console.log('¡Botón clicado!');
  ...
});

Con esos logs, verás en la consola del navegador si el elemento se está capturando bien y si el evento se está disparando.

Capturas de pantalla y explicación del fallo

Si algo sigue sin ir, envía una captura de tu consola o explicas el mensaje de error:

Cuando pulso el botón me sale Cannot read property 'addEventListener' of null.

Y ChatGPT te dirá:

Revisa que el <script src="script.js"></script> esté después del botón en el HTML. Comprueba también que el id coincida exactamente.

Itera hasta que quede perfecto

Una vez que el “toggle” de tema funcione, puedes pedirle a ChatGPT que te ayude con más detalles:

Haz que el texto del botón cambie a ‘Tema oscuro’ o ‘Tema claro’ según el estado actual.

Guarda la preferencia del usuario en localStorage, de modo que si recarga la página siga en oscuro o en claro.

Poco a poco irás puliendo el ejemplo, cada vez con prompts más específicos. Hace falta tener paciencia y tratar de resolver los pequeños enigmas que van apareciendo durante el desarrollo, como piezas de un puzle que se montan poco a poco.

Cada proyecto, desarrollo o funcionalidad es un mundo, así que no todo vale y te tocará adaptarte a las particularidades de cada uno. No obstante, espero que con estos consejos haber podido darte alguna idea para que desates el potencial de esta herramienta.