Les bases du web côté navigateur

Un café a une page de menu du midi, avec une liste de plats, une case pour en chercher un et un bouton pour un thème sombre. Il faut que quelqu'un dise ce qu'il y a sur la page, quelqu'un d'autre comment elle se présente, et un troisième ce qu'elle fait quand on appuie sur un bouton. Sur le web, ce sont trois langages, chacun avec son rôle.

• HTML : le langage qui dit ce qu'il y a sur une page : titres, listes, liens, formulaires.
• Élément : une partie d'une page, écrite sous forme de balise comme h2 ou li.
• CSS : le langage qui dit l'aspect des éléments.
• Sélecteur : la partie d'une règle CSS qui dit pour quels éléments elle vaut.
• Déclaration : un réglage dans une règle, comme margin: 1rem.
• Modèle de boîte : chaque élément est une boîte avec un contenu, une marge intérieure, une bordure et une marge extérieure.
• DOM : la page telle que le navigateur la garde en mémoire, que JavaScript peut lire et modifier.
• Événement : quelque chose qui se passe sur la page, comme un clic.

ls site liste les trois fichiers de la page : index.html pour ce qu'il y a dessus, style.css pour son aspect et app.js pour ce qu'elle fait. La deuxième commande affiche leur taille : 1373, 1125 et 1093 octets, soit 3591 en tout. C'est une page entière. Ouvre Preview pour la voir, et JupyterLab pour lire les fichiers.

Le script lit index.html comme un navigateur commence à le faire, balise par balise. Il compte 36 balises en tout. a et li apparaissent cinq fois chacun, et section trois fois. Le second script n'affiche que les titres, c'est-à-dire le plan de la page : un h1, Lunch menu, et dessous trois titres h2. Les titres ne servent pas à grossir le texte. C'est ainsi que la page dit de quoi elle parle, et c'est ce qu'un lecteur d'écran utilise pour sauter d'un endroit à un autre.

Une règle CSS, c'est un sélecteur et des déclarations entre accolades. Le script trouve 17 règles et 39 déclarations, et le réglage le plus utilisé est padding, six fois. Chaque élément est une boîte : son contenu, puis une marge intérieure, puis une bordure, puis une marge extérieure. La règle de .dish fixe padding, margin-bottom, border et border-radius, ce qui explique pourquoi chaque plat est une carte bordée avec de l'air autour. Quand deux règles visent un même élément, le sélecteur le plus précis l'emporte, et à égalité la dernière. C'est la cascade. body.dark est plus précis que body, donc une page sombre échange les couleurs. Change une valeur dans style.css, enregistre, recharge la page Preview et relance le script.

Le script lit app.js pour trouver ce qu'il définit et ce qu'il attend. Il a deux fonctions, filterDishes et toggleTheme, et trois écouteurs : submit et input sur la case de recherche, et click sur le bouton de thème. Quand l'un de ces événements arrive, la fonction modifie le DOM, la page que garde le navigateur. Essaie dans Preview : tape tom dans la case et la liste se réduit aux deux plats qui contiennent ces lettres, puis appuie sur Dark theme. Il n'y a ni bibliothèque ni appel réseau, seulement ce que le navigateur a déjà.

Une page qui a l'air juste peut quand même être cassée. Le premier script liste chaque lien et dit où il mène : trois liens restent sur la page et chacun trouve sa cible, un va vers un fichier d'ici et un vers un autre site. Le second demande la page au serveur de Preview, comme le fait un navigateur, et affiche le statut 200, le titre Lunch menu, et que style.css revient avec le type text/css. Un statut 404 voudrait dire qu'un fichier demandé par la page manque.

Ouvre JupyterLab depuis la barre et double-clique sur start.ipynb. Ses cellules lisent les mêmes fichiers en Python : elles comptent les balises, listent les règles CSS et demandent la page à Preview. Clique sur une cellule et appuie sur Maj et Entrée pour l'exécuter. La dernière cellule attend ta propre modification : change style.css, enregistre, puis recompte les règles.