JS 01: Introducción a JavaScript

De páginas estáticas a aplicaciones vivas.

¿Qué es JavaScript?

Imagina que una página web es como un ser humano.

La Analogía del Cuerpo Humano

  • HTML (El Esqueleto): Son los huesos. Dan la estructura y sostienen todo (encabezados, párrafos, imágenes). Sin huesos, seríamos una masa sin forma.
  • CSS (La Ropa y Piel): Es la apariencia. Define el color de ojos, la ropa que llevamos, el estilo. Nos hace ver bien.
  • JavaScript (El Cerebro y Músculos): Es lo que nos permite movernos, pensar y reaccionar. Sin JS, la web sería una estatua: bonita, pero inmóvil.

JavaScript (JS) es el lenguaje de programación que da vida a la web. Permite que la página reaccione cuando el usuario hace algo, como hacer clic en un botón, enviar un formulario o mover el ratón.

Tu primer código: "Hola Mundo"

Para hablar con el navegador, usamos instrucciones. La más básica es alert(), que es como gritar un mensaje para que aparezca una ventana emergente.

Ejemplo 1: Una alerta visual

Prueba a pulsar el botón. El navegador ejecutará la instrucción que le hemos dado.

alert("¡Hola! Soy el cerebro de esta página ??");

Interacción: Pedir datos con prompt()

A veces queremos que el usuario nos diga algo. Para eso usamos prompt(). Muestra una ventana donde el usuario puede escribir.

Nota: prompt() siempre devuelve un Texto (String), incluso si escribes números. 
let nombre = prompt("¿Cómo te llamas?");
alert("Hola " + nombre);

La Consola: El Diario Secreto del Programador

A veces no queremos molestar al usuario con ventanas emergentes. Los programadores usamos una herramienta secreta llamada Consola para dejarnos mensajes a nosotros mismos o comprobar que todo funciona bien.

¡Pruébalo ahora!

  1. Pulsa la tecla F12 en tu teclado (o clic derecho -> Inspeccionar).
  2. Busca la pestaña que dice "Console" o "Consola".
  3. Pulsa el botón de abajo y mira qué aparece ahí.

console.log("Mensaje secreto: Todo funciona correctamente ?");

¿Dónde se coloca el código?

El navegador lee la página de arriba a abajo. Si ponemos el script al principio, podría intentar mover un "brazo" (un elemento HTML) que aún no se ha creado (cargado).

Por eso, solemos poner la etiqueta <script> justo antes de cerrar el <body>. Así nos aseguramos de que todo el "esqueleto" (HTML) ya está listo antes de intentar moverlo. 

<!-- El HTML va aquí arriba -->

<h1>Mi Web</h1>



<!-- El Cerebro (JS) va al final -->

<script src="mi-codigo.js"></script>

</body>
Volver a JS