Fundamentos y output
Después de HTML (la estructura), CSS (el estilo) y SQL (los datos), llega la pieza que faltaba: JavaScript, el lenguaje que hace que una página reaccione. Hoy averiguas qué es exactamente, dónde se coloca dentro de un documento y las cuatro formas de sacar un resultado a pantalla — y por qué, en este curso, vas a usar casi siempre la misma.
¿Qué añade JavaScript que HTML y CSS no tienen?
HTML te da la estructura de una página y CSS le da estilo, pero ninguno de los dos puede reaccionar a lo que hace la persona que la visita. Si quieres que un botón haga algo al pulsarlo, que un formulario valide un campo antes de enviarse, o que un precio se recalcule al cambiar una cantidad, necesitas un lenguaje de programación de verdad corriendo en el navegador. Ese lenguaje es JavaScript — y es, con diferencia, el más usado del mundo para esto, porque es el único que todos los navegadores entienden de forma nativa.
La estructura: qué contenido hay y cómo se organiza (títulos, párrafos, listas...).
El estilo: colores, tipografía, espaciado, disposición en pantalla.
El comportamiento: qué pasa cuando el usuario hace algo, o cuando cambian los datos.
Dónde colocar tu código JavaScript
Igual que viste con CSS en el módulo "HTML se conecta", JavaScript se puede
incluir de varias formas. La etiqueta es siempre <script>:
Código JS directamente entre <script> y </script>, normalmente antes de cerrar </body>.
<script src="app.js"></script> — un archivo .js aparte, igual que un .css externo. La opción recomendada casi siempre.
<script src="app.js" defer></script> — permite poner el script en el <head> sin bloquear la carga de la página.
Si colocas <script> justo antes de cerrar
</body>, te aseguras de que todo el HTML ya
existe en la página antes de que tu código intente tocarlo — un problema muy
habitual para quien empieza es escribir JS que busca un botón que "todavía"
no existe porque el script se cargó primero.
Sacar resultados a pantalla: las cuatro formas
Cuando tu código produce un resultado, tienes que decidir dónde mostrarlo. JavaScript te da cuatro maneras distintas, cada una pensada para un momento distinto:
Escribe en la consola del navegador (herramientas de desarrollador), invisible para el usuario. La forma habitual de comprobar que tu código hace lo que crees mientras programas — y la que vas a usar en casi todos los playgrounds de este curso.
Abre una ventana emergente con un mensaje. Interrumpe al usuario por completo — útil para practicar, raro verlo en una web real y bien hecha.
Escribe directamente en el HTML del documento mientras se está cargando. Prácticamente en desuso: si lo usas después de que la página termine de cargar, borra toda la página.
Cambia el contenido de un elemento HTML ya existente. La forma real de "mostrar algo en pantalla" en una web de verdad — lo verás en detalle en el módulo de DOM, al final de este track.
Prueba tu primer console.log() en el playground de
abajo. Pulsa "Ejecutar" y mira el resultado — funciona exactamente igual que
los playgrounds de SQL que ya conoces, solo que aquí el código es JavaScript
de verdad, ejecutado por tu propio navegador.
El código que escribes aquí se ejecuta literalmente en tu navegador, igual que en la consola de las herramientas de desarrollador. No tiene acceso a la página real de Gráffica Academy (no puede romper nada), pero sí es JavaScript auténtico: si escribes un error, verás un error de verdad.
Sintaxis básica de un vistazo
No te preocupes por memorizar esto todavía — lo vas a ver con calma en el
próximo módulo. Solo para que el playground de arriba tenga sentido: cada
instrucción normalmente termina en punto y coma ;,
y JavaScript distingue mayúsculas de minúsculas: console.log
no es lo mismo que Console.Log.
Comprueba lo que has aprendido
1. ¿Qué añade JavaScript que HTML y CSS no pueden hacer por sí solos?
2. ¿Cuál es la forma más habitual de comprobar un resultado mientras programas?
3. ¿Por qué suele colocarse <script> justo antes de </body>?