Outils CSS pour le design adaptatif — Introduction à JavaScript — Compléments sélecteurs CSS

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Outils CSS pour le design adaptatif — Introduction à JavaScript — Compléments sélecteurs CSS

Notes de cours

Travail personnel

Objectifs

Ce TP contient d'une part des exercices de CSS sur le design responsive, et d'autre part des exercices de base pour apprendre à manipuler le langage JavaScript (sans pour l'instant se préoccuper de l'interaction avec le HTML et le navigateur en général).

Il contient également un exercice un peu particulier sur les pièges classiques du CSS, qui n'a pas de rapport avec le cours de cette semaine, mais qu'il est utile de faire le plus tôt possible.

Exercice 1 — Prise en main de JavaScript et callbacks

Un corrigé de cet exercice est disponible (archive) : Hello world, étoiles, étoiles anonymes, chanson.

Cet exercice vise à vous faire manipuler une des choses les plus importantes en JavaScript, l'utilisation de fonctions comme callbacks, et rencontrer les problèmes des clôtures. Les débutant·e·s découvriront au passage les fondamentaux du langage (instructions de contrôle, variables et fonctions, tableaux…), mais les autres doivent aussi faire l'exercice pour de vrai (il y a des aspects pas évidents).

Hello world

  1. Créer un fichier HTML avec le contenu suivant :
    <!DOCTYPE html>
    <title>Hello world</title>
    <p>Ouvrir la console pour voir le résultat</p>
    <script>
    "use strict";
    
    alert("Hello, world!");
    console.log("Im in ur console");
    
    </script>
  2. Ouvrir la page HTML avec un navigateur (depuis le web ou en local, ça devrait fonctionner de manière identique) : vous devriez avoir un message pop-up, et si vous ouvrez la console (control-shift-K sous Firefox), vous devriez voir le message correspondant.
  3. Afficher le même message plusieurs fois : il est possible que la console (en tout cas celle de Firefox) n'affiche pas les messages identiques, mais se contente d'incrémenter un compteur (en rouge à droite), pour dire « ce message est apparu tant de fois ».
  4. Essayer de créer une variable avec x = 3. Pourquoi ça ne marche pas ? Que faut-il faire pour que ça marche ?
  5. Supprimer le contenu du script, et écrire une fonction saluer qui écrit « Hello, world! » dans la console.
  6. Faire en sorte que le script attende 3 secondes avant d'appeler la fonction saluer.
  7. Faire en sorte que le script affiche un autre message (de votre choix) au bout de 5 secondes.
  8. Si ce n'est déjà fait, utiliser une fonction anonyme pour faire la question précédente.

Étoiles

  1. Dans un nouveau script (reprendre le fichier HTML précédent — ne pas oublier l'utilisation du mode strict !), écrire une fonction etoiles(n) qui affiche n astérisques dans la console (par exemple ****** pour n=6).
  2. Faire en sorte que le script attende 5 secondes puis affiche 17 astérisques dans la console. Si vous avez du mal, inspirez-vous de ce que vous avez fait dans la partie précédente.
  3. Écrire une fonction etoilesSurprises(n) qui affiche n astérisques dans la console au bout de n secondes.
  4. Lancer etoilesSurprises pour n variant de 1 à 10.
  5. Écrire un autre script qui doit faire exactement la même chose, mais en n'utilisant que des fonctions anonymes. Vous allez probablement rencontrer un problème ; lequel ? Pourquoi ça fonctionnait dans la question précédente ? Comment résoudre le problème ? Indice, on peut appeler immédiatement une fonction anonyme qu'on vient de créer en l'entourant de parenthèses :
    (function (x) {
    	console.log("J'affiche tout de suite le paramètre " + x);
    })(3)
    

Chanson

  1. Dans un nouveau script, créer un tableau chanson contenant quelques paroles d'une chanson, sous forme de plusieurs chaînes de caractères (une par vers). Ajouter une chaîne pour l'artiste à la fin du tableau.
  2. Faire en sorte que le script affiche le premier vers au bout d'une seconde, le second au bout de deux secondes, etc., mais n'affiche pas l'artiste. Si vous n'y arrivez pas, essayez de vous inspirer de ce que vous avez fait dans la section précédente : est-ce vraiment si différent ?

Exercice 2 — Manipulation des outils pour le responsive

Un corrigé de cet exercice est disponible (lien vers le CSS commenté ; archive).

Créer une page HTML avec un titre et du texte dans un paragraphe, puis modifier le CSS pour remplir les conditions suivantes ; tester en redimensionnant la fenêtre (ou avec l'outil « responsive design mode » de Firefox).

  1. La couleur de fond doit être rouge si la fenêtre fait moins de 800px de large, et bleue sinon.
  2. Le paragraphe doit prendre toute la largeur si la fenêtre fait moins de 700px, et 50% de la largeur sinon.
  3. Le titre doit être en gras si la fenêtre fait moins de 500px de large, en italique si elle fait plus de 1000px de large, et en gras italique entre les deux.
  4. La police du titre doit prendre 10% de la hauteur de la fenêtre, quelle qu'elle soit.
  5. Si la fenêtre fait moins de 320px de largeur, le titre ne doit pas apparaître.

Exercice 3 — Manipulations d’objets JS : jeu de bataille

Pour vous faire manipuler les objets en JavaScript, cet exercice prend comme prétexte le passionnant jeu de cartes appelé la bataille. Créer un nouveau fichier HTML avec un script (penser à utiliser le mode strict). On va utiliser la console pour simuler un jeu de bataille.

  1. Créer un tableau couleurs contenant les quatre couleurs d'un jeu de 32 cartes (pique, cœur, trèfle, carreau), et un tableau valeurs contenant les huit valeurs d'un jeu de 32 cartes (sept, huit, neuf, dix, valet, dame, roi, as).
  2. Utiliser ces deux tableaux pour afficher dans la console chacune des 32 cartes comme suit :
    sept de pique
    huit de pique
    […]
    roi de carreau
    as de carreau
    
  3. Créer une fonction creerCarte(v, c) qui renvoie un objet avec un attribut valeur valant v et un attribut couleur valant c. Tester :
    var test = creerCarte("roi", "carreau");
    console.log(test.valeur, "de", test.couleur);
    
  4. Créer un tableau vide jeu et le remplir avec les 32 cartes sous forme d'objets. On doit pouvoir ensuite exécuter des instructions comme
    console.log(jeu[4].valeur, "de", jeu[4].couleur);
    
  5. Modifier creerCarte pour ajouter une méthode afficher() aux objets retournés, pour qu'on puisse écrire :
    jeu[5].afficher();  // affiche "dame de pique"
    
  6. Ajouter une autre méthode gagneContre(carte), qui prend une autre carte en argument, et renvoie true si l'autre carte est plus faible, false si l'autre carte est plus forte, et 0 s'il y a égalité. (Indice : pour décider quelle carte est la plus forte, vous pouvez utiliser le tableau valeurs.)
  7. Afficher une carte tirée au hasard dans le jeu (indice : Math.random() et Math.floor()).
  8. « Distribuer » le jeu entier dans deux tableaux mainDeToto et mainDeMimi, qui représentent les mains des deux joueurs Toto et Mimi.
  9. Créer une fonction jouerTour(), qui compare la première carte de la main de Toto avec la première carte de la main de Mimi. Si la carte de Toto est plus forte, il remporte les deux cartes (elles sont placées à la fin de sa main, la plus forte en premier), et inversement pour Mimi. En cas d'égalité, pour simplifier, on tirera au sort.
  10. Créer une fonction jouerPartie() qui déroule une partie entière, jusqu'à ce que soit Toto soit Mimi n'ait plus de cartes. La fonction doit renvoyer le nombre de tours qu'a comptés la partie.

Attention : si les parties ne semblent pas finir, vérifiez que vous avez respecté la contrainte de rangement des cartes gagnées, qui influence énormément le résultat. D'autre part, il peut être une bonne idée d'abandonner une partie si elle a duré plus de 1000 tours (les parties infinies sont rares, mais possibles).

Questions optionnelles

Si vous voulez prolonger un peu l'exercice, vous pouvez faire les questions suivantes, mais pas pendant le TP (faire les autres exercices d'abord).

  1. Implémenter la vraie bataille : lors d'une égalité, on ignore la carte suivante de Toto et Mimi, et on regarde celle qui suit ; le ou la gagnant·e remporte toutes les cartes (donc six en tout). S'il y a à nouveau égalité, on applique encore le mécanisme (le ou la gagnant·e remportera donc dix cartes), etc.
  2. Modifier le code pour qu'il n'y ait plus de variables mainDeToto et mainDeMimi, mais un tableau mains qui contient les mains de tous les participants. Créer une fonction distribuer(n) qui distribue le jeu à n joueurs.
  3. Estimer la longueur moyenne d'une partie en fonction du nombre de participants.

Exercice 4 — Pièges classiques en CSS

Un corrigé de cet exercice est disponible ; les points importants seront présentés lors d'un prochain cours.

Chaque question ci-dessous est liée à une page HTML avec un peu de CSS dedans.

L'idée est que, pour chaque page, le CSS donné semble devoir fonctionner, mais ne fonctionne pourtant pas.

Le premier objectif de chaque question est de réussir à faire fonctionner le CSS comme désiré, sans modifier le HTML ; le deuxième objectif, plus important mais plus difficile, est de comprendre pourquoi ça ne marche pas comme on l'attendrait.

Essayez de chercher par vous-même ! Si on vous donne la réponse, même si vous avez l'impression d'avoir compris, vous n'aurez pas appris grand'chose.

Les questions sont rangées par ordre (plus ou moins) croissant de difficulté. Les dernières ne sont vraiment pas évidentes ; vous pouvez voir ça comme un challenge, mais ne perdez pas non plus trop de temps ! Cela dit, toutes les réponses sont techniquement trouvables. Elles seront données lors d'un prochain cours.

Toutes les pages sont disponibles dans cette archive.

  1. Pourquoi les items ne tiennent-ils pas sur une seule ligne ?
  2. Pourquoi les blocs ne sont-ils pas côte-à-côte ?
  3. Pourquoi les items ne changent-ils pas de couleur au survol ?
  4. Pourquoi le bloc ne fait-il pas 50% de la hauteur de son parent ?
  5. Pourquoi le header n'est-il pas collé en haut, alors que ses marges et celles du body sont à 0 ?
  6. Pourquoi le titre est-il souligné, malgré le text-decoration:none dans le header ?
  7. Pourquoi l'image de fond du body est-elle plus large que le body lui-même, qui est fixé à 800 pixels ?
  8. Pourquoi y a-t-il de l'espace vertical sous les items ?
  9. Pourquoi ne puis-je pas cliquer sur le lien ?
  10. Pourquoi la première ligne du paragraphe ne change-t-elle pas de couleur au survol du paragraphe ?

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

Un corrigé de cet exercice est disponible (lien vers le CSS commenté ; archive).

Récupérer cette archive qui contient une page HTML et une feuille de style vide. Créer le CSS permettant de l'afficher avec une mise en page classique, comme sur l'image suivante, avec pour contrainte que le menu de gauche doit faire 180 pixels de largeur, la colonne de droite 250 pixels de largeur, et la colonne du milieu doit prendre toute la largeur restante.

Modèle de page à réaliser
Rendre ensuite votre page responsive en respectant les contraintes suivantes :

  • Le contenu (c'est-à-dire le body) ne doit pas dépasser 1000 pixels de largeur ; si l'écran est plus grand, des marges doivent apparaître.
  • En-dessous de 1000 pixels de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  • En-dessous de 768 pixels de largeur, l'encadré passe sous la partie principale.
  • En-dessous de 400 pixels 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 6 (optionnel) — Un vrai site adaptatif

Nous allons travailler sur une version simplifiée de la page d'accueil du site World Wildlife Fund. On ne fera en particulier que le haut de la page, en retirant toutes les icônes et les éléments dynamiques (menus, carrousel).

L'archive fournie pour le TP donne les captures d'écran qui doivent servir de modèles, en fonction de la taille d'écran (desktop, tablette et mobile), ainsi que les contenus nécessaires à reproduire les modèles (images, textes et couleurs).

Cet exercice est très long ! Ne vous focalisez pas sur les détails, commencez par travailler sur les grandes lignes.

Il est vivement recommandé de continuer cet exercice en dehors du TP, c'est un très bon moyen de vous familiariser avec la mise en page CSS et ses difficultés, indépendamment de l'aspect responsive. C'est aussi un très bon entraînement à l'examen sur machine.