Cargando...

Introducción a JavaScript

HTML da estructura a la página. CSS le da aspecto. Un escaparate listo sigue callado hasta que ocurre algo: un clic, un valor escrito, un mensaje que aparece al cargar. JavaScript es el lenguaje que hace eso en el navegador.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación. Escribes instrucciones y el navegador las ejecuta una tras otra. No es marcado (eso es HTML) ni una hoja de estilo (eso es CSS). En la web, su trabajo diario es el comportamiento: actualizar texto, reaccionar al usuario, calcular un valor y — más adelante en este curso — cargar datos.

Un lenguaje de ejecución, no un documento

Las etiquetas HTML nombran trozos de contenido. Las reglas CSS describen cómo se ven. Las instrucciones de JavaScript dicen al ordenador que haga algo: imprimir un mensaje, cambiar un nodo de la página o sumar dos números. Ya sabes HTML suficiente para colgar un script en la página. Este curso enseña el lenguaje que corre dentro de ese script.

📊 Página estática frente a una página con JavaScript

Situación Sin JavaScript Con un script corto
La página acaba de cargar El encabezado sigue exactamente como en el HTML Un script puede reescribirlo después de cargar
El visitante hace clic en un botón El botón, solo, no reacciona de forma útil Más adelante: el código se ejecuta al hacer clic
Necesitas un total o una comprobación HTML no calcula; CSS no decide JavaScript calcula y luego muestra el resultado

Mantén las tres capas separadas. La estructura es HTML. El aspecto es CSS. Este curso es la tercera capa: lo que la página hace.

Primera mirada a una instrucción

Una instrucción es una orden. El ejemplo escribe una línea en la consola de desarrollador — una herramienta para programar, no la página visible. Usarás mucho la consola.

Una primera instrucción

javascript 
console.log("Hello, JavaScript");

Qué hace esta instrucción

  • console.log es una función integrada que imprime en la consola
  • El texto entre comillas es una cadena — datos de texto
  • El punto y coma termina la instrucción (hábito seguro en este curso)
  • En la página aún no cambia nada; solo es un registro
    Abre las herramientas de desarrollador (a menudo F12) y mira la pestaña Console después de ejecutar el script.

Ver JavaScript en una página

Para cambiar lo que ve el visitante, el script habla con la página. Abajo, un párrafo HTML empieza con una frase. Un <script> incrustado encuentra ese párrafo por id y sustituye el texto. Dónde colocar scripts se ve en la siguiente sesión; aquí basta un archivo.

HTML con un script incrustado

html 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
</head>
<body>
<h1>Welcome</h1>
<p id="msg">This line is from HTML only.</p>
<script>
document.getElementById("msg").textContent =
"JavaScript rewrote this sentence.";
</script>
</body>
</html>

Qué cambió

Sin el script, el párrafo original permanece. Con el script, el navegador lee primero el HTML, ejecuta las instrucciones y muestra la frase nueva. El mismo esqueleto — distinto comportamiento tras la carga.

JavaScript también calcula

Como es un lenguaje de programación, trabaja con números y nombres, no solo con etiquetas. Este ejemplo mínimo no habla de color ni de títulos. Calcula un total y lo registra. Variables y tipos vendrán después; aquí basta ver que el código calcula.

Un cálculo pequeño

javascript 
const price = 120000;
const taxRate = 0.09;
console.log(price + price * taxRate);

Qué es este curso (y qué no es)

Nos quedamos en el navegador: bases del lenguaje, DOM, eventos, formularios y fetch. No empezamos con un framework, Node.js ni TypeScript. Sin esas herramientas puedes escribir scripts útiles para la página. Las sesiones opcionales son extras; no hacen falta en el camino principal.

Pruébalo tú

  1. Crea un archivo llamado intro.html.
  2. Pega el ejemplo HTML con script, guarda y ábrelo en el navegador.
  3. Comprueba que el párrafo muestra la frase reescrita, no el texto HTML original.
  4. Cambia la cadena de textContent por una frase tuya, guarda y actualiza.
  5. Opcional: añade console.log("Hello, JavaScript"); en el mismo <script>, guarda, actualiza y busca la línea en la pestaña Console.

Errores frecuentes

  • Tratar JavaScript como otra forma de escribir títulos y párrafos — deja la estructura en HTML; que JS la cambie o la amplíe cuando haga falta
  • Esperar que CSS reaccione a un clic o calcule un total — CSS da estilo; no ejecuta lógica de programa
  • Dejar la única copia del texto importante solo en el script, de modo que sin JS la página quede vacía
  • Confundir la consola con la página visible: console.log no sustituye un encabezado en pantalla

Resumen

  • JavaScript es un lenguaje de programación que añade comportamiento a las páginas en el navegador
  • HTML estructura el contenido; CSS controla la presentación; JavaScript decide lo que hace la página
  • Una instrucción es una orden, como console.log("Hello, JavaScript");
  • Un script incrustado puede encontrar un elemento y cambiar su textContent tras la carga
  • JavaScript también calcula valores, no solo toca el marcado
  • Este curso se queda en el navegador y no exige un framework
  • Practica editando un script pequeño y actualizando el navegador

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 3
Javascript Tutorial