JavaScript
id: “leccion_1”
modulo: “Modulo 1: La consola”
orden: 1
titulo: “¿Qué es JavaScript?”
contenido: “ ¡Bienvenidos a The Origins III: JavaScript! ¡La cosa se va a poner divertida! ✨El
lenguaje de programación que estamos aprendiendo se llama JavaScript y hoy en día impulsa el
97,5% de los sitios web.
HTML + CSS + JavaScript = Los lenguajes centrales de la web.
HTML y CSS dan estructura y estilo a un sitio web.
JavaScript lo hace interactivo y dinámico, permitiendo añadir funcionalidad y
comportamientos complejos.
Un poco de historia: Los 90 marcaron el inicio de la era puntocom. En 1995, un
desarrollador de Netscape creó este nuevo lenguaje de scripting... ¡en tan solo 10 días!
😵💫
💡 EJEMPLO DE CÓDIGO
Para comunicarnos con el sistema y ver resultados, usamos la "consola". El comando
principal es: [Link]("¡Hola mundo!");
🛠️EJERCICIO
¡Es hora de escribir tu primera línea de código!
Copia y pega la siguiente instrucción en el editor para saludar a la red:
[Link]("Hello internet!");”
codigoEjemplo: "[Link]("Hello internet!");”
respuestaEsperada: ¨Hello internet!¨
tipoValidacion: ¨robusto¨
id: “leccion_2”
modulo: “Modulo 1: La consola”
orden: 2
titulo: “La consola web”
contenido: “ Espera, ¿qué diablos es una consola web?
Una consola web es una función de su navegador que puede ejecutar código [Link]
se encuentra en las herramientas para desarrolladores del navegador:
Google Chrome: Haga clic en Ver > Desarrollador > Consola JavaScript.
Safai: Haga clic en Desarrollar > Mostrar consola JavaScript.
Mozilla Firefox: Haga clic en Herramientas > Herramientas del navegador > Herramientas para
desarrolladores web.
Por ahora, vamos a utilizar el editor y la ventana de la consola que creamos solo para tu experiencia de
aprendizaje. 👉🏼
# Registro de la consola
En JavaScript, el método [Link]() indica a la consola web que muestre un mensaje. Lo
usaremos mucho.
El mensaje que queremos mostrar debe estar entre paréntesis ( ) y entre comillas. Pueden ser
comillas dobles " o simples ', pero las comillas de apertura y cierre deben coincidir.
💡 EJEMPLO DE CÓDIGO
[Link]("👋 Howdy!");
[Link]('👋 Howdy!');
En el código anterior, indicamos a nuestro programa que imprima o registre un mensaje. El texto
resultante que se muestra se denomina salida. La salida del mensaje sería: 👋 Howdy! 👋 Howdy!
Nota: Es opcional incluir un ; punto y coma al final de una línea en JavaScript.🛠️EJERCICIO
¡Con el editor de la derecha, usa [Link]() para mostrar la palabra pizza”
codigoEjemplo: "[Link]("pizza");”
respuestaEsperada: ¨pizza¨
tipoValidacion: ¨robusto¨
id: “leccion_3”
modulo: “Modulo 1: La consola”
orden: 3
titulo: “Línea por línea”
contenido: “ JavaScript ejecuta una línea de código a la vez.
Podemos generar múltiples mensajes mediante varios métodos [Link](). Por ejemplo, si
queremos imprimir dos saludos sencillos:
JavaScript
[Link]("🚌 Greyhound to New York");
[Link]("🕥 Departs at 9:30 am");
Esto dará como resultado: 🚌 Greyhound to New York 🕥 Departs at 9:30 am
¡Ahora usemos lo que acabamos de aprender para completar un desafío especial!
🛠️EJERCICIO Supongamos que queremos que la salida se vea exactamente como este patrón a
continuación:
a
b c
d e f
g h i j
k
¿Cómo puedes hacer eso? Crea un programa JavaScript que imprima este patrón exactamente
como se muestra. Probablemente esto requerirá algo de prueba y error, ¡pero inténtalo!
codigoEjemplo: " [Link](" a"); [Link](" b c"); [Link](" d
e f"); [Link]("g h i j"); [Link](" k")
respuestaEsperada: ¨a\n b c\n d e f\ng h i j\n k¨
tipoValidacion: ¨robusto¨
id: “leccion_4”
modulo: “Modulo 1: La consola”
orden: 4
titulo: “comentarios”
contenido: “ En programación, los comentarios se usan para documentar la función de
nuestro código, tanto para nosotros como para otros desarrolladores. Al ejecutar el programa,
los comentarios se ignoran.
## Comentarios de una sola línea Podemos crear un comentario de una sola línea usando //
dos barras diagonales: // [Link]("Nada"); [Link]("Hi"); // ¡Yo también
soy un comentario!
En cada línea, todo lo que esté a la derecha de las barras diagonales se ignora.
## Comentarios de varias líneas Podemos crear un comentario de varias líneas usando /* para
iniciar y */ para finalizar:
JavaScript
/* Esto está comentado.
[Link]("Nada.")
Yep! Esto también. */
🛠️EJERCICIO Algunas de las mejores recetas tienen ingredientes secretos. 🤤 Escribe una receta
de tu plato favorito en el editor.
Asegúrate de incluir:
1. Una lista de ingredientes.
2. Instrucciones paso a paso.
3. Un comentario (usando // o /* */) sobre tu ingrediente secreto.”
codigoEjemplo: " / Receta de Arroz /* Ingredientes: Arroz, Agua, Sal */
[Link]("Cocinando..."); // Ingrediente secreto: Mucho amor”
respuestaEsperada: ¨ ¨
tipoValidacion: ¨robusto¨
id: “leccion_5”
modulo: “Modulo 1: La consola”
orden: 2
titulo: “Proyecto final: El recibo”
contenido: ¡Felicitaciones! ¡Hemos llegado al final del primer capítulo! 🎈
Para resumir lo que hemos aprendido:
El método [Link]() envía mensajes a la ventana de la consola.
El código JavaScript se ejecuta una línea a la vez, de arriba a abajo.
Los comentarios de una sola línea se crean utilizando //.
Los comentarios de varias líneas se inician con /* y se cierran con */.
¡Es hora de usar lo que hemos aprendido para construir algo divertido!
🛠️EJERCICIO Vas a recrear un recibo de una compra de la última tienda o restaurante al que
fuiste... ¡usando JavaScript! 🧾
Utiliza métodos [Link]() para imprimir:
1. Nombre de la tienda/restaurante.
2. Una fila que diga "Detalles del pedido".
3. Nombres de columnas para "Artículo", "Cantidad" y "Precio".
4. Al menos dos artículos comprados.
5. El precio total.
La salida debería verse similar a esto:
==================================
McDONALD'S RECEIPT
----------------------------------
Item Quantity Price
🍔 Burger 1 2.99
🍟 Fries 1 2.49
----------------------------------
Total 5.48
==================================
”
codigoEjemplo: " [Link]("==================================");
[Link](" McDONALD'S RECEIPT "); [Link]("----------------------------------");”
respuestaEsperada: ¨ CONTIENE: Total¨
tipoValidacion: ¨flexible¨