Manipulation du DOM avec JavaScript — Mise en page flexible — Polices sur le web

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Manipulation du DOM avec JavaScript — Mise en page flexible — Polices sur le web

Notes de cours

  • Modifier le DOM avec JavaScript
    • Présentation du DOM
    • Manipulation du DOM avec JavaScript
  • Mise en page flexible
    • Conteneur et items
    • Alignement dans les deux axes
    • Gestion du retour à la ligne
    • Taille des items
    • Ordre des items
    • Limites de flexbox
  • Polices en CSS
    • Polices du système et font stack
    • Utiliser n’importe quelle police avec @font-face
    • Plusieurs « styles » pour la même police
    • Inconvénients des polices sur le web

Travail personnel

Objectifs

Ce TP vise à vous (re-)familiariser avec JavaScript et la manipulation du DOM. Il doit être fait sans utiliser de bibliothèque externe : en particulier, si vous avez l'habitude d'utiliser jQuery, c'est l'occasion de vous replonger dans le JavaScript de base.

Il y a également des exercices optionnels de manipulation de flexbox. C'est loin d'être la partie la plus importante du cours et ce n'est pas forcément évident à comprendre, surtout si le reste n'est pas encore maîtrisé. Si c'est le cas pour vous, consolidez plutôt vos bases en finissant (ou en refaisant) les exercices des TP précédents.

Exercice 1 — Manipulation du DOM avec JavaScript

Une proposition de correction des deux premières parties est disponible (archive).

L'archive dom.zip contient un fichier HTML, un fichier CSS, et un fichier JS. Vous devez faire les exercices suivants en modifiant uniquement le fichier JS, et sans utiliser de bibliothèques externes.

Première partie : sans événements

Dans cette partie, on modifie l'apparence et le contenu de la section intitulée « une section bidon », sans action de l'internaute.

  1. Le paragraphe d'identifiant « toto » doit être écrit en blanc sur fond rouge.
  2. Remplacer le texte du premier item de la liste bidon par ce que vous voulez.
  3. Ajouter un quatrième item à la liste.

Deuxième partie : événements

On se place toujours dans la section intitulée « une section bidon », mais cette fois on permet à l'internaute d'interagir avec le DOM.

  1. Cliquer sur le paragraphe toto ajoute un cadre vert autour du premier item de la liste bidon.
  2. Passer la souris sur le mot en emphase dans toto duplique le deuxième item de la liste.
  3. Cliquer sur un item de la liste supprime l'item après avoir écrit son contenu dans la division d'identifiant « sortie ».
  4. Modifier le code pour qu'à la suppression d'un item, la page affiche une alerte indiquant « L'item numéro i a été supprimé » (avec i le numéro de l'item dans la liste).
  5. Appuyer sur la touche « A » du clavier permet d'ajouter un item à la liste. Utiliser la fonction prompt pour demander à l'internaute de rentrer le texte du nouvel item.
  6. Si ce n'est déjà fait, faire en sorte que les items nouvellement dupliqués ou ajoutés soient également supprimés quand on clique dessus… et vérifier que c'est toujours le cas pour les anciens items.

Troisième partie (optionnelle) : un peu plus loin

  1. Cliquer sur la citation de Wikipédia change sa couleur de fond, en suivant un cycle jaune → orange → vert → bleu.
  2. Cliquer sur un des items de la liste dans la dernière section déplace cet item en tête de la liste.
  3. Cliquer sur les titres de niveau h2 doit cacher toute la section correspondante, en laissant le titre apparent. Un deuxième clic affiche la section de nouveau.
  4. Au survol d'un titre de niveau h2, changer ses couleurs et ajouter un petit texte « cliquer pour cacher » ou « cliquer pour afficher » selon le cas.

Exercice 2 — Les boîtes

Un corrigé de cet exercice est disponible (archive).

On va manipuler cette page HTML, qui contient des boîtes de différentes classes. Télécharger l'archive contenant le HTML, le CSS et un fichier JS vide. Sans modifier le HTML ni le CSS, écrire le code JavaScript qui commence par écrire dans chaque boîte le nom de ses classes (dans le span de classe etiquette), puis qui donne aux boîtes le comportement suivant :

  • un clic sur une boîte de classe compte incrémente le compteur (division d'identifiant « compteur ») ;
  • survoler une boîte de classe verte la fait passer à la classe rouge (et inversement) ;
  • les boîtes de classe fantome disparaissent si on clique dessus (le fichier CSS prévoit une classe hidden) ;
  • cliquer sur une boîte de classe revelateur fait réapparaître toutes les boîtes fantome disparues ;
  • cliquer sur une boîte de classe copieur duplique la dernière boîte sur laquelle on a cliqué, et place cette nouvelle boîte à la fin.

Optionnel : les boîtes dupliquées par les copieurs ont-elles le comportement attendu ? Si non, modifiez votre code pour que ce soit le cas.

Exercice 3 (optionnel) — Flexbox Froggy

Cet exercice est optionnel. Si vous avez l'impression qu'il vous embrouille plus qu'il ne vous aide, passez à la suite.

Essayer le petit jeu Flexbox Froggy, qui vise à découvrir ou mieux comprendre les propriétés de flexbox. C'est très clair, bien fait, et en français.

Bonne chance !

Exercice 4 (optionnel) — Application directe de flexbox

Une proposition de correction est disponible (lien vers le CSS commenté ; archive).

On va reproduire la page Helbak, déjà faite dans le TP de mise en page, mais cette fois en utilisant flexbox.

Exemple de page à réaliser

Récupérer cette archive, qui contient une page HTML (NB : le code est un peu différent de la dernière fois, pour que l'exercice soit aussi simple que possible), une feuille de style base.css qui règle tous les détails de présentation qui ne dépendent pas de flexbox (on peut voir le résultat ici), et une feuille de style flex.css vide, qui va servir à régler la mise en page.

Compléter cette feuille de style en utilisant flexbox pour que la page ressemble au modèle ci-dessus. Attention : vous n'avez le droit d'utiliser que les propriétés suivantes :

  • flex-flow (ou flex-direction et flex-wrap)
  • align-items, justify-content, align-content
  • flex
  • et bien sûr display:flex

mais vous ne devez utiliser aucune autre propriété (il n'y en a pas besoin).

Exercice 5 — Modifier les couleurs à la souris

Un corrigé de cet exercice est disponible (archive).

Créer une page HTML quelconque contenant une division d'au moins 200 pixels par 200 pixels (comme celle-ci, par exemple). Faire un script qui modifie les couleurs (texte et fond) de cette division lorsque l'internaute clique dessus, de façon à ce que la couleur du texte dépende uniquement de la position horizontale du clic, et la couleur du fond uniquement de la position verticale du clic. Conseil pour les plus à l'aise : en utilisant les couleurs HSL, il sera sans doute plus facile d'obtenir un résultat intéressant ; essayez de faire en sorte que toutes les teintes soient possibles, pour le texte comme pour le fond, et ce quelque soit les dimensions de la boîte.

Exercice 6 (optionnel) — Mise en page classique responsive, version flex

Une proposition de correction est disponible (lien vers le CSS commenté ; archive).

On reprend l'exercice de mise en page responsive, mais cette fois en utilisant flexbox.

Récupérer cette archive, qui contient une page HTML (dont le code est un peu différent de la dernière fois, en particulier le menu est maintenant à la fin), une feuille de style base.css qui règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style flex.css vide, qui va servir à régler la mise en page.

En utilisant notamment flexbox, compléter cette feuille de style pour que la page respecte les contraintes suivantes. (NB : les propriétés de flexbox ne suffisent pas forcément pour toutes les questions. Réfléchissez et choisissez le meilleur outil pour chaque tâche.)

  1. Au-dessus de 60 rem de largeur, la page doit ressembler à l'image suivante. Le menu doit être à gauche et faire 12 rem de large, l'encadré d'information à droite 15 rem de large, et la colonne du milieu doit prendre toute la largeur restante (sans utiliser calc !). De plus, le pied de page doit être en bas de la page, même si le contenu est trop court (sans utiliser position:absolute !).
    Exemple de page à réaliser
  2. En-dessous de 60 rem de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  3. En-dessous de 50 rem de largeur, l'encadré passe sous la partie principale.
  4. En-dessous de 25 rem de largeur, le menu disparaît et devient une icône (on pourra prendre la lettre « M ») tout en haut à gauche de l'écran.

Exercice 7 (optionnel) — Notes de bas de page

Créer une page HTML quelconque avec du texte, ou récupérer celle-ci. Certains morceaux du texte (au moins trois ou quatre phrases) seront considérés comme des notes de bas de page : ils seront simplement entourés d'un span avec une classe note. Nous allons écrire le code JavaScript permettant de gérer ces notes.

  1. Faire en sorte que les notes n'apparaissent pas dans le texte, mais en dessous, avec des numéros et une police de taille réduite.
  2. Ajouter dans le texte des liens vers les notes (par exemple sous forme d'exposant, ou avec des crochets) ; ajouter dans chaque note un lien pour revenir à l'appel de la note dans le texte.
  3. Rendre les notes de bas de page plus interactives : au survol du numéro, le texte de la note devra apparaître à côté de la souris.
  4. Permettre à l'internaute de pouvoir configurer son choix d'affichage préféré : notes supprimées, notes en bas de page, ou notes laissées dans le texte avec des parenthèses autour (regarder la propriété CSS content).
  5. Optionnel : ajouter un mode « notes de marge », dans lequel chaque note est affichée en petit, dans une des marges, au niveau de l'appel de note correspondant.