Lección 1 · Qué es JavaScript · Profesor Mauro Bobyk

Qué es JavaScript

Una página web se arma con tres piezas, y cada una hace una sola cosa:

Pieza	Lenguaje	Qué hace
La estructura	HTML	Qué hay en la página: un botón, una lista, un título.
El aspecto	CSS	Cómo se ve: colores, tamaños, dónde va cada cosa.
El comportamiento	JavaScript	Qué hace: qué pasa al apretar el botón, qué se muestra, qué cambia.

JavaScript es la pieza que hace reaccionar la página. Sin él, un botón existe pero no hace nada; una lista existe pero nadie la llena; un precio existe pero nadie lo calcula. JavaScript es lo que convierte una página estática en un programa.

No tiene nada que ver con Java: el nombre fue una decisión de marketing de 1995, cuando Java estaba de moda. Son lenguajes distintos, con reglas distintas. Conviene decirlo una vez y no volver a confundirlos.

Dónde se ejecuta

JavaScript se ejecuta en el navegador, es decir, en la computadora de quien visita la página. Es la diferencia clave con un lenguaje de servidor: cuando se abre una página con JavaScript, el archivo .js viaja hasta el navegador y es el navegador el que lo ejecuta. La computadora del visitante hace el trabajo.

Eso tiene dos consecuencias que conviene entender desde el primer día:

Se ve el código. Cualquiera puede abrir las herramientas del navegador y leer el JavaScript que llegó. Por eso ahí nunca se ponen secretos: ni contraseñas, ni claves, ni reglas que no se quieran mostrar. Lo que viaja al navegador, se hace público.
Cada navegador es una computadora distinta. El mismo código corre en una notebook, en un celular y en una computadora del aula, cada una con su velocidad y su pantalla. El programa tiene que estar pensado para todas.

Para este curso alcanza con el navegador: no hay servidor que instalar. Y para probar pedazos sueltos de código está la consola, que se ve en la sección siguiente.

La consola

La consola es el lugar donde JavaScript imprime mensajes. Se abre con F12 —o clic derecho sobre la página → «Inspeccionar»— y después la pestaña Consola. Ahí se puede escribir una línea de JavaScript y ver el resultado al instante, sin armar ningún archivo.

Para escribir un mensaje se usa console.log():

console.log("Bienvenido al Buffet del Cole");

Al ejecutarlo, en la consola aparece:

Bienvenido al Buffet del Cole

console.log es la herramienta de todos los días: sirve para ver el valor de una variable, para saber si una línea se ejecutó y para entender qué está pasando cuando algo no funciona. Se usa en este curso en cada ejemplo.

El primer programa

Un programa de JavaScript no vive en el aire: vive dentro de una página HTML, o en un archivo .js que la página enlaza. La forma de trabajar desde el primer día es la segunda: el HTML en un archivo y el JavaScript en otro.

El HTML se llama, por ejemplo, index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Buffet del Cole</title>
</head>
<body>
    <h1>Buffet del Cole</h1>

    <script src="app.js"></script>
</body>
</html>

Y el JavaScript, en el archivo app.js, al lado:

console.log("Bienvenido al Buffet del Cole");

El <script src="app.js"> es el puente: le dice al navegador «acá hay un archivo de JavaScript, traelo y ejecutalo». Va al final del <body> para que la página ya esté cargada cuando el código se ejecute.

Para probarlo se abre el archivo index.html con el navegador —doble clic alcanza— y se mira la consola: ahí tiene que estar el mensaje.

La consola también sirve para probar sin archivo: todo lo que se escribe en ella se ejecuta ahí mismo. Pero el programa de verdad vive en el .js, que es lo que se guarda y se entrega.

HTML y JavaScript

La relación entre los dos archivos es simple: el HTML pone los elementos —el botón, la lista, el título— y el JavaScript los busca y los usa. En las primeras lecciones el programa solo escribe en la consola, pero a partir de la lección 7 empieza a tocar lo que se ve: cambiar un texto, sumar un precio, reaccionar a un clic.

Un botón, por ejemplo, nace en el HTML:

<button id="agregar">Agregar sándwich</button>

Y recién después el JavaScript lo encuentra y le da comportamiento. Eso se ve completo en la última lección; por ahora alcanza con saber que el orden es ese: HTML primero, JavaScript después.

El código va al final del <body>. Si el <script> va en el <head>, el navegador intenta usar la página antes de que exista: el botón todavía no se cargó y el JavaScript no lo encuentra. Poniendo el script al final, la página ya está armada cuando el código arranca.

Errores frecuentes

Los primeros días, casi todo error es uno de estos cuatro. Conviene leerlos antes de que aparezcan:

Síntoma	Causa más probable
No se ve nada en la consola.	Falta el `console.log`, o se está mirando la pestaña equivocada de las herramientas.
El navegador muestra el código del archivo, no la página.	Se abrió mal: hay que abrir el `.html`, no el `.js`. El JavaScript se ve ejecutándose dentro de la página, no abriendo su archivo.
`app.js:1 Uncaught ReferenceError: ... is not defined`	Se usó un nombre que no existe: una variable que no se declaró, o un error de tipeo. La consola dice la línea exacta.
Anda en la consola pero no en el archivo.	El `<script src="app.js">` tiene mal el nombre del archivo, o el archivo está en otra carpeta.

La regla para todos: leer el mensaje de error completo. Dice el archivo, la línea y el tipo de error. Parece obvio, pero la mitad de las veces se mira el error sin leerlo y se busca el problema donde no está.

Resumen

JavaScript es la pieza de la web que hace reaccionar la página; HTML estructura y CSS da aspecto.
Se ejecuta en el navegador, en la computadora del visitante. Por eso su código se puede leer y ahí nunca van secretos.
La consola (F12) muestra los mensajes y permite probar código suelto.
console.log() escribe en la consola; es la herramienta para ver qué pasa.
El JavaScript vive en un archivo .js que la página enlaza con <script src="...">, al final del <body>.
Los errores se leen completos: dicen el archivo, la línea y el tipo.

En la próxima lección el programa empieza a guardar datos: variables para los precios del buffet, y los tipos de datos que existen.

Autoevaluación de la lección 1