Cómo se usa
Esta página cubre todo lo de la lección 1: qué es JavaScript, dónde se ejecuta, la consola, el primer programa, cómo se enlaza con HTML y los errores más comunes.
Hay 11 preguntas de opción múltiple y 4 ejercicios. En las preguntas, la corrección es inmediata: al elegir una opción se marca en verde la correcta y aparece la explicación de por qué.
Los ejercicios son de escritura: se resuelven en un archivo, se ejecutan y, si se quiere comparar, la solución está escondida detrás del botón. Una respuesta que se lee y se entiende pero no se probó no cuenta como resuelta.
Preguntas
Agrupadas por tema, en el orden en que se dieron en la lección. Una sola opción es correcta en cada una.
Todavía sin contestar · 11 preguntas
El lenguaje y dónde se ejecuta
1. ¿Cuáles son las tres piezas de una página web y qué hace cada una?
Elegí una opción para verla
HTML dice qué hay, CSS cómo se ve y JavaScript qué hace. Son tres lenguajes con trabajos separados.
Un botón, por ejemplo: HTML lo pone, CSS lo pinta y JavaScript le da comportamiento.
2. ¿Dónde se ejecuta el JavaScript de una página?
Elegí una opción para verla
En el navegador, en la computadora del visitante. El archivo .js viaja hasta ahí y lo ejecuta el navegador.
Es la diferencia clave con PHP, que corre en el servidor.
3. ¿Por qué no se ponen contraseñas ni claves en el JavaScript?
Elegí una opción para verla
El código llega entero al navegador y se puede ver con las herramientas del desarrollador. Lo que viaja al navegador se hace público.
Por eso los secretos viven en el servidor, nunca en el .js.
4. ¿JavaScript es lo mismo que Java?
Elegí una opción para verla
Son lenguajes distintos, con reglas distintas. El nombre se eligió en 1995 cuando Java estaba de moda, y quedó.
La consola y console.log
5. ¿Cómo se abre la consola del navegador?
Elegí una opción para verla
Con F12 o clic derecho → «Inspeccionar», y después la pestaña Consola.
6. ¿Qué hace console.log("Hola")?
Elegí una opción para verla
Escribe en la consola. No toca la página: sirve para ver valores y mensajes mientras se programa.
7. ¿Para qué sirve la consola durante el desarrollo?
Elegí una opción para verla
Para probar pedazos de código al instante y para ver los mensajes que imprime el programa con console.log. Es la herramienta de todos los días.
HTML, JavaScript y errores
8. ¿Dónde conviene poner la etiqueta <script src="app.js">?
Elegí una opción para verla
Al final del <body>. Así la página ya está cargada cuando el JavaScript arranca a buscar elementos.
9. ¿Qué pasa si el <script> va en el <head> y el código busca un botón de la página?
Elegí una opción para verla
El código corre antes de que el botón exista, así que no lo encuentra. Por eso el script va al final.
10. Se abre el archivo app.js con doble clic y el navegador muestra el código en lugar de ejecutarlo. ¿Qué pasó?
Elegí una opción para verla
El JavaScript no se abre suelto: se ejecuta dentro de la página. Se abre el .html y el script enlazado corre solo.
11. En la consola aparece ReferenceError: precio is not defined. ¿Qué significa?
Elegí una opción para verla
Se usó un nombre que no existe: una variable que no se declaró o que está mal escrita. La consola además dice el archivo y la línea exacta.
Ejercicios de práctica
Cuatro ejercicios, de menor a mayor: primero el saludo suelto, después el HTML + JavaScript juntos, y al final corregir y modificar.
Ejercicio 1
Escribí un programa que muestre en la consola el mensaje Bienvenido al Buffet del Cole. Probálo en la consola y después en un archivo app.js.
console.log("Bienvenido al Buffet del Cole");Ejercicio 2
Armá un index.html con un título <h1>Buffet del Cole</h1> y enlazá un app.js que escriba el saludo en la consola. Abrí el HTML y comprobá que el mensaje aparece.
<!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>El app.js lleva el console.log del ejercicio anterior. El <script> va al final del <body>.
Ejercicio 3
Un compañero puso el <script> en el <head> y dice que su código «no encuentra el botón». Explicá por qué y cómo se arregla.
Porque el script se ejecuta antes de que la página se cargue: cuando corre, el botón todavía no existe.
Se arregla moviendo el <script> al final del <body>.
Ejercicio 4
Cambiá el mensaje del programa para que diga El Buffet del Cole abre en el recreo y volvé a probar. Después, usá la consola para imprimir dos mensajes más, uno por línea.
console.log("El Buffet del Cole abre en el recreo");
console.log("Sándwiches y empanadas");
console.log("Todo recién hecho");Cómo saber si está bien
| Si fallaste… | Volvé a |
|---|---|
| Las preguntas 1 a 4 | Qué es JavaScript y Dónde se ejecuta. |
| Las preguntas 5 a 7 | La consola. |
| Las preguntas 8 a 11 | El primer programa, HTML y JavaScript y Errores frecuentes. |
| Los ejercicios 2 a 4 | Se prueban a mano: si el mensaje aparece en la consola, está bien. |
Si acertaste 9 o más, la lección está firme. Entre 6 y 8 conviene releer los temas de las que fallaron. Con menos de 6, la lección 2 va a costar: todo lo que viene se apoya en estas ideas.
Lo que hay que poder explicar
Al terminar, sin mirar el material, tendrías que poder explicar cada una de estas frases en una o dos oraciones:
| Idea | La respuesta en una línea |
|---|---|
| Las tres piezas de la web | HTML estructura, CSS aspecto, JavaScript comportamiento. |
| JavaScript corre en el navegador | El código viaja a la computadora del visitante y por eso se puede leer. |
| La consola | F12: muestra mensajes y permite probar código suelto. |
console.log | Escribe en la consola; es la forma de ver qué pasa. |
| El script va al final del body | Para que la página ya esté cargada cuando el código arranca. |
| Leer el error completo | Dice el archivo, la línea y el tipo; es una pista, no una derrota. |
La lección 2 toma esto como punto de partida y agrega variables y tipos de datos.
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.