Pregunta 1¿Qué archivo tocas cuando quieres cambiar el color de fondo del botón de reserva?
Las diferencias entre HTML, CSS y JavaScript — lo que dibuja la capa de servidor Web
Este artículo forma parte del curso Fundamentos de informática, que construye desde cero los conocimientos prácticos de informática que necesitas como mínimo para programar y hacer vibe coding.
HTML fija qué hay en la pantalla, CSS cómo se ve y JavaScript cómo reacciona a lo que haces. Los diagramas muestran cómo los tres acaban siendo una sola pantalla.
Este artículo trata los tres que forman la capa de servidor Web: HTML, CSS y JavaScript.
Se escriben en lugares separados, index.html, style.css y script.js, porque lo que deciden es distinto.
Los tres archivos no llegan juntos.
Los tres archivos los recibe el navegador, y el navegador es quien los carga y quien los ejecuta.
En HTML se escribe qué hay en la pantalla, con los tipos de partes y su orden
HTML (HyperText Markup Language: el lenguaje que describe qué hay en la pantalla con tipos de partes y su orden) se escribe en index.html.
Cada parte de la pantalla es un elemento (element), los nombres y ajustes que se ponen a un elemento son atributos (attribute), y los signos que marcan dónde empieza y dónde acaba un elemento son las etiquetas (tag).
El index.html del formulario de reservas está hecho de estos tres.
<form>
<input type="date">
<button type="button" id="reserve" class="action">Reservar</button>
<p id="message"></p>
</form>
id y class son los nombres con los que CSS y JavaScript eligen después una parte.
Un id se usa una sola vez por página, mientras que un class se puede poner a cualquier número de elementos.
Los elementos se pueden anidar, y el elemento button está dentro del elemento form.
elemento html — toda la página
elemento head — no sale en la pantalla
- El título de la página
- Los nombres de archivo style.css y script.js
elemento body — sale en la pantalla
- El encabezado «Reserva»
elemento form — el formulario de reservas
- elemento input — el campo de la fecha
- elemento button — el botón «Reservar»
- elemento p — un hueco con el contenido vacío
En el elemento head se escriben el título de la página y los nombres de los archivos que usa, y en la pantalla solo sale lo que está dentro del elemento body.
En index.html solo se escribe qué hay
Lo único que escribes en index.html es qué hay en la pantalla.
Las etiquetas indican el tipo de cada parte, escribes el contenido y el orden en que se colocan, y el id y el class de la etiqueta de apertura son los nombres con los que otro archivo elige después esa parte.
CSS reúne en otro archivo cómo se ven los elementos
CSS (Cascading Style Sheets: el lenguaje que describe cómo se muestran los elementos de HTML, como reglas de color, tamaño y colocación) decide solo el aspecto.
style.css tiene esta forma.
.action {
background-color: #2a6f97;
color: white;
border-radius: 8px;
}
El .action del principio indica a qué elementos se aplica.
Las tres líneas de dentro de las llaves se aplican a todos los elementos cuyo class es action.
Dentro de style.css se colocan muchas reglas como esta, una tras otra.
style.css
Reglas de body
- Color de fondo de toda la página
- Tamaño del texto
Reglas de .action — elementos cuyo class es action
- Color de fondo #2a6f97
- Color del texto white
- Redondeo de esquinas 8px
Reglas de #message — el elemento cuyo id es message
- Color del texto
- Margen superior
Cuando una misma pantalla tiene tres botones, cuántos lugares tocas para cambiar el color depende de dónde escribiste el aspecto.
| Dónde está escrito el aspecto | Lugares que tocar para cambiar el color | Resultado en los tres botones |
|---|---|---|
| El atributo style de cada button | Tocar 3 lugares | Si olvidas uno, los colores no coinciden |
| .action en style.css | Tocar 1 lugar | Los tres cambian al mismo color |
| #reserve en style.css | Tocar 1 lugar | Solo cambia el que lleva el id |
También puedes escribir el aspecto en el atributo style del elemento, pero entonces repites el mismo cambio tantas veces como elementos haya.
Si lo reúnes en style.css, solo tocas un lugar.
style.css elige por nombre y decide el aspecto
Lo único que hace style.css es enumerar qué parte se muestra de qué manera.
La parte se elige por el nombre de class o de id puesto en index.html, y no añade partes ni reescribe textos.
JavaScript reacciona a lo que haces y reescribe la pantalla
Una pantalla hecha solo con HTML y CSS no cambia de contenido después de mostrarse.
Mostrar un texto cuando se pulsa el botón es de lo que se encarga JavaScript en la capa de servidor Web.
script.js tiene esta forma.
const button = document.querySelector("#reserve");
button.addEventListener("click", () => {
document.querySelector("#message").textContent = "Se envió tu reserva";
});
El document de la primera línea es el nombre que designa toda la página que cargó el navegador.
El #reserve que sigue es la forma de elegir el elemento cuyo id es reserve, y el signo delante del nombre indica si es un class o un id.
Los tres archivos están conectados por los nombres puestos en index.html.
El addEventListener de la segunda línea registra qué hacer cuando hay un clic.
El () => { } que sigue es la forma en la que escribes, dentro de las llaves, el código que se ejecuta al pulsar.
Un suceso como este clic, en el que el navegador le cuenta al programa lo que hizo el usuario, es un evento (event).
Los clics no son el único tipo de evento.
Registras de antemano qué hacer en cada evento.
El cambio de color al poner el ratón encima viene del CSS, y el envío del formulario lo hace el navegador.
script.js también llega al navegador del usuario y su contenido se puede leer, así que no escribas en él valores que los demás no deben ver.
script.js se ejecuta cuando se le llama
Lo único que hace script.js es registrar de antemano: cuando se pulse esto, haz esto.
El código que llama el navegador al pulsar reescribe partes de la pantalla, pero el contenido de index.html no cambia y, como script.js llega al navegador del usuario, no escribes en él valores que los demás no deben ver.
El navegador crea el DOM desde el HTML, aplica el CSS y dibuja, y luego lo reescribe con JavaScript
El navegador no muestra el texto del HTML tal cual: monta el anidamiento de los elementos como datos.
Eso es el DOM (Document Object Model: datos que colocan los elementos manteniendo su anidamiento).
Lo que ves en la pantalla es un dibujo de este DOM.
El código que registró script.js también espera en la misma memoria del navegador que el DOM.
La memoria del navegador del usuario
DOM — anidamiento de elementos creado desde index.html
elemento body — la parte que sale en la pantalla
- elemento button — su contenido es «Reservar»
- elemento p — su contenido está vacío
- Los dos mantienen su id y su class
Código registrado por script.js
- Al hacer clic, reescribe el contenido de p
Los tres archivos llegan por separado y se juntan en un solo DOM dentro del navegador.
La página que ves en la pantalla es un dibujo de este DOM.
Aplicar el CSS al DOM, calcular posiciones y tamaños y dibujar es el renderizado (rendering).
Lo único que se reescribe es el DOM que está en la memoria del navegador.
El index.html que llegó y los archivos que están en el servidor público se quedan como estaban.
El contenido que quieres conservar se envía a la capa de servidor de aplicaciones y se guarda en la capa de base de datos.
Cómo se escribe JavaScript, y la práctica de ejecutarlo en el navegador, se ven en el Curso de introducción a JavaScript.
La pantalla es un dibujo del DOM
El navegador monta el anidamiento de las partes desde el index.html que recibió, les pone color y tamaño con las reglas de style.css y lo dibuja.
Lo que reescribe script.js es esa versión montada, así que al recargar se vuelve a montar desde los archivos que llegaron y el contenido reescrito desaparece.
QUIZ
Verificación de conocimientos
Responde cada pregunta una a una.
Pregunta 2¿Con qué eligen CSS y JavaScript un elemento de HTML?
Pregunta 3Cuando JavaScript reescribe el texto de un botón, ¿qué es lo que cambia?