Initiation au Javascript
Dans cette activité, les makers vont s’initier au javascript. A l’aide de petites notions de bases, ils vont découvrir comment fonctionne le javascript et agrémenter leur site en ayant la possibilité de créer des supports dynamiques grâce à ce langage.
Objectifs pédagogiques
Compétences techniques
- Comprendre et découvrir les bases du javascript
- Apprendre à interagir avec l’HTML
Compétences design
- dynamiser
Compétences projet
- Les makers vont pratiquer un script js permettant d’améliorer la sécurité du mot de passe des utilisateurs.
La place dans le module
Cette activité débute après le responsive et avant les finitions du projet et la page 404.
Jour 1
Jour 2
Jour 3
Jour 4
Jour 5
1h
🤩
30 min
🤩
30 min
🤩
1h
🤩
Ressources
- Site exemple finalisé programmé pour les anims ( à forker pour votre démo)
Déroulé de l'activité
Segmentation de l’activité
- Segment 1 (1h) : Initiation au Javascript
- Segment 2 (30 min) : Initiation au Javascript (suite)
- Segment 3 (30 min) : Tests et améliorations
- Segment 4 (1H) : Projet libre
Détail de l’activité
Segment 1 (1H) : Initiation au javascript
1/ Brainstorm et demo active (10 min)
Pendant cette activité on va s’initier au javascript en prenant le temps de comprendre le code que l’on pratique, afin d’être capable de jouer avec le js dans le futur pour d’autres occasions.
On va imposer aux utilisateurs un mot de passe plus sécurisé, en les obligeant à mettre au moins une majuscule, une minuscule et un chiffre. Cela va donc travailler sur notre site : le js, la sécurité de notre site, et plus précisément l’UI/UX car l’expérience utilisateur est amélioré par la sécurité de leurs données.
Démo active :
Sur ton projet exemple, en partage d’écran, fais leur une démo active en enregistrant quelques comptes utilisateurs. Montre leur que le bouton « valider » est désactivé tant que nous n’avons pas rempli les 3 conditions, et qu’il est impossible de créer un compte sans les prérequis.
2/ Mise en place HTML (20 min)
Dans le fichier register.html :
1 – On va commencer par ajouter l’affichage des 3 conditions sous l’input contenant le mot de passe, afin que l’utilisateur puisse voir qu’on lui demande des prérequis.
- Une majuscule
- Une minuscule
- Un chiffre
2 – On ajoute un id différent par prérequis. Dans l’exemple id uppercase, lowercase et number sont utilisés pour rappeler ce que l’on y demande.
3 – Puis on ajoute une class pour écrire ces 3 prérequis en rouge. Ca nous permettra de les passer en vert grâce au javascript quand les conditions sont bien remplies.
4- Enfin, on ajoute un ID (password dans l’exemple) sur l’input en question, pour travailler dessus en javascript !
Maintenant, on va s’occuper du bouton qui permet de valider le formulaire d’inscription. On va le désactiver. Dans notre script js, on l’activera uniquement quand les conditions du mot de passe seront bien toutes remplies.
Création d’un fichier .js :
On créé un fichier app.js que l’on doit absolument ranger dans le dossier static de notre arborescence Flask. Sinon le framework ne le prendra pas en compte.
Dans le fichier base.html :
On va linker jquery qui est une bibliothèque dont va se servir notre script js, et notre fichier js que l’on vient de créer.
3/ Script javascript (30 min)
Comprendre la base du javascript :
Le javascript agit en liaison avec l’HTML. Pour pouvoir le manipuler a un endroit précis, on utilise le DOM. C’est un mot et une notion importante qui va permettre de comprendre ce que l’on doit appeler dans notre js.
Le DOM (Document Object Model) est la structure représentant une page Web.
Vous pouvez imaginer votre page web comme un arbre. Chaque élément sur la page, comme du texte, des images ou des boutons, est représenté par un nœud dans cet arbre.
- Document: L’ensemble de la page Web est représenté par le nœud racine, appelé document.
- Objet: Chaque élément sur la page est un objet dans le DOM. Ces objets peuvent être des paragraphes (<p>), des titres (<h1>), des liens (<a>), des images (<img>), etc.
- Modèle: Le DOM est une sorte de « modèle » de la page Web qui permet aux développeurs d’interagir avec les éléments de la page à travers le code JavaScript.
En utilisant JavaScript, on peut accéder à ces objets (éléments HTML) et les modifier. Par exemple, on peut changer le texte d’un paragraphe, modifier le style d’un élément, ou ajouter et supprimer des éléments de la page. Pour cela, on utilise dans nos balises HTML les ID et les Class, comme en CSS.
Allons exploiter cette notion dans notre code pour mieux le visualiser !
Dans le fichier app.js :
On va créer notre code javascript en utilisant la bibliothèque jQuery, qui permet de simplifier la manipulation de ce fameux DOM.
Pour accéder aux fonctionnalités fournies par la bibliothèque jQuery, on utilise le symbole $
En tout premier lieu, on va créer une fonction qui va sélectionner le document entier, donc toute la page web. Et lui indiquer que le script doit être exécuté une fois que le document HTML a été complètement chargé. C’est essentiel car il agit sur l’HTML, il doit donc être bien chargé.
Et dans cette fonction, on va aller lui donner celle qui va jouer sur l’objet « input » où l’utilisateur rentre son mot de passe. Pour ce faire, on va utiliser l’ID password, que l’on a au préalable mis dans l’input.
$(document).ready(function() { : Fonction permettant que le script s’exécute qu’une fois que le document HTML est chargé.
$(‘#password’).on(‘keyup’, function() { : Cela sélectionne l’élément HTML contenant l’ID « password » et attache l’événement keyup, qui permet de rééxécuté la fonction à chaque fois qu’une touche est relâchée dans le champ de mot de passe.
On va créer une variable password dans laquelle on va stocker la valeur actuel du champs mot de passe. This fait référence à l’objet id= »password »
Puis on crée les 3 variables qui vont servir a vérifier les conditions de majuscule, minuscule et chiffre, grâce aux expressions régulières
Expressions régulières (REGEX) :
- var lowerCaseLetters = /[a-z]/g; : Cela définit une expression régulière pour rechercher des lettres minuscules dans une chaîne. [a-z] correspond à n’importe quelle lettre minuscule et /g signifie que la recherche doit être globale, ce qui signifie qu’elle cherchera toutes les occurrences dans la chaîne.
- var upperCaseLetters = /[A-Z]/g; : Cela définit une expression régulière pour rechercher des lettres majuscules dans une chaîne. [A-Z] correspond à n’importe quelle lettre majuscule.
- var numbers = /[0-9]/g; : Cela définit une expression régulière pour rechercher des chiffres dans une chaîne. [0-9] correspond à n’importe quel chiffre.
Segment 2 (30 min) : Initiation au Javascript (suite)
1/ Vérifier et mettre à jour les conditions du mot de passe (30 min)
On va stocker dans 3 variables les conditions réussies (lowercasePassed, uppercasePassed, et numberPassed), en utilisant la méthode match() qui va vérifier si le mot de passe contient au moins une lettre minuscule, majuscule ou un chiffre.
Si la condition est remplie, la variable basculera sur True, sinon elle restera définie sur False.
Ensuite, pour chaque condition (minuscules, majuscules, chiffres), on va mettre à jour l’apparence des éléments HTML correspondants en fonction du résultat de la vérification.
Par exemple, si la condition des minuscules est remplie, la couleur du texte de l’élément avec l’ID « lowercase » est définie sur vert (‘green’). Sinon, elle reste définie sur rouge (‘red’).
Cette logique est répétée pour les conditions de majuscules et de chiffres.
2/ Activer le bouton de soumission (10 min)
Si les 3 variables de vérifications réussies sont sur True, alors on permet l’activation du bouton. Sinon, il reste désactivé et il est impossible pour l’utilisateur d’envoyer le formulaire.
Segment 3 (30 min) : Tests et améliorations
Les makers peuvent à présent tester leur programme et prendre le temps de se débuguer avec ton aide.
Laisse leur personnaliser leurs conditions, en ajouter, en modifier. Et profite de ce moment pour rappeler quelques concepts et explications sur ce qu’ils viennent de faire, pour que leur compréhension soit au maximum.
Les makers ayant ajouté beaucoup de conditions ou ayant modifier l’apparence ou encore le comportement, peuvent partager leur projet en partage d’écran et expliquer leur programme. Cela aide à la compréhension et la création de tous !
Segment 4 (1H) : Projet libre
Les makers gardent du temps de pratique pour continuer leurs projets. Chaque maker/groupe identifient les besoins restants sur leurs projets pour en faire un prjet stable et complet et le continue. La pratique des dernières moments de projets libres de ce module permet d’acquérir des notions visitées pour les ancrer. Cela reste important vu le nombre de notions vues dans l’année et ne dois pas être négligé !
Aide les makers ayant un peu plus de mal, ou voulant revoir une notion. N’hésite pas à faire du pair programming avec eux, et les mettre à la même hauteur de dev que toi !
Tips
Tips
Tips
XXX