El curso
JavaScript es el lenguaje que se ejecuta en el navegador. HTML dice qué hay en la página, CSS dice cómo se ve, y JavaScript dice qué hace: qué pasa cuando se aprieta un botón, qué se muestra cuando cambia un dato, cómo se arma la página sin recargarla. Es la tercera pieza de la web, y es la que la vuelve interactiva.
No es «Java acortado»: el nombre confunde y no tiene nada que ver. JavaScript es un lenguaje propio, con sus reglas y sus mañas. Y no vive solo en el navegador: con Node.js corre también en la computadora y en el servidor, pero eso no hace falta para este curso. Acá se aprende donde nació y donde más se usa: haciendo reaccionar una página.
Todo el curso trabaja sobre un mismo sistema: el Buffet del Cole, la cantina de la escuela. Empieza escribiendo un saludo en la consola y termina, siete lecciones después, con una página donde se eligen productos, se ve el total y todo reacciona a los clics. No se aprende un lenguaje con ejemplos sueltos: se aprende cuando el mismo problema vuelve cada vez más grande.
Para este curso alcanza con un navegador y un editor. No hay servidor que instalar ni base de datos que configurar: el navegador ya trae todo lo necesario para ejecutar JavaScript. Se usa la consola del navegador (F12) y, para los archivos, un editor como Visual Studio Code.
El caso del curso
El Buffet del Cole es el hilo que une las siete lecciones. Cada una le agrega una pieza y deja el programa funcionando un poco más. La razón es simple: un programa real no se arma por partes independientes. Cuando cambia el precio de un producto, hay que revisar el cálculo del total, la lista que lo muestra y el botón que lo agrega. Eso solo se aprende si el caso es el mismo de punta a punta.
| Pieza | Qué guarda |
|---|---|
| Producto | Nombre, precio y stock. Un sándwich, una empanada, un alfajor. |
| Menú | La lista de productos que se venden. Es lo que se recorre para armar la pantalla. |
| Bandeja | Lo que va eligiendo cada alumno. Al final, su total a pagar. |
| Total | La suma de la bandeja, con el descuento si corresponde. |
Quién usa el sistema
- El alumno: mira el menú, elige productos y ve cuánto va a pagar.
- El encargado: mantiene la lista de productos y los precios.
Los productos y precios que aparecen en el material son inventados. Alcanza con eso: no hace falta copiar una lista real. En la lección 1 el sistema todavía no tiene página ni menú: es un saludo en la consola. Alcanza para ver dónde se ejecuta el lenguaje y para tener, desde el primer día, algo concreto sobre lo que trabajar.
Antes de empezar
Hacen falta dos cosas, y las dos ya están en casi cualquier computadora: un navegador y un editor.
El navegador y la consola
El navegador ejecuta JavaScript y trae una consola para probar código suelto: se abre con F12 (o clic derecho → «Inspeccionar») y después la pestaña Consola. Ahí se escribe una línea y se ve el resultado al instante. Para probar una idea rápida no hace falta armar un archivo: la consola alcanza.
Conviene probar todos los ejemplos del curso: copiarlos, ejecutarlos y después modificarlos para ver qué pasa. Un lenguaje no se aprende leyéndolo.
El editor
Alcanza con Visual Studio Code, que es libre y se instala desde su sitio. Los archivos de este curso son HTML que enlazan un archivo .js aparte: el HTML dice qué hay y el JavaScript dice qué hace, y conviene que cada uno viva en su archivo desde el primer ejemplo.
Las siete lecciones
El recorrido tiene siete paradas. Las cinco primeras son el lenguaje solo, sin tocar la página; las dos últimas lo conectan con lo que se ve: guardar el menú en datos y hacer reaccionar la pantalla.
Cómo se estudia
El método es siempre el mismo, y las tres reglas valen para todas las lecciones:
- Escribir cada ejemplo, no copiarlo y mirarlo. El error de tipeo que se comete y se corrige enseña más que el ejemplo que sale bien a la primera.
- Ejecutarlo y ver el resultado, en la consola o en la página. Si no coincide con lo esperado, el error es una pista, no una derrota.
- Modificarlo y ver qué se rompe. Cambiar un número, sacar un paréntesis, invertir una condición. Entender por qué falla es exactamente lo que se busca.
Cada lección termina con una autoevaluación de opción múltiple y ejercicios para resolver. La autoevaluación se corrige sola al instante; los ejercicios se resuelven en un archivo y se comparan con la solución escondida.
Licencia. El material de esta página es elaboración propia de Prof Mauro Bobyk —a partir de las fuentes que detalla el pie del sitio— y se publica bajo una licencia Creative Commons BY-NC-SA 4.0.