🌐 Lenguajes del navegador

El navegador es uno de los entornos de ejecución más importantes del mundo moderno.
Cada vez que abrimos una página web, un conjunto de lenguajes trabaja en conjunto para presentar información, aplicar estilo y ejecutar lógica.

En el navegador, la lógica se transforma en experiencia visual e interacción humana.

🔹 Los tres pilares del entorno web

Podemos pensar en los lenguajes del navegador como los tres componentes de un sistema lógico visual:

Rol	Lenguaje	Función principal
Estructura	HTML	Define el contenido y la jerarquía.
Estilo	CSS	Controla la apariencia y el diseño.
Comportamiento	JavaScript	Añade lógica e interactividad.

Cada lenguaje cumple un rol complementario: juntos forman la “trilogía del navegador”.

🔹 HTML: la estructura lógica del contenido

El HTML (HyperText Markup Language) define la estructura del documento.
No ejecuta lógica ni aplica diseño, solo organiza la información de manera jerárquica.


<!DOCTYPE html>
<html>
  <head>
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <p>Este es un texto dentro de la página.</p>
  </body>
</html>

HTML no programa: describe.
Es el esqueleto lógico del contenido.

🔹 CSS: la forma y el diseño

El CSS (Cascading Style Sheets) define cómo se verá el contenido del HTML: colores, tipografía, tamaños, posiciones, animaciones, etc.


<style>
  body {
    background-color: black;
    color: white;
    font-family: sans-serif;
  }
  h1 {
    color: cyan;
  }
</style>

CSS es la capa estética del navegador:
aplica orden visual sobre la estructura lógica.

🔹 JavaScript: la lógica y la interacción

El JavaScript agrega dinamismo e inteligencia a la web.
Permite reaccionar a eventos, cambiar contenido, validar datos y comunicarse con servidores.


<script>
  function saludar() {
    alert("¡Hola desde JavaScript!");
  }
</script>
 
<button onclick="saludar()">Saludar</button>

JavaScript convierte la página en algo vivo y reactivo.
Es el lenguaje que “piensa” dentro del navegador.

🔹 Cómo trabajan juntos

Cuando un navegador carga una página, sigue una secuencia lógica:

Lee el HTML → estructura del contenido.
Aplica el CSS → apariencia visual.
Ejecuta el JavaScript → comportamiento dinámico.

Ejemplo completo


<!DOCTYPE html>
<html>
  <head>
    <style>
      body { background-color: #222; color: white; font-family: sans-serif; }
      button { background: cyan; color: black; padding: 10px; border: none; }
    </style>
  </head>
  <body>
    <h1>Interacción con JavaScript</h1>
    <button onclick="saludar()">Saludar</button>
 
    <script>
      function saludar() {
        alert("¡Hola desde el navegador!");
      }
    </script>
  </body>
</html>

En un solo archivo se combinan las tres capas:
contenido, presentación y lógica.

🔹 El DOM: puente entre HTML y JavaScript

El DOM (Document Object Model) es una representación en memoria del documento HTML.
JavaScript lo usa para modificar dinámicamente los elementos de la página.


document.querySelector("h1").innerText = "Título modificado con JavaScript";

El DOM es el “modelo lógico” que conecta el lenguaje humano (HTML) con la lógica del programa (JavaScript).

🔹 Ejemplo de interacción dinámica


<h1 id="contador">0</h1>
<button onclick="incrementar()">Sumar</button>
 
<script>
  let valor = 0;
  function incrementar() {
    valor++;
    document.getElementById("contador").innerText = valor;
  }
</script>

El navegador actualiza la interfaz en tiempo real:
la lógica se refleja visualmente.

🔹 Limitaciones del entorno web

El navegador no puede acceder directamente a archivos, memoria ni hardware del sistema por razones de seguridad.
Para eso usa APIs controladas (como la cámara, micrófono o almacenamiento local), siempre con permiso del usuario.

El navegador es un entorno seguro pero limitado: protege al usuario y a su dispositivo.

🧭 Conclusión

Los lenguajes del navegador demuestran que la lógica no siempre vive en el sistema operativo:
también puede manifestarse en una página web, visible y accesible.

HTML ordena,
CSS embellece,
JavaScript piensa.

Juntos convierten la lógica en una experiencia interactiva.