Les différences entre HTML, CSS et JavaScript — ce que dessine la couche serveur Web

Cet article traite des trois éléments qui composent la couche serveur Web : HTML, CSS et JavaScript.

On les écrit à des endroits séparés — index.html, style.css et script.js — parce que ce qu'ils décident est différent.

Les trois fichiers n'arrivent pas ensemble.

Le navigateur reçoit les trois fichiers, et c'est lui qui les charge et les exécute.

HTML écrit ce qu'il y a à l'écran, par types de composants et par ordre

HTML (HyperText Markup Language : le langage qui écrit ce qu'il y a à l'écran, par types de composants et par ordre) s'écrit dans index.html.

Chaque composant de l'écran est un élément (element), les noms et les réglages attachés à un élément sont des attributs (attribute), et les signes qui marquent le début et la fin d'un élément sont des balises (tag).

L'index.html du formulaire de réservation est fait de ces trois choses.

<form>
  <input type="date">
  <button type="button" id="reserve" class="action">Réserver</button>
  <p id="message"></p>
</form>

id et class sont les noms qui serviront plus tard à CSS et à JavaScript pour choisir un composant.

Un id ne s'utilise qu'une seule fois par page, alors qu'une class peut être posée sur autant d'éléments que tu veux.

Les éléments peuvent s'imbriquer, et l'élément button se trouve à l'intérieur de l'élément form.

L'élément head contient le titre de la page et les noms des fichiers utilisés, et seul l'intérieur de l'élément body apparaît à l'écran.

index.html écrit seulement ce qu'il y a

Tout ce que tu écris dans index.html, c'est ce qu'il y a à l'écran.

Une balise indique le type de chaque composant, et tu écris le contenu ainsi que l'ordre dans lequel les composants se suivent ; les id et class posés sur la balise ouvrante sont les noms qui serviront plus tard à un autre fichier pour choisir ce composant.

CSS regroupe l'apparence des éléments dans un fichier séparé

CSS (Cascading Style Sheets : le langage qui écrit comment montrer les éléments HTML, sous forme de règles de couleur, de taille et de placement) ne décide que l'apparence.

style.css a la forme suivante.

.action {
  background-color: #2a6f97;
  color: white;
  border-radius: 8px;
}

Le .action du début indique à quels éléments la règle s'applique.

Les trois lignes entre accolades s'appliquent à tous les éléments dont la class est action.

Dans style.css, tu alignes de nombreuses règles de ce genre.

Quand un même écran comporte trois boutons, le nombre de corrections à faire pour changer la couleur dépend de l'endroit où tu as écrit l'apparence.

Tu peux aussi écrire l'apparence dans l'attribut style d'un élément, mais tu répètes alors le même changement autant de fois qu'il y a d'éléments.

Regroupe-la dans style.css et il n'y a qu'un seul endroit à corriger.

style.css choisit par le nom et décide de l'apparence

Tout ce que fait style.css, c'est énumérer quels composants sont montrés de quelle façon.

Le composant est choisi par le nom de class ou d'id posé dans index.html, et style.css n'ajoute pas de composants et ne réécrit pas le texte.

JavaScript réagit aux actions et réécrit l'écran

Un écran fait uniquement de HTML et de CSS ne change plus de contenu une fois affiché.

Afficher un texte quand le bouton est pressé, c'est le travail de JavaScript dans la couche serveur Web.

script.js a la forme suivante.

const button = document.querySelector("#reserve");
button.addEventListener("click", () => {
  document.querySelector("#message").textContent = "Ta réservation a été envoyée";
});

Le document de la première ligne est le nom qui désigne la page entière chargée par le navigateur.

Le #reserve qui suit est la façon d'écrire pour choisir l'élément dont l'id est reserve, et le signe placé devant le nom indique s'il s'agit d'une class ou d'un id.

Les trois fichiers sont reliés par les noms posés dans index.html.

L'addEventListener de la deuxième ligne enregistre ce qu'il faut faire lors d'un click.

Le () => { } qui suit est la forme dans laquelle tu écris, entre les accolades, le code à exécuter quand le bouton est pressé.

Une action de l'utilisateur que le navigateur signale au programme, comme ce clic, est un événement (event).

Le clic n'est pas le seul type d'événement.

Tu enregistres à l'avance ce qu'il faut faire pour chaque événement.

Le changement de couleur au passage de la souris vient du CSS, et l'envoi du formulaire est fait par le navigateur.

script.js arrive lui aussi dans le navigateur de l'utilisateur et son contenu est lisible, donc tu n'y écris pas de valeurs que les autres ne doivent pas voir.

script.js ne s'exécute qu'une fois appelé

Tout ce que fait script.js, c'est enregistrer à l'avance : quand ceci est pressé, fais cela.

Le code que le navigateur appelle au moment de la pression réécrit des composants de l'écran, mais le contenu d'index.html ne change pas, et comme script.js arrive dans le navigateur de l'utilisateur, tu n'y écris pas de valeurs que les autres ne doivent pas voir.

Le navigateur construit le DOM depuis le HTML, applique le CSS et dessine, puis JavaScript le réécrit

Le navigateur n'affiche pas le texte du HTML tel quel : il assemble l'imbrication des éléments sous forme de données.

Ce sont ces données qui forment le DOM (Document Object Model : des données qui rangent les éléments en gardant leur imbrication).

Ce que tu vois à l'écran est un dessin de ce DOM.

Le code enregistré par script.js attend lui aussi dans la même mémoire du navigateur que le DOM.

Les trois fichiers arrivent séparément et se réunissent en un seul DOM à l'intérieur du navigateur.

La page que tu vois à l'écran est un dessin de ce DOM.

Appliquer le CSS au DOM, calculer les positions et les tailles, puis dessiner, c'est le rendu (rendering).

Seul le DOM dans la mémoire du navigateur est réécrit.

L'index.html arrivé, comme les fichiers posés sur le serveur public, restent tels quels.

Le contenu que tu veux garder est envoyé à la couche serveur d'application et enregistré dans la couche base de données.

L'écriture du JavaScript et la pratique dans le navigateur sont traitées dans le cours d'introduction à JavaScript.

L'écran est un dessin du DOM

Le navigateur assemble l'imbrication des composants depuis l'index.html reçu, puis leur donne couleur et taille avec les règles de style.css et les dessine.

Ce que script.js réécrit, c'est cette version assemblée : en rechargeant, elle est réassemblée depuis les fichiers arrivés et le contenu réécrit disparaît.