Introduction 3.Donnez du style à vos éléments

Présentation au sujet: "Introduction 3.Donnez du style à vos éléments"— Transcription de la présentation:

1 Introduction 3.Donnez du style à vos éléments
Le langage JavaScript permet non seulement d'interagir avec la structure d'une page web, mais aussi de modifier le style de ses éléments. Découvrons comment faire dans ce chapitre. Récupérer les fichiers style.html et style.css Ici, la feuille contient une seule règle qui modifie le style de l'élément identifié par para dans la page web : le texte sera écrit en italique et de couleur bleue.

2 Modifier le style d'un élément
3.Donnez du style à vos éléments Modifier le style d'un élément La propriété style Les éléments du DOM disposent d'une propriété nommée style qui renvoie un objet représentant l'attribut style de l'élément. Les propriétés de cet objet correspondent aux propriétés CSS de l'élément. En définissant leur valeur depuis JavaScript, on modifie le style de l'élément. Le code ci-dessous sélectionne le premier paragraphe (balise <p> ) de la page, puis modifie la couleur du texte et les marges de ce paragraphe. var pElt = document.querySelector("p"); pElt.style.color = "red"; pElt.style.margin = "50px";

3 Les propriétés CSS composées
3.Donnez du style à vos éléments Les propriétés CSS composées Certaines propriétés CSS s'écrivent sous la forme d'un nom composé. Pour utiliser ces propriétés en JavaScript, il faut supprimer le tiret et écrire la première lettre du mot suivant en majuscule. L'exemple ci-dessous modifie les propriétés CSS font-family et background-color du paragraphe sélectionné plus haut. Liste des principales propriétés CSS et leurs équivalents Javascript pElt.style.fontFamily = "Arial"; pElt.style.backgroundColor = "black";

4 Accéder au style d'un élément
3.Donnez du style à vos éléments Accéder au style d'un élément Les limites de la propriété style Essayons d'utiliser la propriété style pour récupérer les propriétés CSS d'un élément. L'exemple suivant affiche la couleur du texte de chacun des trois paragraphes de notre page web. La couleur du texte du troisième paragraphe (blue) n'apparait pas... La propriété style utilisée en JavaScript représente l'attribut style de l'élément. Elle ne permet pas d'accéder aux déclarations de style situées ailleurs, par exemple dans une feuille de style CSS externe. var paragraphesElts = document.getElementsByTagName("p"); console.log(paragraphesElts[0].style.color); // Affiche "red" console.log(paragraphesElts[1].style.color); // Affiche "green" console.log(paragraphesElts[2].style.color); // N'affiche rien

5 Accéder au style d'un élément
3.Donnez du style à vos éléments Accéder au style d'un élément La fonction getComputedStyle La bonne solution pour accéder au style d'un élément consiste à utiliser une fonction nommée getComputedStyle. Elle prend en paramètre un noeud du DOM et renvoie un objet représentant son style. On peut ensuite consulter les différentes propriétés CSS de cet objet. var stylePara = getComputedStyle(document.getElementById("para")); console.log(stylePara.fontStyle); // Affiche "italic" console.log(stylePara.color); // Affiche la couleur bleue en valeurs RGB

6 TP 3.Donnez du style à vos éléments
1- Récupérer le fichier couleurs.html Codez le fichier jcouleurs.js afin de faire saisir à l'utilisateur la nouvelle couleur du texte puis la nouvelle couleur de fond des trois paragraphes de la page web. Les couleurs sont saisies sous leur nom anglais. 2- Récupérer les fichiers infos.html et infos.css Enfin, créez et codez le fichier infos.js qui ajoute à la page web une liste affichant la hauteur et la longueur de l'élément identifié par "contenu".

7 Introduction aux événements
4.Réagissez à des événements Introduction aux événements Les programmes JavaScript que nous avons écrits jusqu'ici s'exécutaient automatiquement dès leur chargement par la page web. L'ordre d'exécution des instructions était déterminé à l'avance et les interactions avec l'utilisateur se limitaient à la saisie de valeurs au moyen de l'instruction prompt. Pour augmenter le niveau d'interactivité, il faut que la page puisse réagir au comportement de l'utilisateur : clic sur un bouton ou un lien, remplissage d'un formulaire, etc. Dans ce cas, l'ordre d'exécution des instructions n'est pas prévisible à l'avance : il dépend des actions de l'utilisateur. Ces actions déclenchent des événements auxquels la page va pouvoir réagir via du code JavaScript. Ce mode de fonctionnement est appelé programmation événementielle. Il est utilisé par les interfaces graphiques et toutes les applications en interaction avec un utilisateur.

8 Un premier exemple 4.Réagissez à des événements
Récupérer les fichiers evenements.html et evenements.js cliquez sur le bouton "Cliquez-moi !" de la page web. Une nouvelle ligne apparaît dans la console : la page a réagi à l'action de l'utilisateur. À chaque clic sur le bouton de la page, une nouvelle ligne est ajoutée dans la console du navigateur. function clic() { console.log("Clic !"); } var boutonElt = document.getElementById("bouton"); // Ajout d'un gestionnaire pour l'événement click boutonElt.addEventListener("click", clic);

9 Ajout d'un gestionnaire d'événement
4.Réagissez à des événements Ajout d'un gestionnaire d'événement Dans l'exemple, on commence par définir une fonction nommée clic qui ajoute une ligne dans la console. Ensuite, on récupère l'élément bouton du DOM puis on lui ajoute un gestionnaire d'événement.  Appelée sur un élément du DOM, la méthode addEventListener lui ajoute un gestionnaire pour un événement particulier. Cette méthode prend deux paramètres : le type de l'événement et la fonction qui gère l'événement. Cette fonction sera appelée à chaque fois que l'événement se déclenchera sur l'élément. Dans notre exemple, le clic sur le bouton (événement click) déclenchera l'appel de la fonction clic().

10 Ajout d'un gestionnaire d'événement
4.Réagissez à des événements Ajout d'un gestionnaire d'événement Autre synthaxe Il est possible d'utiliser une syntaxe un peu plus concise en définissant la fonction appelée au moment de l'appel à addEventListener. Le code ci-dessous est fonctionnellement identique au précédent. Dans ce cas, la fonction n'est plus identifiée par un nom et ne peut plus être utilisée ailleurs dans le programme. Il s'agit d'une fonction anonyme. Les fonctions anonymes sont fréquemment utilisées en JavaScript. var boutonElt = document.getElementById("bouton"); // Ajout d'un gestionnaire pour l'événement click boutonElt.addEventListener("click", function () { console.log("clic"); });

11 La grande famille des événements
4.Réagissez à des événements La grande famille des événements Les événements que les éléments du DOM peuvent déclencher sont très nombreux. Le tableau ci-dessus présente les principales catégories d'événements. 

12 La grande famille des événements
4.Réagissez à des événements La grande famille des événements Quel que soit le type d'événement, son déclenchement s'accompagne de la création d'un objet Event qui peut être utilisé par la fonction qui gère l'événement. Cet objet dispose de propriétés qui fournissent des informations sur l'événement, et de méthodes qui permettent d'agir sur celui-ci. La plupart des propriétés de l'objet Event dépendent du type d'événement déclenché. Parmi les propriétés présentes dans Event, quel que soit le type d'événement, type renvoie le type et target renvoie la cible de l'événement, c'est-à-dire l'élément du DOM auquel l'événement est destiné. 

13 La grande famille des événements
4.Réagissez à des événements La grande famille des événements Le code ci-dessous utilise l'objet Event pour afficher le type de l'événement déclenché ainsi que le texte de l'élément cible lors d'un clic sur le bouton de notre page web. Cet objet est fourni à la fonction qui gère l'événement sous la forme d'un paramètre nommé e. Le choix du nom du paramètre est libre.  // Ajout d'un gestionnaire qui affiche le type et la cible de l'événement document.getElementById("bouton").addEventListener("click", function (e) { console.log("Evènement : " + e.type + ", texte de la cible : " + e.target.textContent); });

14 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Appui sur une touche du clavier La solution la plus courante pour réagir à l'appui sur une touche du clavier consiste à gérer les événements de type keypress déclenchés sur le corps de la page web. L'exemple suivant permet d'afficher dans la console le caractère associé à la touche frappée. Ici, l'information sur ce caractère est fournie sous la forme de la propriété charCode de l'objet Event (le paramètre e). Il s'agit de la valeur numérique (appelée valeur Unicode) associée au caractère. La méthode String.fromCharCode permet de traduire cette valeur en une chaîne représentant le caractère.  document.addEventListener("keypress", function (e) { console.log("Vous avez appuyé sur la touche " + String.fromCharCode(e.charCode)); });

15 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Appui sur une touche du clavier Pour gérer l'appui et le relâchement sur n'importe quelle touche du clavier (pas seulement celles qui produisent des caractères), on utilise les événements keydown et keyup. L'exemple suivant utilise la même fonction pour gérer ces deux événements. Cette fois-ci, le code de la touche est accessible dans la propriété keyCode de l'objet Event.  function infosClavier(e) { console.log("Evènement clavier : " + e.type + ", touche : " + e.keyCode); } // Gestion de l'appui et du relâchement d'une touche du clavier document.addEventListener("keydown", infosClavier); document.addEventListener("keyup", infosClavier);

16 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Clic sur un bouton de la souris Le clic souris sur n'importe quel élément du DOM déclenche l'apparition d'un événement de type click. L'objet Event associé à un événement de type click contient (entre autres) une propriété button qui permet de connaître le bouton de la souris utilisé, ainsi que des propriétés clientX et clientY qui renvoient les coordonnées horizontales et verticales de l'endroit où le clic s'est produit. Ces coordonnées sont définies par rapport à la zone de la page actuellement affichée par le navigateur. Le schéma suivant illustre la différence entre les propriétés clientX/Y et pageX/Y, également présentes dans l'objet Event associé à un clic souris. 

17 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Clic sur un bouton de la souris 

18 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Clic sur un bouton de la souris L'exemple de code evenements.js affiche des informations sur tous les événements click déclenchés sur la page web. Ces événements sont gérés par une fonction nommée infosSouris. Elle-même utilise une fonction getBoutonSouris pour déduire le nom du bouton de la souris cliqué, à partir de son code fourni par la propriété button de l'objetEvent. 

19 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Fin du chargement de la page web En fonction de sa complexité, une page web peut mettre un certain temps à être entièrement chargée par un navigateur. Il est possible de détecter à la fin du chargement de la page en ajoutant un gestionnaire pour l'événement load sur l'objet window, qui représente la fenêtre du navigateur. Cela permet d'éviter d'interagir via JavaScript avec des parties de la page non encore chargées. L'exemple de code suivant affiche un message dans la console lorsque la page web est entièrement chargée. // Gestion de la fin du chargement de la page web window.addEventListener("load", function () { console.log("Page entièrement chargée"); });

20 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Fermeture de la page web On peut parfois vouloir détecter la fermeture d'une page web, qui se produit lorsque l'utilisateur ferme l'onglet qui l'affiche ou navigue vers une autre page dans cet onglet. Un cas d'utilisation fréquent consiste à afficher une demande de confirmation. Pour cela, il faut ajouter un gestionnaire pour l'événement beforeunload sur l'objet window, comme dans l'exemple suivant. // Gestion de la fermeture de la page web window.addEventListener("beforeunload", function (e) { var message = "On est bien ici !"; e.returnValue = message; // Provoque une demande de confirmation (standard) return message; // Provoque une demande de confirmation (certains navigateurs) });

21 Gestion des événements les plus courants
4.Réagissez à des événements Gestion des événements les plus courants Fermeture de la page web En théorie, c'est la modification de la propriété returnValue de l'objet Event qui suspend la fermeture de la page et provoque l'apparition d'une boîte de dialogue de confirmation affichant la valeur de cette propriété. Cependant, certains navigateurs se basent sur la valeur de retour de la fonction qui gère l'événement plutôt que sur la propriété returnValue. Le code ci-dessus associe les deux techniques et fonctionne quel que soit le navigateur utilisé. Firefox se comporte de manière spécifique sur ce point : il ne déclenche l'événement beforeunload que si l'utilisateur a interagi avec la page avant de la fermer, et n'affiche pas la valeur de returnValue dans la boîte de dialogue de confirmation.

22 TP 4.Réagissez à des événements Fichier compteurClics.html
Créez ensuite le fichier compteurClics.js qui compte et affiche sur la page le nombre de clics sur le bouton nommé "clic". Le bouton nommé "desactiver" permet d'arrêter le comptage.. Fichier couleurs.html Créez ensuite le fichier couleurs.js qui permet de modifier la couleur de fond des trois éléments div lorsque l'utilisateur appuie sur la touche R (rouge), J (jaune), V (vert) ou B (blanc). On ne fera pas de distinction entre minuscules et majuscules.

23 TP 4.Réagissez à des événements Fichier desserts.html
Ensuite, écrivez le fichier desserts.js qui permet d'ajouter un nouveau dessert à la liste "desserts" lors d'un clic sur le bouton "Ajouter un dessert". En bonus, ajoutez la possibilité de modifier un dessert présent dans la liste en cliquant dessus.

24 Rappels sur les formulaires
5.Manipulez les formulaires Rappels sur les formulaires Les formulaires enrichissent les pages web en permettant à l'utilisateur de saisir des informations sous différentes formes : zone de texte, cases à cocher, listes déroulante, etc. À l'intérieur d'une page web, un formulaire est défini sous la forme d'une balise HTML<form> contenant différents champs de saisie : balises<input>,<select> ou encore<textarea>. Classiquement, les données saisies par l'utilisateur dans un formulaire sont ensuite envoyées via le réseau à un serveur web qui va les traiter et renvoyer une réponse adaptée au navigateur client sous la forme d'une nouvelle page web. Pour réaliser cette tâche, un serveur web emploie une technologie adaptée, comme par exemple le langage PHP. Grâce à JavaScript, nous allons pouvoir manipuler le formulaire et ses données directement côté navigateur client, avant (éventuellement) d'envoyer ces données vers un serveur externe. Ainsi, on pourra avertir immédiatement l'utilisateur en cas de saisie erronée, ou bien lui proposer une liste de suggestions au fur et à mesure de sa frappe...

25 Le formulaire d'exemple
5.Manipulez les formulaires Le formulaire d'exemple formulaire.html Ce formulaire contient plusieurs types de zones de saisie : texte, case à cocher, boutons radio, liste déroulante, ainsi que des boutons "Envoyer" et "Annuler". Nous allons découvrir successivement comment gérer ces éléments avec JavaScript.

26 Les zones de texte 5.Manipulez les formulaires
Accès à la valeur saisie Une zone de texte permet à l'utilisateur de saisir du texte sur une ou plusieurs lignes. Une zone monoligne correspond à la balise HTML<input type="text">. Une zone multiligne est définie grâce à la balise <textarea>. En JavaScript, on accède à la valeur d'une zone de texte en utilisant la propriété value de l'élément du DOM correspond. En donnant une nouvelle valeur à cette propriété, on modifie la valeur affichée dans la zone de texte. L'exemple suivant donne à la zone de saisie identifiée par "pseudo" la valeur "MonPseudo". var pseudoElt = document.getElementById("pseudo"); pseudoElt.value = "MonPseudo";

27 Gestion du focus 5.Manipulez les formulaires
Lorsqu'une zone de texte est la cible de saisie, on dit que cette zone possède le focus. L'utilisateur d'un formulaire qui clique sur une zone de saisie pour y taper une information déclenche l'apparition d'un événement de type focus. Inversement, le changement de cible de saisie provoque l'apparition d'un événement de type blur sur l'ancienne zone qui avait le focus. On peut utiliser ces événements pour afficher à l'utilisateur une aide contextuelle associée à la zone de saisie courante, comme dans l'exemple suivant.

28 Gestion du focus 5.Manipulez les formulaires
En cliquant dans la zone de saisie du pseudo, vous obtenez l'affichage d'un message informatif dans la balise <span> prévue a cet effet et initialement vide. // Affiche d'un message contextuel pour la saisie du pseudo pseudoElt.addEventListener("focus", function () { document.getElementById("aidePseudo").textContent = "Entrez votre pseudo"; }); // Suppression du message contextuel pour la saisie du pseudo pseudoElt.addEventListener("blur", function (e) { document.getElementById("aidePseudo").textContent = "";

29 Les éléments d'options 5.Manipulez les formulaires Cases à cocher
On définit une case à cocher dans un formulaire avec la balise <input type="checkbox">. Lorsque la case change de valeur, l'objet Event associé à l'événement dispose d'une propriété booléenne checked qui indique le nouvel état de la case (cochée/décochée). // Affichage de la demande de confirmation d'inscription document.getElementById("confirmation").addEventListener("change", function (e) { console.log("Demande de confirmation : " + e.target.checked); });

30 Les éléments d'options 5.Manipulez les formulaires Boutons radio
Un groupe de boutons radio permet à l'utilisateur de faire un seul choix parmi plusieurs possibilités. On crée ces boutons avec des balises <input type="radio"> possédant le même attribut name et des attributs value différents. L'exemple de code suivant ajoute le même gestionnaire pour les événements de typechangesur chacun des boutons radio, afin d'afficher dans la console le type d'événement choisi. // Affichage du type d'abonnement choisi var aboElts = document.getElementsByName("abonnement"); for (var i = 0; i < aboElts.length; i++) { aboElts[i].addEventListener("change", function (e) { console.log("Formule d'abonnement choisie : " + e.target.value); }); }

31 Les éléments d'options 5.Manipulez les formulaires Listes déroulantes
On construit une liste déroulante au moyen d'une balise <select> dans laquelle on ajoute une balise <option> par choix possible dans la liste. L'exemple de code suivant exploite les événements de type change déclenchés sur la liste déroulante pour afficher le nouveau choix (attribut value de la balise <option> associée au choix). // Affichage du code de nationalité choisi document.getElementById("nationalite").addEventListener("change", function (e) { console.log("Code de nationalité : " + e.target.value); });

32 Le formulaire comme élément du DOM
5.Manipulez les formulaires Le formulaire comme élément du DOM Accès aux champs du formulaire La balise <form> définissant un formulaire correspond à un élément du DOM. Cet élément possède une propriété elements rassemblant les champs de saisie du formulaire. On peut l'utiliser pour accéder à un champ à partir de son nom (attribut name) ou à partir de son indice dans (ordre d'apparition dans le formulaire). L'exemple ci-dessous affiche quelques informations sur les champs de saisie du formulaire initial. var form = document.querySelector("form"); console.log("Nombre de champs de saisie : " + form.elements.length); // Affiche 10 console.log(form.elements[0].name); // Affiche "pseudo" console.log(form.elements.mdp.type); // Affiche "password"

33 Le formulaire comme élément du DOM
5.Manipulez les formulaires Le formulaire comme élément du DOM Soumission du formulaire Un formulaire est soumis lorsque l'utilisateur clique sur le bouton d'envoi. Ce bouton correspond à une balise <input type="submit">. Une balise <input type="reset"> affiche un bouton qui réinitialise les données du formulaire. En règle générale, la soumission d'un formulaire se traduit par l'envoi de ses données à la ressource identifiée par l'attribut action de la balise <form>. Mais avant cela, un événement de type submit est déclenché sur l'élément du DOM correspondant au formulaire. En ajoutant un gestionnaire pour ce type d'événement, on peut accéder aux données du formulaire avant leur envoi. On peut même annuler l'envoi ultérieur des données en appelant la méthode preventDefault sur l'objet Event associé à l'événement. Voir formulaire.js

34 Le formulaire comme élément du DOM
5.Manipulez les formulaires Le formulaire comme élément du DOM Validation des données saisies Contrôler les données saisies par l'utilisateur avant de les envoyer à un serveur est l'un des grands intérêts de l'utilisation de JavaScript avec les formulaires web. Ainsi, on peut signaler immédiatement d'éventuelles erreurs de saisie, ce qui améliore l'expérience de l'utilisateur. On évite également des allers-retours réseau coûteux en temps. Le contrôle de validité peut se faire de plusieurs manières, éventuellement combinables : au fur et à mesure de la saisie d'une donnée ; à la fin de la saisie d'une donnée ; au moment où l'utilisateur soumet le formulaire.

35 Le formulaire comme élément du DOM
5.Manipulez les formulaires Le formulaire comme élément du DOM Validation pendant la saisie La validation pendant la saisie repose sur l'exploitation des événements input, qui se déclenchent sur une zone de saisie à chaque fois que sa valeur est modifiée. L'exemple de code suivant ajoute un gestionnaire pour les événements input sur la zone de saisie du mot de passe. Ce gestionnaire vérifie la longueur (nombre de caractères) du mot de passe saisi et affiche à l'utilisateur un message ayant un contenu et une couleur appropriés. Voir verifmdp.js

36 Le formulaire comme élément du DOM
5.Manipulez les formulaires Le formulaire comme élément du DOM Validation à la fin de la saisie La fin de la saisie dans une zone de texte correspond à la perte du focus par cette zone, ce qui déclenche l'apparition d'un événement de type blur que l'on peut exploiter pour contrôler la données saisie. Imaginons par exemple que l'on veuille contrôler le courriel saisi par l'utilisateur de notre formulaire. Dans un premier temps, on souhaite vérifier uniquement la présence du dans le courriel saisi. Pour cela, on peut utiliser la méthode JavaScript indexOf, qui permet de chercher une valeur dans une chaîne de caractères et renvoie la valeur -1 si cette valeur n'est pas trouvée. Voir verifmail.js

37 TP 5.Manipulez les formulaires Récupérer le fichier mdp.html
Créez ensuite le fichier mdp.js qui doit valider la saisie lorsque l'utilisateur soumet les données du formulaires. Les contraintes de validation sont : Les deux mots de passe saisis doivent être identiques. Leur longueur doit être au minimum de 6 caractères. Ils doivent contenir au moins un chiffre. Le résultat de la validation est affiché sur la page web.

38 TP 5.Manipulez les formulaires
Autocomplétion - Récupérer le fichier pays.html Cet exercice a pour but d'aider l'utilisateur dans sa saisie d'un pays. À chaque fois qu'il ajoute une lettre, on lui propose une liste des pays correspondants. Le clic sur un pays suggéré remplace la saisie actuelle par ce pays. Par souci de simplicité, on se limitera aux pays dont le nom commence par la lettre A.

39 Répéter une action à intervalles réguliers
6. Animez vos pages Répéter une action à intervalles réguliers Autocomplétion - Récupérer le fichier pays.html Cet exercice a pour but d'aider l'utilisateur dans sa saisie d'un pays. À chaque fois qu'il ajoute une lettre, on lui propose une liste des pays correspondants. Le clic sur un pays suggéré remplace la saisie actuelle par ce pays. Par souci de simplicité, on se limitera aux pays dont le nom commence par la lettre A.