In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Jeux/Détente

[Détente] [JeudiProg] [Web] Cours 5 : Un peu d’interaction avec JavaScript (Gagnez une médaille)

2020-09-17 18:00:00
154 4
Bonjour à tous,

Nous avons réussi à établir un blog plutôt correct, désormais on va pouvoir dynamiser nos pages.

Si vous attrapez ce cours en vol, n'hésitez pas à d'abord consulter les précédents cours puis revenir ici ensuite :

Cours 1 : Ma première page HTMLConsulter
Cours 2 : Balises et attributs - Tableaux, images et liensConsulter
Cours 3 : Et si l'on démarrait un blog Xiaomi ?Consulter
Cours 3bis : Introduction au CSSConsulter
Cours 4 : Le positionnement en CSSConsulter




Attention : Du fait des limitations actuelles la communauté, il n'est pas toujours possible d'afficher un code correct, c'est pourquoi je vous fournis ce fichier ZIP contenant l'ensemble des codes de ce cours.

Cours 5.zip (3.43 KB, Downloads: 2)




Préambule

Ce cours n'a absolument pas la prétention de tout vous apprendre sur le JavaScript, il ne sera pas possible de détailler chaque concept abordé, cela nécessiterait un ensemble de cours complet (que l'on pourra éventuellement faire dans le futur). Ici, nous allons simplement voir quelques exemples précis des possibilités et que vous pourrez aisément reproduire.

Autre petit point, il est désormais possible dans les navigateurs par une option ou par des extensions/widgets de désactiver les scripts JavaScript donc si vous avez un problème à exécuter le code, commencez par vérifier que JavaScript n'est pas désactivé. Vous allez même pouvoir le vérifier grâce à une balise HTML spécifique :
˂noscript˃Votre navigateur n'autorise pas JavaScript, veuillez l'activer pour continuer le cours˂/noscript˃

Vous pouvez insérer cette balise n'importe où dans ˂body˃ et si le texte s'affiche c'est que vous devez vérifier les réglages de votre navigateur.




Ajout de scripts JavaScript

Le code informatique en JavaScript est appelé du script. Comme pour le CSS, nous allons séparer ce code de notre structure HTML. Il aurait été possible de l'insérer dans notre fichier HTML mais pour des raisons de clarté, il vaut mieux créer un fichier séparé. On va appeler ce fichier script.js, l'extension js pour JavaScript tout simplement. Et voici comment on indique à notre HTML que ce code existe.
˂script src=''script.js''˃˂/script˃

Aussi simple que cela ! Mais où placer cette balise dans notre fichier ?

On pourrait le mettre dans les en-têtes ˂head˃ mais comme nous allons manipuler des éléments de notre page et que je vais vous faire grâce des contrôles de chargement de ces éléments, il vaut mieux mettre notre ligne au bas de notre document, juste avant la balise fermante ˂/body˃.




Après la date, pourquoi pas l'heure ?

Dans notre barre latérale, nous avions affiché la date du jour pourquoi pas enrichir cette information de l'heure courante. On commence alors par ajouter une balise HTML ˂span˃. C'est une balise neutre qui va tout simplement nous aider à nous positionner au bon endroit dans le document. Et comment va-t-on localiser cette balise dans notre code ? C'est là qu'entre en jeu l'intérêt de l'attribut id par exemple. Voyons ce que cela donne :
˂p˃Bonjour, nous sommes le 17 septembre, il est ˂span id="heure"˃˂/span˃ !˂/p˃

Notre HTML est prêt, on peut s'attaquer au JavaScript.

JavaScript nous simplifie les choses car il existe un ''modèle'' pour les dates, une classe. Créons donc une variable de cette classe.
var aujourdhui = new Date();

Même si vous ne comprenez pas toutes les subtilités, je pense que vous avez compris que notre variable aujourdhui contient une date. On va donc maintenant récupérer les informations qui nous intéressent, à savoir les heures, minutes et secondes. Chacune de ces informations sera stocké dans une variable.
var h = aujourdhui.getHours();
var m = aujourdhui.getMinutes();
var s = aujourdhui.getSeconds();

Il nous suffit alors d'envoyer ces informations à notre balise, commençons par trouver notre balise :
document.getElementById('heure')

Grâce à son attribut id, on a retrouvé la balise, il ne reste qu'à modifier son contenu et cela se fait de la manière suivante :
document.getElementById('heure').innerHTML = h+ '':'' + m + '':'' + s;

On transmet les informations de nos 3 variables séparées chacune par deux points. N'hésitez pas à tester déjà cette fonction et vous verrez que nous avons bien une heure affichée. Mais est-ce qu'on ne pourrait pas aller plus loin et afficher l'heure en temps réel ?

On va alors commencer par ranger notre code dans une fonction. Une fonction permet de faire appel à notre code simplement. Par exemple, si je veux répéter 1000 fois notre code, alors plutôt que d'écrire 1000 fois à la suite l'intégralité du code, je vais l'enregistrer dans une fonction que je pourrais appeler autant de fois que je le souhaite. Si l'explication théorique n'est pas claire, regardez en pratique, c'est très simple :
function afficheHeure() {
   var aujourdhui = new Date();
   var h = aujourdhui.getHours();
   var m = aujourdhui.getMinutes();
   var s = aujourdhui.getSeconds();

   document.getElementById('heure').innerHTML = h+ ":" + m + "'" + s + "''";
}

Il ne me reste donc qu'à appeler cette fonction pour lui demander de s'exécuter, un appel se fait alors très simplement :
afficheHeure();

C'est bien beau mais cela va appeler une fois la fonction ... On voudrait bien que la fonction s'exécute chaque seconde pour afficher la nouvelle heure. Rien de plus simple, JavaScript a déjà pensé à nous avec sa fonction setTimeout. Il suffit d'indiquer à cette fonction ce qu'elle doit exécuter et à quelle fréquence (le temps à préciser est en milliseconde). Pour notre heure, il suffit de l'exécuter chaque seconde donc chaque 1000 millisecondes.
setTimeout(function(){ afficheHeure(); }, 1000);

Notre fonction est prête, voyons le code complet :
function afficheHeure() {
   var aujourdhui = new Date();
   var h = aujourdhui.getHours();
   var m = aujourdhui.getMinutes();
   var s = aujourdhui.getSeconds();

   document.getElementById('heure').innerHTML = h+ '':'' + m + '':'' + s;
   setTimeout(function(){ afficheHeure(); }, 1000);
}
afficheHeure();

Cela fonctionne chez vous aussi ?



Avant de passer à la suite, soyons un peu perfectionniste, vous voyez que ce code nous affiche ''8'' secondes et non pas ''08'' secondes comme nous sommes plus habitués à voir. En effet les fonctions getSeconds, getMinutes et getHeures ne s'embarrassent pas de ce zéro. On va donc créer une fonction qui ajoute un zéro si le nombre est inférieur à 10.
function ajouteZero(i) {
   if (i ˂ 10) {
      i = ''0'' + i;
   }
   return i;
}

Et de faire appel à cette fonction pour les minutes et les secondes. Vous pouvez également le faire pour les heures si vous trouvez cela plus agréable.
m = ajouteZero(m);
s = ajouteZero(s);




La mode du mode sombre

Nous sommes tous en train de passer au mode sombre pour économiser notre batterie ou reposer nos yeux ou d'autres raisons encore, pourquoi ne pas laisser cette possibilité également sur notre blog. Je vais donc commencer par ajouter un bouton qui va nous permettre de basculer entre mode clair et mode sombre.
˂button id=''mode''˃Mode sombre˂/button˃

J'ai décidé de le placer dans le pied de page mais vous pouvez le mettre où vous souhaitez. Vous pouvez personnaliser son aspect via le CSS sans aucun problème. Par exemple :
footer button
{
   display: block;
   padding: .5em;
   margin: 0 auto 1em;
   border: 1px solid black;
   color: black;
   background: inherit;
}

footer button:hover
{
   border: 1px solid white;
   color: white;
   background: inherit;
}

Donc en fait ce que l'on veut c'est pouvoir changer les couleurs de notre blog d'un simple clic, en image ce que cela pourrait donner :



Pour réaliser cela, plusieurs solutions sont possibles. On aurait pu changer une à une toutes les couleurs des éléments de l'écran par exemple mais il aurait alors fallu prévoir l'intégralité des modifications inverses pour le retour au mode clair. J'ai préféré simplifier les choses en ajoutant un attribut class sur notre balise body. Je vais alors pouvoir ajouter du CSS qui sera spécifique à notre balise body possédant l'attribut class sombre. Notre CSS initial reste donc inchangé pour le mode clair. Les sélecteurs CSS débuteront donc tous par :
body.sombre

Toujours dans un soucis de clarté, j'ai créé un deuxième fichier CSS spécifique au mode sombre. Je l'ai appelé stylesombre.css. Je vais pouvoir indiquer à mon navigateur de prendre en compte ce nouveau fichier directement en l'incluant dans le premier fichier CSS de la manière suivante :
@import ''stylesombre.css'';

Il suffit de placer cette instruction en haut de notre fichier. On peut alors maintenant s'attaquer à notre style sombre, on va reprendre tous les sélecteurs attribuant des couleurs mais inutile de ré-écrire toutes les instructions comme les espacements, la taille de texte, les transformations ou autres, on ne va reprendre que les instructions concernant les couleurs. Je ne vous fais pas la copie de l'intégralité du fichier, vous pourrez le voir dans le fichier ZIP du cours mais en voici un extrait pour la compréhension :
body.sombre
{
   background: black;
   color: white;
}

body.sombre header
{
   background: inherit;
   color: darkorange;
   border-bottom: .5em solid dimgray;
}

body.sombre header ul li a:hover, body.sombre header ul li a:focus
{
   background: inherit;
   color: darkorange;
   border: 1px solid darkorange;
}...
J'ai bien repris uniquement les instructions contenant des couleurs et j'ai ajouté body.sombre devant les sélecteurs. A vous maintenant de personnaliser votre blog mode sombre selon vos envies ! Pour visualiser directement votre travail n'hésitez pas à modifier temporairement votre balise body en ajoutant l'attribut class sombre, vous l'enlèverez par la suite.
˂body class=''sombre''˃

Après cette petite partie cosmétique revenons à notre sujet principal, le JavaScript qui va nous permettre d'un clic sur un bouton d'ajouter ou enlever cette class sombre. On commence par récupérer notre élément bouton :
const bouton = document.getElementById('mode');

On veut aussi notre élément body pour pouvoir le modifier :
const doc = document.getElementsByTagName('body')[0];

Ici nous n'avions pas d'attribut id sur notre balise body mais nous pouvons facilement le récupérer grâce au ''TagName'' (nom de balise). Pourquoi ce ''[0]'' à la fin ? La fonction de recherche d'élément par nom de balise renvoie toute la liste des balises présentes avec son nom, ce n'est pas un élément unique comme avec l'attribut id. Dans le cas de body, il n'est également pas possible d'en avoir plusieurs mais cette fonction renverra tout de même une liste, même si cette liste n'a qu'un seul item. Avec ''[0]'' on spécifie que l'on veut le premier item de cette liste. J'espère ne pas vous avoir perdu, l'important est de comprendre que l'on récupère notre élément body. Si vous voulez plus d'explications, n'hésitez pas à demander en commentaires.

On va maintenant ajouter une ''oreille'' sur notre page qui va écouter et attendre le clic de l'utilisateur sur notre bouton, on appelle cela un écouteur d'évènement (en anglais EventListener). Une fois cette action réalisée, on va pouvoir exécuter le code que l'on souhaite, c'est à dire ajouter ou supprimer l'attribut class sombre à notre balise body.
bouton.addEventListener('click', function() {
   if(doc.className == "sombre") {
      bouton.innerHTML = "Mode sombre";
      doc.className = "";
   }
   else {
      bouton.innerHTML = "Mode clair";
      doc.className = "sombre";
   }
});

On est bien dans l'attente d'un clic (click) pour exécuter le code associé à savoir, tester si l'on est déjà en mode sombre ou non :
  • si oui, alors on change le texte de notre bouton pour Mode sombre et on enlève l'attribut class de la balise body ;
  • si non, alors on change le texte pour Mode clair et on ajoute l'attribut class sombre.


C'était plutôt facile, non ?




Effacer les articles lus

Vous avez peut être vu sur les précédentes captures d'écran que j'avais ajouté un bouton Supprimer l'article sous chacun des articles. Pourquoi pas donner la possibilité à l'utilisateur d'effacer les articles lus plutôt que d'uniquement faire défiler la page ? Allons-y ...

Le travail est tout mâché puisque l'on va procéder exactement de la même manière que pour le bouton de basculement en mode sombre ou clair mais on va tout de même introduire quelques subtilités supplémentaires. Pas question ici de créer un identifiant unique pour chacun de ces boutons, cela nous obligerait à la publication de chaque article d'attribuer un identifiant et de reporter cet identifiant dans le JavaScript avec un code propre à lui ... Fastidieux pour chaque article, non ? Voici la méthode que je vous conseille.

1) Ajouter ce bouton avec un attribut class spécifique

Chaque attribut id est unique mais rien ne nous empêche d'utiliser un même attribut class sur plusieurs éléments. Je décide donc d'attribuer une class spécifique à chacun de ces boutons de fermeture :
˂article˃
   ˂h2˃Titre de l'article˂/h2˃
   ...
   ˂button class="fermeture"˃Supprimer l'article˂/button˃
˂/article˃

Et on va bien sûr pouvoir récupérer tous les éléments avec une même class dans notre JavaScript.
const articles = document.getElementsByClassName('fermeture');

Comme pour TagName tout à l'heure, on a ici une liste. C'est tout à fait normal puisque plusieurs articles donc plusieurs boutons de fermeture. On va donc parcourir cette liste et attribuer à chacun des boutons une ''oreille'' qui va demander l'exécution d'une fonction dès que l'action de clic sera repérée. En JavaScript cela se passe de la manière suivante :
for(var i = 0; i  articles.length; i++) {
   articles˪i˥.addEventListener('click', function() {
      ...
   });
}

On utilise ici une boucle for (pour tout) pour parcourir nos différents items. Pour faire simple, ou pour tenter de faire simple : pour tout i allant de 0 à la longueur de la liste, j'ajoute une oreille sur l'évènement clic. Comme toujours si vous voulez plus d'informations, n'hésitez pas à demander en commentaires.

Il ne nous reste alors que l'action à décrire. Que veux-t-on exactement ? En fait on veut faire disparaître tout l'article qui contient notre bouton. Comment passer de notre élément bouton à l'élément article ? On peut voir que notre balise button est placée directement à l'intérieur de la balise article. En informatique on va dire qu'article est le parent de button ou que button est le fils de article. Avec JavaScript rien de plus simple pour accéder au parent.
Code HTML
˂parent˃
   ˂enfant˃˂/enfant˃
   ˂enfant˃˂/enfant˃
˂/parent˃

Code JavaScript
var enfant = document.getElement...;
var parent = enfant.parentElement;

On pourrait alors détruire l'élément mais on va se contenter ici de le masquer. Une instruction CSS suffit à faire cela :
display: none;

Comprenez ''afficher: rien;''. On pourrait alors attribuer une class spécifique à notre article contenant cette instruction. Ou il est également possible d'envoyer directement l'instruction de la manière suivante :
this.parentElement.style.display = 'none';

Et voilà ! Mais euh ... STOP ... Pourquoi a-t-on utilisé ''this'' plutôt que ''articles˪i˥'' ? Eh bien c'est tout simple ... Lorsque nous attribuons nos ''oreilles'' à chacun des boutons nous parcourons tous nos boutons à l'aide d'une variable ''i'' qui permet de se positionner à chacun des items : articles[0] pour le premier item, articles[1] pour le deuxième, etc... Mais lorsque l'évènement est déclenché seul le code dans l'élément est exécuté et donc la variable ''i'' n'a plus de valeur, elle ne nous permet pas de dire quel item est pris. C'est là que l'on a besoin de ''this'' qui est un raccourci pour dire quel élément a déclenché une action, en gros sur quel bouton nous avons cliqué. Notre code est alors finalement complet :
const articles = document.getElementsByClassName('fermeture');
for(var i = 0; i  articles.length; i++) {
   articles˪i˥.addEventListener('click', function() {
      this.parentElement.style.display = 'none';
   });
}

On va s'arrêter là avec le JavaScript concernant le cours de Web car il faudrait aborder pas mal d'autres concepts de programmation pour aller plus loin. Mais ces 3 petits exemples peuvent déjà vous laisser entrevoir plusieurs possibilités d'interaction sur votre blog.




Exercices - Gagnez votre médaille



1) On va commencer par un premier exercice imposé, à vous de transformer votre blog pour qu'il puisse proposer un mode sombre. Pour valider l'exercice, il faudra :
  • une capture d'écran de votre blog en mode clair ;
  • une capture d'écran de votre blog en mode sombre ;
  • et une capture d'écran du script JavaScript utilisé.


2) Trois exercices complémentaires sont proposés, il faut en réussir au moins un pour valider l'obtention de votre médaille.
2.1) Modifiez la fonction d'affichage du temps pour également mettre à jour le jour et le mois. Attention à afficher votre mois en lettres françaises et non avec un numéro. Il vous suffira de fournir une capture d'écran du script JavaScript utilisé.
2.2) Réalisez un chronomètre : lors de l'appui sur un bouton, vous devez afficher le compte des secondes. Une capture d'écran du script JavaScript sera également suffisant ici.
2.3) Revenons sur les articles, ajoutez à chaque article un bouton ''Lire plus'' qui en cliquant dessus va afficher l'intégralité d'un article. Au départ, vous n'afficherez par exemple qu'une ligne de votre article et en appuyant sur le bouton tout le reste s'affichera. Une capture d'écran du code HTML ainsi que du script JavaScript seront nécessaires ici.

Bon courage à tous et si vous avez la moindre question, les commentaires sont toujours ouverts !

2020-09-17 18:00:00
Favorites2 RateRate
Bonsoir,

Ca monte sérieusement d'un cran là !

Pour l'exercice complémentaire, j'ai choisi la modification de l'affichage de la date (avec le mois écrit en toutes lettres).

Mode Clair


Mode Sombre


(petit souci avec le lien dans le 'aside' qui reste de la même couleur quelque soit le mode)


JavaScript (exercice imposé + complémentaire)



Extrait du fichier HTM pour l'exercice imposé


Assez rude comme semaine ^^

Mais merci tout de même pour la leçon !
2020-09-27 23:34:15

Moderator

GuillaumeMi Author |

#2

RLF69580 a posté en 2020-09-27 17:34:15
Bonsoir,

Ca monte sérieusement d'un cran là !

Super, la médaille devrait arriver sous peu !
2020-10-19 18:40:34
Merci à toi (et Slicck ;) ) pour toute l'organisation et le suivi de ces cours.
2020-10-19 19:50:27

Moderator

MYSYAS | from app

#4

ces cours sont géniaux
2020-10-20 02:33:01
please sign in to reply.
Sign In Sign Up

GuillaumeMi

Moderator

Check-in 3 jours
Check-in 7 jours
Check-in 21 jours
Check-in 40 jours
Check-in 70 jours
Check-in 100 jours
MiA2
SBM teaser
Mi band 3
25K
X-Men
Photography contest
30K
Tech Talent
MI9T
MIUI Geek
Three's A Party
Happy July
App Maniac
MIUI 9th Birthday
Global Community
Medalla Encuesta Mi Phone
better together slogan
Global Community
2020
Médaille des 50K
100K abo
Mi Community Üçüncü Anket Madalyası
Mi 10th Birthday Medal
Medalla #GradientsInLife
Window View
বাংলা নববর্ষ ১৪২৭
Android One
Answer Mi #3
Ulang Tahun Xiaomi ke-10
3 Tahun Mi Community
Mobile Game
App Star
Redmi 8
Bookworm
23 Nisan Kutlu Olsun!
Sondage gaming
MIUI Fan
Favorite Goalkeeper
Ramadan Kareem
Meetings from Home
Mi2U April
Lefty Star
Favorite Author
redminote8series
Streaming Geek
Favorite Actor
Favourite Football Team
200mila Mi Fans
Osneip
Redmi Note 8
Mail Lover
Radio
Super Thursday
Redmi Note 8 Series
Redmi Note 8 Pro
Coin
Chipset
Corona Awareness
Map
Redmi 8A
MIUI 12
First Smartphone
Phone Finder
2 anni insieme
Eid Mubarak
TV Series Freak
BougLo Challenge I
Mi to You May
MIUI12
Neues Zuhause
MIUI Boot Animation
200 Mil Mi Fans En México
Favorite Singer
Gadget
Favorite YouTube Channel
Art Challenge
Father's Day
Redmi Note 9S
Mother's Day
UK Community 300K Users Medal
Redmi Note 9
Cloud Storage
30 Million Redmi Note 8 Series
Redmi Note 9 Pro Feature
ContributeTogether
10 years
K2K #3
Redmi 9 Colors
200K Registered Users
2nd Anniversary
MFF2020
Nepal "Happy New Year&amp
Emoji Day
Mi To You July
Redmi Note 9S Feature
Navigation System
Médaille 6
First Anniversary
10th mi fan stories
K2K #4
Favorite Bangladeshi Food
Redmi 9A
Redmi Note 9 Pro Camera
Material Expert
Redmi 9A Feature
MIUI 12 Dark Mode
10 years
Battery Survey
Mi to You September
Agosto Cometas
Moderadores
Mi10 espacio
Facebook Reviewer
Tín đồ Poco
Display Expert
Favorite Radio Station
Top photo France

Read moreGet new

Mi Comm APP

Stay updated on Mi Products and MIUI

Copyright©2010-2020 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list