Objectifs

• Les objectifs de cette section visent à vous permettre de modifier la page dans différentes situations :
  • Changement de terminal (PC / tablette / mobile)
  • Changement dynamique de taille de la fenêtre
  • Action utilisateur (clic sur un bouton par exemple).
• Vous apprendrez à écouter des évènements et modifier la page (HTML et CSS) en réponse.
• Pour cela, nous verrons les media queries, les animations et comment utiliser JavaScript.

Media queries

• Les media queries sont des instructions CSS qui permettent de n'appliquer des propriétés que dans certains cas.
• Leur syntaxe est de la forme : @media conditions { selector {property: value;} }
• Par exemple : @media screen and (max-width: 1100px) { h1 {color: red;} h2 {font-size: 16px;} }
• Les conditions sont placées entre parenthèses et séparées par le mot-clé and
• Vous pouvez retrouver la liste des conditions ici

Animations (1/3)

• Les animations sont rarement obligatoires, mais font souvent la différence entre un design basique et un résultat plus abouti
• Attention tout de même : l'abus d'animations peut réduire le côté professionnel du rendu, voire rendre le site instable ou inutilisable
• Créer une animation en CSS se fait en 2 étapes :
  • Créer les étapes de l'animation, grâce au mot-clé keyframes : @keyframes leaveBottom { from { left: 0; top: 0; }
to { left: 0; top: 100vh; } }
  • Note : from et to sont des mots-clés existants, mais ils peuvent être remplacés par des pourcentages
  • Note 2 : dans l'exemple précédent, leaveBottom est le nom donné à l'animation. Vous pouvez choisir le nom que vous voulez, il servira à savoir quelle animation appliquer dans la prochaine étape

Animations (2/3)

• Créer une animation en CSS se fait en 2 étapes :
  • Créer les étapes de l'animation, grâce au mot-clé keyframes
  • Appliquer l'animation selector {animation: configuration}
  • Par exemple : .myAnim {animation: 250ms linear 0ms 1 normal both running leaveBottom}
  • Les configurations possibles sont détaillés ici

Animations (3/3)

• Pour lancer une animation, il suffit de l'appliquer directement dans le CSS comme dans l'exemple précédent
• Si vous voulez contrôler le moment où l'animation se lance, il faudra le faire en JavaScript
  • Soit en ajoutant une classe CSS à l'élément voulu au moment où l'on veut que l'animation associée à la classe se lance
  • Soit en appliquant l'animation directement sur l'élément en JS
• Il est également possible de réaliser une animation en JavaScript pur, en lançant une fonction qui s'exécute plusieurs fois par secondes et modifier légèrement le CSS de l'élément à chaque fois.
• Néanmoins, cette méthode n'est recommandée que si le résultat souhaité ne peut pas être atteint avec une animation CSS car c'est plus dur à maîtriser et plus coûteux pour le client

Javascript : Introduction

• Javascript est un langage de programmation créé en 1995 par Brendan Eich pour Netscape
• Pour avoir une documentation standard sur laquelle tout le monde pourrait se baser, il a été soumis a une organisation appelée Ecma International
• Dès 1997 la première spécification est sortie, le langage s'appelant désormais ECMAScript
• Pour les détails sur la syntaxe, elle est détaillée dans l'ancien cours (dans la partie bonus)

Javascript : DOM

• Quand la page est chargée, le moteur JS construit un arbre contenant toutes les balises HTML
• Cet arbre s'appelle le DOM (Document Object Model)
• Le noeud "racine" de cet arbre est la variable document
• On peut accéder aux enfants d'un noeud donné en utilisant les fonction querySelector et querySelectorAll : document.querySelector("p:nth-child(3)") document.querySelectorAll("p:nth-child(3)")
• querySelector renverra toujours un seul élément (le premier trouvé)
• querySelectorAll renverra toujours une liste même s'il n'y a qu'un seul élément (ou 0) qui correspond au sélecteur
• La liste renvoyée n'en est pas vraiment une, dans certains cas pour l'utiliser il faudra la convertir grâce à Array.from(liste)

Javascript : Modifier le HTML (1/2)

• Après avoir récupéré l'élément HTML que l'on souhaite modifier, on peut modifier ses propriétés
• Par exemple, il est possible de lui rajouter ou enlever une classe : let monElement = document.querySelector("p:nth-child(3)"); monElement.classList.add("myClass"); monElement.classList.remove("myClass");
• On peut également modifier son id : let monElement = document.querySelector("p:nth-child(3)"); monElement.id = "nouvelID";
• Plus globalement, on peut modifier n'importe quel attribut d'un élément HTML : let monElement = document.querySelector("p:nth-child(3)"); monElement.getAttribute("title"); monElement.setAttribute("title", "nouveauTitre"); monElement.removeAttribute("title");

Javascript : Modifier le HTML (2/2)

• Il est également possible de modifier son contenu : let monElement = document.querySelector("p:nth-child(3)"); monElement.innerHTML = "<span>Nouveau contenu</span>";
• Enfin, on peut créer du HTML de 0 et l'ajouter où on le souhaite : const newDiv = document.createElement("div"); const newContent = document.createTextNode("Lorem Ipsum"); newDiv.appendChild(newContent); document.body.append(newDiv);
• Il existe de nombreuses autres méthodes pour modifier le contenu d'une balise

Javascript : Modifier le CSS

• Après avoir récupéré l'élément HTML que l'on souhaite modifier, il suffit de modifier ses propriétés CSS
• On peut y accéder grâce à la propriété style de n'importe quel element HTML : let monElement = document.querySelector("p:nth-child(3)"); monElement.style.color = "red";
• Note : si la propriété s'écrit avec un tiret en CSS, elle s'écrira en camelCase en js.
• Il est possible de récupérer les propriétés d'un élément grâce à la fonction getComputedStyle(element)

Javascript : Réagir aux évènements

• De nombreux évènements peuvent se produire dans une page :
  • La page est chargée
  • Un utilisateur clique quelque part (sur un bouton en général)
  • Une touche du clavier est enfoncée
  • La souris se déplace
• Pour écouter un évènement, on utilise la fonction addEventListener let monElement = document.querySelector("p:nth-child(3)"); monElement.addEventListener("click", callbackFunction); ... function callbackFunction(event) { ... }
• L'argument passé à la fonction de callback dépend de l'évènement
• Si vous souhaitez écouter l'évènement partout sur la page, vous pouvez utiliser window.addEventListener(event, callback)

Exercice 1

L'objectif de cet exercice va être de créer un burger menu

• Commencez par créer le menu. Ça peut être une liste de liens ou de boutons. Ajoutez du CSS pour :
  • Qu'il rende bien
  • Qu'il soit placé tout en haut à droite de la page
• Une fois que votre menu vous semble bien, décalez-le légèrement vers la droite pour qu'il sorte de la page et ne soit plus visible
• Ensuite, créez une balise div contenant 3 autres div et appliquez-leur le CSS nécessaire pour que :
  • Le div "parent" fasse 45 pixels de large et 35 de haut et soit placé à 10px du coin en haut à droite de la page
  • Les 3 div "enfants" fassent 45 pixels de large, 8px de haut, aient des bords arrondis, un fond noir et soient espacés de manière équilibrée verticalement dans leur parent
• L'étape d'après est de créer 2 animations : 1 qui ramène le menu vers la gauche pour qu'il redevienne visible ; l'autre qui pousse le menu vers la droite pour qu'il soit caché (comme ça doit être le cas par défaut).
• Enfin, il faut que vous écoutiez le clic sur le burger, et que vous fassiez apparaître ou disparaître le menu à chaque clic !