Sujet 4

1.1 Bienvenue au 4e sujet

Pour votre progression, c'est très important de finir le sujet précédent avant de commencer celui-ci.

Vous devez travailler connectés (lien « Connexion » en haut à droite de la page). Sinon, vous rencontrerez des problèmes d'avancement et vous risquez d'être comptés absent. En étant connectés vous retrouverez l'endroit où vous en étiez à la séance suivante.

2. Révisions

2.1 Révisions

Commençons par une rapide révision des notions des sujets précédents.

Révisions

2.2 Élément id

HTML:

<img id="photo" src="photo.jpg" alt="photo"/>

JS:

let p=XYZ;

Que faut-il écrire à la place de XYZ pour mettre l'image dans la variable p ?
On utilisera son id.
On n'utilisera pas querySelector ni querySelectorAll. On a vu une autre fonction, plus simple, prévue pour ce cas (id).

document.getElementById('photo')
Regexp: (let +p *= *)?document\.getElementById *$ *['"]photo['"] *$ *;?
document.getElementById('#photo')
Regexp: (let +p *= *)?document\.getElementById *$ *['"]#photo['"] *$ *;? : Presque ! Il y a un problème dans le paramètre que vous avez donné à getElementById
Doc:
https://developer.mozilla.org/fr/docs/Web/API/Document/getElementById
@#wronganswer#@ : Indice: Comment traduit-on en anglais « chercher élément avec son id »

Révisions

2.3 Utiliser un gestionnaire d'événements

HTML:

<p>petit</p>
<p id="moyen">moyen</p>
<p>grand</p>

function afficher(){console.log('hello');}

En une seule ligne, faites en sorte que la fonction "afficher" soit appelée uniquement quand l'utilisateur clique sur "moyen" ?
(sans créer une variable)

document.getElementById('moyen').addEventListener('click',afficher);
Regexp: document\.getElementById *$ *['"]moyen['"] *$\.addEventListener *$ *['"]click['"] *, *afficher *$ *(;|)
document.querySelector('#moyen').addEventListener('click',afficher);
Regexp: document\.querySelector *$ *['"]#moyen['"] *$\.addEventListener *$ *['"]click['"] *, *afficher *$ *(;|)

Révisions

2.4 Terme « gestionnaire d'événements »

Dans le code suivant:

document.getElementById('moyen').addEventListener('click',afficher);

qu'est-ce qui est appelé un « gestionnaire d'événements » ?

afficher
addEventListener
click
getElementById
moyen
document

Révisions

2.5 Moment d'appel

...
<body>
    <p>petit</p>
    <p id="moyen">moyen</p>
    <p>grand</p>
    <script>
       document.getElementById('moyen').addEventListener('click',afficher);
       function afficher() {console.log('hello');}
    </script>
</body>
...

Quand sont appelés :

addEventListener
:
Une fois, au chargement de la page
console.log
:
A chaque click de l'utilisateur sur moyen
getElementById
:
Une fois, au chargement de la page

Révisions

2.6 Concaténation

let a='Bonjour ';
let b='Karim';
console.log(XYZ);

Que faut-il écrire à la place de XYZ pour afficher « Bonjour Karim » dans la console, en utilisant a et b ?

a+b
Regexp: (console\.log *$ *)?a *\+ *b( *$ *;?)?

Révisions

2.7 Exécuter avec un délai

XYZ(ma_fonction,2000);
function ma_fonction() { ... }

Que faut-il écrire à la place de XYZ pour que ma_fonction soit appelée dans 2000 millisecondes ?

setTimeout
Regexp: (window\.)?setTimeout($ *ma_fonction *, *2000 *$ *;?)?

Révisions

2.8 Technologies navigateur

Quelles technologies sont principalement employées dans le navigateur ?

JS+DOM
HTML
CSS
PHP
SQL
Node.js
Java
Python

Révisions

2.9 Web dynamique

1
:
Le navigateur demande une page
2
:
Le serveur web reçoit la requête et exécute un logiciel
3
:
Le logiciel demande des informations à la base de données
4
:
Le logiciel génère une page HTML
5
:
Le HTML est envoyé au navigateur
6
:
Le navigateur affiche le HTML

Révisions

2.10 Création objet

Que faut-il écrire en JS pour créer un objet contenant une seule propriété « score » qui a la valeur 123 ?

{score:123}
Regexp: ((let|var) +[a-zA-Z0-9_]+ *= *)?\{ *['"]?score['"]? *: *123 *,? *\} *;?

Révisions

2.11 Ajout propriété

let c={left: 100};
XYZ

Que faut-il écrire à la place de XYZ pour ajouter la propriété « top »avec la valeur 200 à l'objet qui se trouve dans c ?

c.top=200;
Regexp: c\.top *= *200 *(;|)
c['top']=200;
Regexp: c *\[ *['"]top['"] *\] *= *200 *(;|) : Oui... ça marche ... mais il y a plus simple.

Révisions

2.12 Tableaux: déclaration

let scores=XYZ;

Que faut-il écrire à la place de XYZ pour créer un tableau contenant les valeurs 300, 100 et 600, dans cet ordre ?

[300,100,600]
Regexp: (let +scores? *= *)?\[ *300 *, *100 *, *600 *\] *;?

Révisions

2.13 Total

let scores=[300,100,600,200,400,0,900];
let total=0;
XYZ

Que faut-il écrire à la place de XYZ pour créer une boucle for sur la variable i qui permette de calculer la somme des scores ?

for(let i=0;i<scores.length;i++){total+=scores[i];}
Regexp: for *$ *let +i *= *0 *; *i *< *scores\.length *; *(i\+\+|i *= *i *\+ *1) *$ *\{ *total *(\+=|= *total *\+) *scores *\[ *i *\] *(;|) *\} *;?

Révisions

2.14 Création d'un élément

<body>
    <p>Vanille</p>
    <p>Framboise</p>
</body>

On voudrait ajouter un paragraphe au document précédent pour obtenir ceci:

<body>
    <p>Vanille</p>
    <p>Framboise</p>
    <p>Chocolat</p>
</body>

La création d'un élément puis son insertion se fait en plusieurs étapes:

let p=document.ABC('p');
p.CDE='Chocolat';
document.body.FGH(p);

Que faut-il écrire à la place de ABC ?

createElement

Révisions

2.15 Création d'un élément : étape 2

<body>
    <p>Vanille</p>
    <p>Framboise</p>
</body>

On voudrait ajouter un paragraphe au document précédent pour obtenir ceci:

<body>
    <p>Vanille</p>
    <p>Framboise</p>
    <p>Chocolat</p>
</body>

La création d'un élément puis son insertion se fait en plusieurs étapes:

let p=document.createElement('p');
p.CDE='Chocolat';
document.body.FGH(p);

Que faut-il écrire à la place de CDE ?

textContent

Révisions

2.16 Création d'un élément : étape 3

<body>
    <p>Vanille</p>
    <p>Framboise</p>
</body>

On voudrait ajouter un paragraphe au document précédent pour obtenir ceci:

<body>
    <p>Vanille</p>
    <p>Framboise</p>
    <p>Chocolat</p>
</body>

La création d'un élément puis son insertion se fait en plusieurs étapes:

let p=document.createElement('p');
p.textContent='Chocolat';
document.body.FGH(p);

Que faut-il écrire à la place de FGH ?

append
appendChild

3. Expressions régulières

3.1 ¤ Expressions régulières

Une des tâches fréquentes en JS est de vérifier que les utilisateurs ont bien saisi les champs d'un formulaire.

Validation & expressions régulières

Par exemple, si on a demandé un nombre, il faut vérifier qu'il n'a pas rentré de lettres.
Si on a demandé une adresse mail, il faut vérifier que la saisie ressemble bien à une adresse mail.

Pour çà, on va utiliser des expressions régulières.

N'hésitez pas à relire des explications sur le web.
Par exemple: https://dridk.me/expression-reguliere.html

Sécurité: La vérification en JS permet d'afficher immédiatement un message d'erreur, sans passer par le serveur, elle est donc agréable pour l'utilisateur. Néanmoins, la validation devra aussi être faite impérativement coté serveur. Il est très facile pour un utilisateur mal-intentionné de contourner la validation coté client (JS).

Syntaxe d'une expression régulière:

Elles commencent par un "/" et finissent par un "/"
Entre les deux "/" il y a des caractères.
Les caractères suivants ont un sens particulier: \^$.|?*+()[]{}
On va voir la plupart de ces caractères spéciaux dans les pages qui suivent.

Quelques exemples qu'on étudiera plus en détail après:

/^abc$/ : correspond uniquement à la chaîne "abc"
/^Prix: [0-9]+$/ : correspond à "Prix: " suivi d'un nombre: Exemples: "Prix: 123" "Prix: 5" "Prix: 1000000"
/bonjour/ : correspond à "bonjour", mais n'importe où. Exemples: "bonjour Karim", "bien le bonjour"
/^Choix: [abcd]$/ : correspond à "Choix: " suivi d'une des lettres a,b,c ou d. Exemples: "Choix: c" , "Choix: a"

Utilisation en JS

Une expression régulière est appliquée à une chaîne de caractères, en général pour vérifier ou remplacer:

vérifier si la chaîne correspond à l'expression
Exemple en JS:
if( /^abc$/.test("axc") ) {console.log(...);}
remplacer :
Exemple en JS
let s='abcdef';
s=s.replace(/abc/,'xyz');
=> s vaut 'xyzdef'

Expressions régulières

3.2 ¤ Expression régulière simple

Regardons cet exemple d'expression régulière

 /^abc$/

On suppose qu'un utilisateur a saisi une chaîne dans un formulaire et qu'on veut vérifier si la chaîne correspond bien à l'expression.
L'expression veut dire:
/ : début de l'expression régulière
^ : on doit se trouver au début de la chaîne saisie
a: suivi de la lettre "a"
b: suivi de la lettre "b"
c: suivi de la lettre "c"
$: on doit se trouver à la fin de la chaîne saisie
/ : fin de l'expression régulière

Donc dans ce cas on impose que l'utilisateur ait saisi la chaîné "abc".

Voyons si vous avez bien compris ^ et $

Expressions régulières

3.3 Début

Quelles saisies fonctionnent pour

/^a/

avion
arbre
lapin
panda
a

Expressions régulières

3.4 Fin

Quelles saisies fonctionnent pour

/a$/

panda
avion
alabama
lapin

Expressions régulières

3.5 Début et fin

Quelles expressions fonctionnent ?

/^abc$/ l'utilisateur saisi "abc"
/^abc$/ l'utilisateur saisi "xabc"
/abc/ l'utilisateur saisi "abc"
/abc/ l'utilisateur saisi "xabc"
/abc/ l'utilisateur saisi "uvw"

Expressions régulières

3.6 ¤ Crochets

Les crochets représentent un seul caractère parmi plusieurs.
Le tiret peut-être utilisé pour représenter une gamme de caractères.

Par exemple :
[ab] veut dire "soit a, soit b". Mais un seul caractère.
On peut avoir "a" ou "b" mais pas "ab" et pas "ba" et pas "ababa"
[abcd] veut dire "soit a, soit b, soit c, soit d".
[a-d] veut dire la même chose que [abcd] "soit a, soit b, soit c, soit d". Mais toujours un seul caractère.
[0-9] veut dire la même chose que [0123456789], c'est à dire "un seul chiffre"
[a-z] veut dire "une seule lettre minuscule"

Quelles saisies fonctionnent pour

/^a[bcd]e$/

abe
ade
abce
abcde

Expressions régulières

3.7 ¤ Répétition

Le "+" et le "*" permettent d'indiquer une répétition de l'expression qui précède.

Par exemple:

a+ veut dire "une ou plus lettres a"
Exemples: "a", "aaaaa", "aaaaaa"
abc+ veut dire "a, suivi de b, suivi de une ou plus fois c".
Exemples: "abc", "abcc", "abcccccccc"
a* veut dire "zéro ou plus lettres a",
Exemples: "" (vide), "a", "aaaaaa"
abc* veut dire "a, suivi de b, suivi de zéro ou plus fois c".
Exemples: "ab", "abc", "abcccccccc"
[ab]+ comme si on répétait l'expression [ab] un nombre de fois [ab][ab][ab]... :
Exemple "baababbbabbabba"

Les expressions comme [a-z]+ ou [0-9]* sont très utilisées

Quelles saisies fonctionnent pour

/^ab+c$/

abc
abbbc
ac
ab+c

Expressions régulières

3.8 Expression simple : [ ]

Quelles saisies fonctionnent pour

/^x[rst]y$/

xry
xrsty
xsy
xsty

Expressions régulières

3.9 Expression simple : +

Quelles saisies fonctionnent pour

/^xy+z$/

xyz
xz
xyyyyz
xy
xyzz

Expressions régulières

3.10 Expression simple : []+

Quelles saisies fonctionnent pour

/^x[ab]+y$/

xay
xy
xaaay
xbbby
xababbbaaaay
xayy

Expressions régulières

3.11 Expression simple : *

Quelles saisies fonctionnent pour

/^xy*z$/

xyz
xz
xyyyyyyyyyz
xxyyzz

Expressions régulières

3.12 Expression simple : .

Le "." représente n'importe quel caractère (un seul)

Quelles saisies fonctionnent pour

/^x.y$/

xay
x3y
xxyy
xaay
x.y

Expressions régulières

3.13 Expression simple : [-]

Quelles saisies fonctionnent pour

/^x[a-e]z$/

Expressions régulières

3.14 ¤ Uniquement des chiffres

Quelques exemples:

/^ab[cd]$/ : la lettre "a" puis la lettre "b" puis la lettre "c" OU la lettre "d" (donc abc ou abd sont ok.)

/^ab*$/ : la lettre "a" puis la lettre "b" répétée zero ou plusieurs fois (donc a ab abbb abbbbb sont ok.)

/^ab+$/ : la lettre "a" puis la lettre "b" répétée une ou plusieurs fois (donc ab abbb abbbbb sont ok.)

/^ab[a-z]$/ : la lettre "a" puis la lettre "b" puis n'importe quelle lettre (de "a" à "z")

/^ab[0-9]$/ : la lettre "a" puis la lettre "b" puis n'importe quel chiffre (de 0 à 9)

Maintenant, c'est à vous:

Quelle expression régulière si on veut une saisie uniquement composée de chiffres (au moins un chiffre) ?

/^[0-9]+$/
Regexp: \/\^\[0-9\]\+\$\/
/^[0-9]$/
Regexp: \/\^\[0-9\]\$\/ : Presque. Votre expression veut dire: "début" , suivi d'un chiffre, suivi de "fin".
Donc, votre expression n'accepte qu'un seul chiffre.
On vous demande ici "au moins un chiffre".
/[0-9]+/
Regexp: \/\[0-9\]\+\/ : Presque. Votre expression veut dire "une chaîne de caractère qui contient au moins un chiffre".
Par exemple "1234" fonctionnerait, ce qui est ok, mais "abc1234xyz" fonctionnerait aussi, ce qui n'est pas souhaité.
^
Regexp: ([^\/].*|.*[^\/]) : Pas tout à fait. L'expression régulière doit commencer et terminer par "/"
/[0-9]/
Regexp: \/\[0-9\]\/ :
Pas tout à fait. Votre expression veut dire "une chaîne de caractère qui contient un chiffre".
Par exemple "1234" fonctionnerait, ce qui est ok, mais "abc1234xyz" fonctionnerait aussi, ce qui n'est pas souhaité.
/^[0-9]*$/
Regexp: \/\^\[0-9\]\*\$\/ : Presque !
Votre expression permet de rentrer une chaîne vide alors que l'énoncé dit « au moins un chiffre »

Expressions régulières

3.15 Uniquement des lettres

Quelle expression régulière si on veut une saisie uniquement composée de lettres minuscules (au moins une lettre) ?

/^[a-z]+$/
Regexp: \/\^\[a-z\]\+\$\/
/^[a-z]*$/
Regexp: \/\^\[a-z\]\*\$\/ : Vous y êtes presque. Le "*" veut dire "l'expression qui précède, répétée zéro ou plus fois", alors qu'ici on veut "une ou plus fois".
/^[a-z]$/
Regexp: \/\^\[a-z\]\$\/ : Presque ! Votre expression veut dire : "début", suivie d'une lettre, suivi de "fin".
Donc elle ne marche que pour une seule lettre.
Dans la question on vous demande "au moins une lettre".
/[a-z]+/
Regexp: \/\[a-z\]\+\/ : Vous êtes sur la bonne voie. Actuellement votre expression accepte par exemple "bonjour" ou "avion", ce qui est correct. Mais elle accepte aussi "123bonjour456" et ">>>avion<<<" ce qui n'est pas souhaité.

Expressions régulières

3.16 Adresse mail - 1

Quelle expression régulière si on veut une saisie composée d'au moins une lettre minuscule, suivie d'un arobase, suivi d'au moins une lettre minuscule ?

/^[a-z]+@[a-z]+$/
Regexp: \/\^\[a-z\]\+@\[a-z\]\+\$\/
/[a-z]+@[a-z]+/
Regexp: \/\[a-z\]\+@\[a-z\]\+\/ : Presque!
Indice: votre expression fonctionnerait pour "123abc@xyz456"
/^[a-z]+@[a-z]$/
Regexp: \/\^\[a-z\]\+@\[a-z\]\$\/ : Presque!
Indice: Votre expression accepte "toto@e" mais pas "toto@exemple"
/^[a-z]+@[a-z]+/
Regexp: \/\^\[a-z\]\+@\[a-z\]\+\/ : Presque! Un petit oubli..
Indice: Votre expression accepte bien "toto@exemple", mais elle accepte aussi "toto@exemple12:;"

Expressions régulières

3.17 Adresse mail - 1: correction

correction

/^[a-z]+@[a-z]+$/

Expressions régulières

3.18 Adresse mail - 2

Adresse mail:

On veut valider des adresses mail simples.

Quelle expression régulière si on veut une saisie composée de

au moins une lettre minuscule,
suivie d'un arobase,
suivi d'au moins une lettre minuscule,
suivie d'un point
suivie d'au moins une lettre minuscule

(remarque: le point à un sens particulier dans les expressions régulières, il faut donc l'échapper: \.)

/^[a-z]+@[a-z]+.[a-z]+$/
Regexp: \/\^\[a-z\]\+@\[a-z\]\+\\\.\[a-z\]\+\$\/
/^[a-z]+@[a-z]+.[a-z]+$/
Regexp: \/\^\[a-z\]\+@\[a-z\]\+\.\[a-z\]\+\$\/ : Presque! Vous avez oublié d'échapper le ".".
/^[a-z]+@[a-z]+.[a-z]$/
Regexp: \/\^\[a-z\]\+@\[a-z\]\+\\\.\[a-z\]\$\/ : Presque! Un petit oubli...
Indice: votre expression accepte bien "toto@exemple.o" mais pas "toto@exemple.org"
/^[a-z]+@[a-z]+.[a-z]+/
Regexp: \/\^\[a-z\]\+@\[a-z\]\+\\\.\[a-z\]\+\/ :
Presque! Un petit oubli...
Indice: votre expression accepte bien "toto@exemple.org" mais aussi "toto@exemple.org1234"

Expressions régulières

3.19 ¤ Adresse mail - 2 : correction

Correction:

/^[a-z]+@[a-z]+\.[a-z]+$/.test('aqsdfsdf')

Voila!

Nous avons une expression régulière qui nous permet de vérifier des adresses mails simples.

Une expression plus complète

La validation d'une adresse mail correspondant aux normes RFC 822, RFC 5322 est très très compliquée, mais en pratique, on peut simplifier.
Un site de référence en la matière conseille :
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/ile /i à la fin est l'option pour ignore la case (minuscule / majuscules)

Essayez de taper dans la console des outils de dév.:

/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test("aaa@bbb.ccc")

ou

/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test("aaabbb.ccc")

Expressions régulières

3.20 ¤ Négation classe de caractères

Une dernière expression:

[^abcd]

Qui veut dire « tout caractère SAUF a, b, c ou d. »

Attention à ne pas confondre avec le "^" en dehors de crochets, qui veut dire « le début de la chaîne ».

Un autre exemple:

[^a-z]

Qui veut dire « Tout caractère sauf une lettre. »

Un autre exemple :
si on veut trouver quelque-chose qui ressemble à une balise : <div class="xyz">

On peut écrire :

<[^>]+>

Çà se lit "<" suivi d'un n'importe quel caractère qui ne soit pas ">", ceci au moins une fois, suivi de ">".

à vous:

On veut identifier une expression des chaînes du type
nom="Toto"
prenom="Jo"
adresse="123 rue grande, Trifouilli"

C'est à dire : une suite de lettres minuscules, suivie d'un égal suivi d'un guillemet, suivi de caractères qui ne sont pas des guillemets, suivi d'un guillemet.

Écrivez l'expression entière : /^...$/

/^[a-z]+="[^"]+"$/
Regexp: \/\^\[a-z\][+*]=\"\[\^"\][+*]"\$\/
/^[a-z]+="[^"]"$/
Regexp: \/\^\[a-z\][+*]=\"\[\^"\]"\$\/ : Presque!
Indice: Votre expression accepte : aaa="b"
mais elle n'accepte pas : aaa="bbbb"
/^[a-z]="[^"]"$/
Regexp: \/\^\[a-z\]=\"\[\^"\]"\$\/ : Vous êtes sur la bonne voie.
Indice: votre expression accepte bien a="b" mais pas abc="def"

4. Formulaire & String

4.1 Formulaire & String

On va créer un formulaire.
Partons d'une copie de ce fichier HTML fait au Sujet-2.
Appelez votre copie formulaire.html
Séparez le JS pour le mettre dans un nouveau fichier formulaire.js

Formulaire & String

4.2 Correction

formulaire.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Texte</title>
		<style>
			.erreur{
				color: red;
				transition: opacity .3s;
			}
		</style>
	</head>
	<body>
		<form method="POST">
			<p>
				<label>Nom : <input id="nom" type="text"/></label> 
				<span class="erreur" id="erreur-nom">Vide !</span>
			</p>
			<p>
				<label>Prénom : <input id="prenom" type="text"/></label> 
				<span class="erreur" id="erreur-prenom">Vide !</span>
			</p>
		</form>
		<p>Bonjour <span id="affiche-prenom"></span> <span id="affiche-nom"></span>!</p>
		<script src="formulaire.js"></script>
	</body>
</html>

formulaire.js

let inputNom=document.querySelector('#nom');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let afficheNom=document.querySelector('#affiche-nom');
   afficheNom.textContent=inputNom.value;
   let erreur=document.querySelector('#erreur-nom');
   if(inputNom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});
let inputPrenom=document.querySelector('#prenom');
inputPrenom.addEventListener('keyup',function(event) 
{
   console.log('Touche prénom relâchée');
   let affichePrenom=document.querySelector('#affiche-prenom');
   affichePrenom.textContent=inputPrenom.value;
   let erreur=document.querySelector('#erreur-prenom');
   if(inputPrenom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});

Formulaire & String

4.3 Code: lire input

Lisez ce code et essayez de comprendre comment il fonctionne.

formulaire.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Texte</title>
		<style>
			.erreur{
				color: red;
				transition: opacity .3s;
			}
		</style>
	</head>
	<body>
		<form method="POST">
			<p>
				<label>Nom : <input id="nom" type="text"/></label> 
				<span class="erreur" id="erreur-nom">Vide !</span>
			</p>
			<p>
				<label>Prénom : <input id="prenom" type="text"/></label> 
				<span class="erreur" id="erreur-prenom">Vide !</span>
			</p>
		</form>
		<p>Bonjour <span id="affiche-prenom"></span> <span id="affiche-nom"></span>!</p>
		<script src="formulaire.js"></script>
	</body>
</html>

formulaire.js

let inputNom=document.querySelector('#nom');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let afficheNom=document.querySelector('#affiche-nom');
   afficheNom.textContent=inputNom.value;
   let erreur=document.querySelector('#erreur-nom');
   if(inputNom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});
let inputPrenom=document.querySelector('#prenom');
inputPrenom.addEventListener('keyup',function(event) 
{
   console.log('Touche prénom relâchée');
   let affichePrenom=document.querySelector('#affiche-prenom');
   affichePrenom.textContent=inputPrenom.value;
   let erreur=document.querySelector('#erreur-prenom');
   if(inputPrenom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});

Quelle est l'expression dans ce code qui lit ce que l'utilisateur à écrit dans le premier champs texte ?

inputNom.value
Regexp: .*inputNom\.value *;?

Formulaire & String

4.4 Code: cacher erreur

Continuons à essayer de comprendre comment ce code fonctionne.

formulaire.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Texte</title>
		<style>
			.erreur{
				color: red;
				transition: opacity .3s;
			}
		</style>
	</head>
	<body>
		<form method="POST">
			<p>
				<label>Nom : <input id="nom" type="text"/></label> 
				<span class="erreur" id="erreur-nom">Vide !</span>
			</p>
			<p>
				<label>Prénom : <input id="prenom" type="text"/></label> 
				<span class="erreur" id="erreur-prenom">Vide !</span>
			</p>
		</form>
		<p>Bonjour <span id="affiche-prenom"></span> <span id="affiche-nom"></span>!</p>
		<script src="formulaire.js"></script>
	</body>
</html>

formulaire.js

let inputNom=document.querySelector('#nom');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let afficheNom=document.querySelector('#affiche-nom');
   afficheNom.textContent=inputNom.value;
   let erreur=document.querySelector('#erreur-nom');
   if(inputNom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});
let inputPrenom=document.querySelector('#prenom');
inputPrenom.addEventListener('keyup',function(event) 
{
   console.log('Touche prénom relâchée');
   let affichePrenom=document.querySelector('#affiche-prenom');
   affichePrenom.textContent=inputPrenom.value;
   let erreur=document.querySelector('#erreur-prenom');
   if(inputPrenom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});

Quelle est l'expression dans ce code qui permet de cacher un message d'erreur ?

erreur.style.opacity=0
Regexp: .*erreur\.style\.opacity *= *0.*

Formulaire & String

4.5 Formulaire identifiants

Modifiez le HTML pour afficher comme ci-dessous.

Ensuite, faites en sorte que le message "Vide!" soir affiché à coté de Nom, si celui-ci est vide:

Quand l'utilisateur tape dans Nom, le champs Nom est recopié vers le champs Login:

Formulaire & String

4.6 Correction

formulaire.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Texte</title>
		<style>
			.erreur{
				color: red;
				transition: opacity .3s;
			}
		</style>
	</head>
	<body>
		<h1>Vos identifiants:</h1>
		<form method="POST">
			<p>
				<label>Nom : <input id="nom" type="text"/></label> 
				<span class="erreur" id="erreur-nom">Vide !</span>
			</p>
			<p>
				<label>Login : <input id="login" type="text"/></label> 
			</p>
		</form>
		<script src="formulaire.js"></script>
	</body>
</html>

formulaire.js

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   inputLogin.value=inputNom.value;
   let erreur=document.querySelector('#erreur-nom');
   if(inputNom.value.length===0){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
});

Formulaire & String

4.7 Expression régulière nom

Écrivez une expression régulière correspondant à une chaîne constituée uniquement d'un ou plus des caractères suivants:

lettres minuscules
lettres majuscules
apostrophe
espace

/^[a-zA-Z' ]+$/
Regexp: \/\^\[a-zA-Z' \]\+\$\/
/^[a]+$/
Regexp: \/\^\[[azAZ' -]+\]\+\$\/ : Vous êtes sur la bonne voie.
Vérifiez que vous avez bien mis les caractères suivants
- lettres minuscules
- lettres majuscules
- apostrophe
- espace
et dans ce même ordre

Formulaire & String

4.8 RegExp.test()

La fonction "test" s'applique sur une expression régulière. Elle permet de savoir si la chaîne passée en paramètre correspond ou pas à cette expression régulière:

/^[a-zA-Z' ]+$/.test(chaine)

Exemple:

/^[a-zA-Z' ]+$/.test("Mailk") retourne true
/^[a-zA-Z' ]+$/.test("Mailk123") retourne false

Dans formulaire.html remplacez le message "Vide !" par "Non valide !"
Modifiez formulaire.js pour afficher ce message "Non valide !" quand l'utilisateur écrit un nom non valide.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Formulaire & String

4.9 Correction

formulaire.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Texte</title>
		<style>
			.erreur{
				color: red;
				transition: opacity .3s;
			}
		</style>
	</head>
	<body>
		<h1>Vos identifiants:</h1>
		<form method="POST">
			<p>
				<label>Nom : <input id="nom" type="text"/></label> 
				<span class="erreur" id="erreur-nom">Non valide !</span>
			</p>
			<p>
				<label>Login : <input id="login" type="text"/></label> 
			</p>
		</form>
		<script src="formulaire.js"></script>
	</body>
</html>

formulaire.js

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   inputLogin.value=inputNom.value;
   let erreur=document.querySelector('#erreur-nom');
   if(/^[a-zA-Z' ]+$/.test(inputNom.value)){erreur.style.opacity=0;}
   else{erreur.style.opacity=1;}
});

Formulaire & String

4.10 toLowerCase

On veut que le login soit constitué de minuscules.
On veut donc transformer le nom en minuscules avant de le recopier.
Pour ça, on peut utiliser la fonction toLowerCase.
Regardons d'abord comment l'utiliser:
Dans la console, tapez :

'Liam'.toLowerCase()

puis :

let s='Liam';
s.toLowerCase()

Puis tapez s tout seul.
s n'a pas été modifiée! En effet les chaînes ne peuvent pas être modifiées en JS. On peut juste en créer de nouvelles.
Il faut donc utiliser :

s=s.toLowerCase()

Dans votre programme faites en sorte d'obtenir le résultat suivant, quand l'utilisateur tape "Durand" dans Nom.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Formulaire & String

4.11 Correction

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   inputLogin.value=inputNom.value.toLowerCase();
   let erreur=document.querySelector('#erreur-nom');
   if(/^[a-zA-Z' ]+$/.test(inputNom.value)){erreur.style.opacity=0;}
   else{erreur.style.opacity=1;}
});

Formulaire & String

4.12 ¤ String

On a souvent besoin de manipuler des chaînes de caractères (String).

Les fonctionnalités les plus utiles :

"+" : concaténation
== ou != ou === ou !== : comparaison, comme en PHP
.length : longueur
.replace() : remplacer en utilisant une expression rationnelle
/.../.test("...") : vérifier si une chaîne correspond à un expression rationnelle

Retrouvez la documentation de String ici.

Essayons :

Dans la console tapez :

var a='bonjour'

Ensuite tapez:

a.length

Ensuite tapez :

a=a+" c'est moi"

a.replace(/o/,'X')

Attention, le résultat du remplacement est affiché, mais "a" n'a pas été modifié (pour ça il faut utiliser : a=a.replace(/o/,'X') )

/xyz/ est une expression rationnelle
Par défaut le remplacement ne se fait que sur la première occurrence de "o" trouvée:
"bonjour c'est moi" => "bXnjour c'est moi"
On peut spécifier l'option "g" à la fin de l'expression pour remplacer toutes les occurrences:

a.replace(/o/g,"X")

"bonjour c'est moi" => "bXnjXur c'est mXi"

Formulaire & String

4.13 RegExp: négation

Écrivez une expression régulière permettant de trouver un caractère qui n'est pas une lettre minuscule (n'importe où dans la chaîne).
Rappel: aide mémoire expressions régulières: Négation classe de caractères

/[^a-z]/
Regexp: \/\[\^a-z\]\/
/^[^a-z]$/
Regexp: \/\^\[\^a-z\]\$\/ : Presque! On veut trouver un caractère qui n'est pas une lettre ou un tiret n'importe où dans la chaîne.
Vous avez indiqué qu'il doit forcément se trouver au début et qu'il doit aussi être à la fin (donc que la chaîne n'a qu'un seul caractère)

Formulaire & String

4.14 Login simplifié

On veut que le "Login" proposé soit une version simplifié du "Nom".

Faites en sorte que lorsque l'utilisateur tape dans le champs Nom:

qu'il soit transformé en minuscules
et que tous les caractères qui ne sont pas des lettres soient remplacés par un tiret "-".

Exemple (l'espace a été remplacé par un tiret)

Utilisez la fonction replace vue précédemment.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Formulaire & String

4.15 Correction

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let texte=inputNom.value;
   texte=texte.toLowerCase();
   texte=texte.replace(/[^a-z]/g,'-');
   inputLogin.value=texte;
   let erreur=document.querySelector('#erreur-nom');
   if(/^[a-zA-Z' ]+$/.test(inputNom.value)){erreur.style.opacity=0;}
   else{erreur.style.opacity=1;}
});

Formulaire & String

4.16 Formulaire complet: champs mot de passe et confirmation

En vous inspirant de la ligne Nom, complétez le HTML du formulaire pour obtenir l'affichage de la figure.

(Faites uniquement le HTML, on verra le JS après).

Indications :

pour les mots de passe, utilisez des input avec le type "password"
pour le bouton, utilisez des input avec le type "submit" et utilisez l'attribut value

Formulaire & String

4.17 Correction

formulaire.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Texte</title>
		<style>
			.erreur{
				color: red;
				transition: opacity .3s;
			}
		</style>
	</head>
	<body>
		<h1>Vos identifiants:</h1>
		<form method="POST">
			<p>
				<label>Nom : <input id="nom" type="text"/></label> 
				<span class="erreur" id="erreur-nom">Non valide !</span>
			</p>
			<p>
				<label>Login : <input id="login" type="text"/></label> 
			</p>
			<p>
				<label>Mot de passe : <input id="mdp" type="password"/></label> 
				<span class="erreur" id="erreur-mdp">Trop court !</span>
			</p>
			<p>
				<label>Confirmation : <input id="confirmation" type="password"/></label> 
				<span class="erreur" id="erreur-confirmation">Différents !</span>
			</p>
			<p>
				<input id="submit" type="submit" value="Envoyer"/>
			</p>
		</form>
		<script src="formulaire.js"></script>
	</body>
</html>

Formulaire & String

4.18 JS: Mot de passe et confirmation

On va maintenant commencer le JS pour les champs Mot de passe et confirmation.
Tout d'abord, on veut pour voir réagir lorsque l'utilisateur relâche une touche dans ces deux champs.

Affichez dans la console « Touche nom relâchée » quand l'utilisateur tape dans ce champs.
(normalement c'est déjà fait)
Affichez dans la console « Touche mot de passe relâchée » quand l'utilisateur tape dans ce champs.
Affichez dans la console « Touche confirmation relâchée » quand l'utilisateur tape dans ce champs.

Réfléchissez bien à comment obtenir ce résultat.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Formulaire & String

4.19 Correction: JS mdp + confirmation

formulaire.js

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
let inputMdp=document.querySelector('#mdp');
let inputConfirmation=document.querySelector('#confirmation');
inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let texte=inputNom.value;
   texte=texte.toLowerCase();
   texte=texte.replace(/[^a-z]/g,'-');
   inputLogin.value=texte;
   let erreur=document.querySelector('#erreur-nom');
   if(/^[a-zA-Z' ]+$/.test(inputNom.value)){erreur.style.opacity=0;}
   else{erreur.style.opacity=1;}
});
inputMdp.addEventListener('keyup',function(event) 
{
   console.log('Touche mot de passe relâchée');
});
inputConfirmation.addEventListener('keyup',function(event) 
{
   console.log('Touche confirmation relâchée');
});

Formulaire & String

4.20 JS : mot de passe et confirmation

On veut que le mot de passe fasse au moins 6 caractères. (rappel)
On veut afficher une erreur si le mot de passe et la confirmation sont différents.

Indications :

L'affichage du message "Différents !" peut être déclenché à la fois depuis "Mot de passe" et depuis "Confirmation".

C'est à vous !

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Formulaire & String

4.21 Correction

formulaire.js :

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
let inputMdp=document.querySelector('#mdp');
let inputConfirmation=document.querySelector('#confirmation');

inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let texte=inputNom.value;
   texte=texte.toLowerCase();
   texte=texte.replace(/[^a-z]/g,'-');
   inputLogin.value=texte;
   let erreur=document.querySelector('#erreur-nom');
   if(/^[a-zA-Z' ]+$/.test(inputNom.value)){erreur.style.opacity=0;}
   else{erreur.style.opacity=1;}
});

inputMdp.addEventListener('keyup',function(event) 
{
   console.log('Touche mot de passe relâchée');
   let erreur=document.querySelector('#erreur-mdp');
   if(inputMdp.value.length<6){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
   let erreurConfirmation=document.querySelector('#erreur-confirmation');
   if(inputMdp.value==inputConfirmation.value){erreurConfirmation.style.opacity=0;}
   else {erreurConfirmation.style.opacity=1;}
});

inputConfirmation.addEventListener('keyup',function(event) 
{
   console.log('Touche confirmation relâchée');
   let erreurConfirmation=document.querySelector('#erreur-confirmation');
   if(inputMdp.value==inputConfirmation.value){erreurConfirmation.style.opacity=0;}
   else {erreurConfirmation.style.opacity=1;}
});

Formulaire & String

4.22 Champs email

On veut ajouter un champs "Email" au formulaire et afficher un message d'erreur si l'adresse mail saisie ne correspond pas à une expression rationnelle (rappel).

Complétez le HTML et le JS pour obtenir le résultat décrit par la figure.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Formulaire & String

4.23 Correction :

formulaire.js

let inputNom=document.querySelector('#nom');
let inputLogin=document.querySelector('#login');
let inputEmail=document.querySelector('#email');
let inputMdp=document.querySelector('#mdp');
let inputConfirmation=document.querySelector('#confirmation');

inputNom.addEventListener('keyup',function(event) 
{
   console.log('Touche nom relâchée');
   let texte=inputNom.value;
   texte=texte.toLowerCase();
   texte=texte.replace(/[^a-z]/g,'-');
   inputLogin.value=texte;
   let erreur=document.querySelector('#erreur-nom');
   if(/^[a-zA-Z' ]+$/.test(inputNom.value)){erreur.style.opacity=0;}
   else{erreur.style.opacity=1;}
});

inputMdp.addEventListener('keyup',function(event) 
{
   console.log('Touche mot de passe relâchée');
   let erreur=document.querySelector('#erreur-mdp');
   if(inputMdp.value.length<6){erreur.style.opacity=1;}
   else{erreur.style.opacity=0;}
   let erreurConfirmation=document.querySelector('#erreur-confirmation');
   if(inputMdp.value==inputConfirmation.value){erreurConfirmation.style.opacity=0;}
   else {erreurConfirmation.style.opacity=1;}
});

inputConfirmation.addEventListener('keyup',function(event) 
{
   console.log('Touche confirmation relâchée');
   let erreurConfirmation=document.querySelector('#erreur-confirmation');
   if(inputMdp.value==inputConfirmation.value){erreurConfirmation.style.opacity=0;}
   else {erreurConfirmation.style.opacity=1;}
});

inputEmail.addEventListener('keyup',function(event) 
{
   console.log('Touche email relâchée');
   let erreur=document.querySelector('#erreur-email');
   if(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(inputEmail.value)){erreur.style.opacity=0;}
   else {erreur.style.opacity=1;}
});

5. Portée des variables

5.1 ¤ Portée des variables

En JavaScript les variables ont une « portée », c'est à dire qu'elles sont visibles uniquement dans un contexte.

Par exemple:

function exemple1(){
   let v1=100;
}
function exemple2(){
   console.log(v1); // Erreur !
}

La variable v1 est visible uniquement dans la fonction exemple1 et pas dans exemple2.
Un « bloc » est crée par des accolades :

if(x){
   // ceci est un bloc
}

Une variable définie avec « let » dans un bloc est uniquement visible dans ce bloc:

if(x==1){
   let v=123;
}
console.log(v); // Erreur !

Elle est visible même si on est dans un bloc inclus dans celui qui l'a défini:

if(x==1){
   let v=123;
   for(let i=0;i<10;i++){
      console.log(v); // OK !
   }
}
console.log(v); // Erreur !

Portée des variables

5.2 Portée des variables : question

function xyz(p){
    let a=100;
    if(p=='bonjour'){
       let b=200;
       console.log(a); // L1
    }
    console.log(a); // L2
    console.log(b); // L3
}
console.log(a); // L4

Parmi les lignes L1,l2,L3,L4, lesquelles sont correctes (pas d'erreur) ?

Portée des variables

5.3 ¤ Portée des variables: fonctions

En JS des fonctions peuvent être définies à l'intérieur d'autres fonctions.
Dans une fonction, on peut utiliser des variables du bloc au-dessus (contenant):

function exemple1(){
   let v1=100;
   function exemple2(){
       console.log(v1); // OK !
   }
}

On l'a déjà utilisé. Par exemple dans morpion.html :

			let joueur='X';
			function click_td(event) 
			{
              console.log('Click');
			  if(this.textContent!=''){return;}
			  this.textContent=joueur;
			  if(joueur==='X'){joueur='O';}else{joueur='X';}
			}

La variable joueur est définie à l'extérieur de la fonction click_td, mais elle est utilisée dans cette fonction click_td.

Portée des variables

5.4 Portée des variables: fonctions : question

function xyz(x){
    let a=123;
    if(x<1){let b=456;}
    function rst(){
       let c=789;
       console.log(a); // L1
       console.log(b); // L2
       console.log(c); // L3
    }
    console.log(a); // L4
    console.log(b); // L5
    console.log(c); // L6
}

Parmi les lignes L1 à L6, lesquelles sont correctes (pas d'erreur) ?

Portée des variables

5.5 ¤ Variable masquée par une variable locale

Si une variable locale est déclarée avec le même nom qu'une autre variable accessible, elle la masque:

let a=123; // Déclaration 1
exemple1();
console.log(a); // Affiche 456
exemple2();
console.log(a); // Affiche 456

function exemple1(){
   a=456; // Pas de let: donc le JS utilise "a" de la Déclaration 1
}

function exemple2(){
   let a=789; // let crée une nouvelle variable locale.
   // le "a" ici, n'est pas le même que celui de la Déclaration 1
   // On ne modifie donc pas le "a" de la Déclaration 1
   
}

Portée des variables

5.6 Variable masquée par une variable locale: question

function exemple(z){
   let x=1;
   let y=2;
   console.log(x); // L1
   console.log(y); // L2
   if(z==='azerty'){
      let x=3;
      y=4;
      console.log(x); // L3
      console.log(y); // L4
   }
   console.log(x); // L5
   console.log(y); // L6
}
exemple('azerty');

Qu'est affiché à L1-L6 ?

L1
:
1
L2
:
2
L3
:
3
L4
:
4
L5
:
1
L6
:
4

Portée des variables

5.7 ¤ let, const, var

En JS il y a 3 manières de déclarer une variable: let, const et var
Pour l'instant, on a vu let.

let: déclare une variable uniquement visible dans son bloc
const: comme let, mais impose une variable constante. Sa valeur ne peut pas être modifiée.
var: déclare une variable visible dans toute la fonction où elle est définie (ou globale si elle est définie en-dehors d'une fonction)

Voyons la différence entre let et var:

function exemple(){
  if(x>3){
     var a=123;
     let b=456;
  }
  console.log(a); // OK
  console.log(b); // Erreur
}

En pratique, on va se contenter surtout utiliser let et const.

Sujet 4

1. Bienvenue au 4e sujet

1.1 Bienvenue au 4e sujet

2. Révisions

2.1 Révisions

Révisions

2.2 Élément id

Révisions

2.3 Utiliser un gestionnaire d'événements

Révisions

2.4 Terme « gestionnaire d'événements »

Révisions

2.5 Moment d'appel

Révisions

2.6 Concaténation

Révisions

2.7 Exécuter avec un délai

Révisions

2.8 Technologies navigateur

Révisions

2.9 Web dynamique

Révisions

2.10 Création objet

Révisions

2.11 Ajout propriété

Révisions

2.12 Tableaux: déclaration

Révisions

2.13 Total

Révisions

2.14 Création d'un élément

Révisions

2.15 Création d'un élément : étape 2

Révisions

2.16 Création d'un élément : étape 3

3. Expressions régulières

3.1 ¤ Expressions régulières

Validation & expressions régulières

Syntaxe d'une expression régulière:

Utilisation en JS

Expressions régulières

3.2 ¤ Expression régulière simple

Expressions régulières

3.3 Début

Expressions régulières

3.4 Fin

Expressions régulières

3.5 Début et fin

Expressions régulières

3.6 ¤ Crochets

Expressions régulières

3.7 ¤ Répétition

Expressions régulières

3.8 Expression simple : [ ]

Expressions régulières

3.9 Expression simple : +

Expressions régulières

3.10 Expression simple : []+

Expressions régulières

3.11 Expression simple : *

Expressions régulières

3.12 Expression simple : .

Expressions régulières

3.13 Expression simple : [-]

Expressions régulières

3.14 ¤ Uniquement des chiffres

Maintenant, c'est à vous:

Expressions régulières

3.15 Uniquement des lettres

Expressions régulières

3.16 Adresse mail - 1

Expressions régulières

3.17 Adresse mail - 1: correction

correction

Expressions régulières

3.18 Adresse mail - 2

Adresse mail:

Expressions régulières

3.19 ¤ Adresse mail - 2 : correction

Correction: