Résume de JavaScript

Partie1 :

Il fait partie des langages web dits « standards »

• Le JavaScript est un langage dynamique ; Le contenu dynamique permet de générer

des pages web qui s'adaptent automatiquement en fonction de divers facteurs, tels
que les actions des utilisateurs ou les données externes.

• Le JavaScript est un langage (principalement) côté client ; Un langage « côté client »

ou « client side » est un langage qui va être exécuté dans le navigateur des
utilisateurs qui demandent la page.

• Le JavaScript est un langage interprété ; Le JavaScript est un langage interprété.

Cela signifie qu’il va pouvoir être exécuté directement sous réserve qu’on possède
le logiciel interpréteur. Tous les navigateurs connus possèdent leur interpréteur
JavaScript

• Le JavaScript est un langage orienté objet.

Différence entre java et javascript :

Java est un langage compilé et orienté objet utilisé pour créer des applications solides, alors que
JavaScript est un langage interprété basé sur des prototypes, principalement utilisé pour les pages
Web dynamiques.

Où écrire le code JavaScript ?

• Directement dans la balise ouvrante d’un élément HTML ;

• Dans un élément script, au sein d’une page HTML ;

• Dans un fichier séparé contenant exclusivement du JavaScript et portant

l’extension .js.

Les commentaires

• // pour les commentaires monoligne

• /* pour

les commentaires

multi lignes

*/

Utiliser let et non pas var dans la déclaration

let var
- Avec let les variables doivent - Avec var on n’est pas obligé de déclarer
obligatoirement être déclarées avant de la variable avant de la manipuler dans le
pouvoir être utilisées. code, on peut très bien manipuler une
- Let ne permet pas cela. Pour modifier la variable et la déclarer par la suite
valeur stockée dans une variable avec - Avec var on n’est pas obligé de déclarer
let, il suffit d’utiliser le nom de la la variable avant de la manipuler dans le
 variable et de lui affecter une autre code, on peut très bien manipuler une
valeur. variable et la déclarer par la suite
-

- La fonction typeof nous permet de vérifier le type d’une valeur.

- Si on déclare une variable sans lui attribuer de valeur, alors son type sera Undefined. Si on
déclare une variable et qu’on lui passe null alors son type sera Object^
- Toute valeur (ex3) évaluée par le JavaScript dans un contexte booléen va être évaluée
à true à l’exception des valeurs suivantes qui vont être évaluées à false :
- Le booléen false ;
- La valeur 0 ;
- Une chaine de caractères vide ;
- La valeur null ;
- La valeur undefined ;
- La valeur NaN (« Not a Number » = « n’est pas un nombre »).

Priorité des calculs et utilisation des parenthèses

Quel sera le résultat de chacune des expressions suivantes:

Let x=2;

Let y=5;

Alert(x+y);

Alert(‘ jour ’+x);

Alert(x+y+’jour’);

Alert(‘jour’+0+x+y);

Let z=‘7’

Alert(x+y+z);

Alert(x+6+z+y+8);

- Pour créer ou déclarer une constante en JavaScript, nous allons utiliser le mot clef const.

Structures de contrôle, conditions et opérateurs de comparaison JavaScript

Structures conditionnelles en JavaScript :

La condition if… elseif… else (si… sinon si… sinon).

Opérateurs de comparaison en JavaScript :

 • Let x= 10 ;

• Let y=20 ;

• Let rep= x>=y (x>=y est évaluée en premier puis le résultat (ici false) est affecté à
rep.)

Exercice :
• Faire les programmes JavaScript qui:

• Affiche « trop jeune » si la variable âge contient une valeur inférieure à 18.

• Affiche le maximum de deux valeurs.

• Affiche le maximum de trois valeurs.

• Affiche ‘s’arrêter’ si la valeur du feu est ‘R’, ralentir si elle est ‘O’ si feu=‘V’ ‘Rouler’
sinon ‘Choix erroné’

Exemple :
• let x = 4;
let y = 0;

Ex1 : if(x > 1)

{
alert('x contient une valeur supérieure à 1');
}

Ex2 : if(x == y)

{
alert('x et y contiennent la même valeur');
}

Ex3 : if(y)
 {
alert('La valeur de y est évaluée à true');

Opérateurs logiques

• Les structures ternaires vont se présenter sous la forme suivante :

Test? Code à exécuter si true : code à exécuter si false.

• Exemple:

Let x=12;

Let msg= x>=10 ? ‘x supérieur à10’ : ‘x est strictement inférieur à10’;

- L’instruction switch représente une alternative à l’utilisation de plusieurs if else imbriquées

let x = 15 ;

switch(x){
case 2:
alert('x stocke la valeur 2) ;
break;
case 5:
alert('x stocke la valeur 5') ;
break;
case 10:
alert('x stocke la valeur 10') ;
break;
case 15:
alert('x stocke la valeur 15) ;
break;
case 20:
alert('x stocke la valeur 20') ;
break;
default:
alert( 'x ne stocke ni 2, ni 5, ni 10, ni 15 ni 20') ;
}
Les boucles:

• La boucle while (tant que)

//On initialise une variable let x
let x = 0 ;

//Tant que...
while(x < 10)
//...exécute ce code
{alert(x+1) ;

x++

• La boucle do … while (répeter jusqu’à)

let a = 10 ;
do
{
alert(a) ;
a++;}
}
while(a < 10);
> En effet, lorsqu’on utilise une boucle do … while le code de la boucle va être exécuté avant
l’évaluation de la condition de sortie.

Cela signifie qu’à la différence de la boucle while, on effectuera toujours un passage dans une boucle
do … while même si la condition de sortie n’est jamais vérifiée et donc le code de la boucle sera
toujours exécuté au moins une fois.

• La boucle for (pour)

for(let i = 0 ; i < 10 ; i++){
alert(i) ;}
• La boucle for ... in
• La boucle for ... of
• La boucle for await ... of
• Ces boucles vont être utilisées pour parcourir des objets.
- L’instruction continue va nous permettre de sauter l’itération actuelle et de passer
directement à l’itération suivante.
- L’instruction break permet de stopper complètement l’exécution d’une boucle et
sortir à un moment donné.
 Présentation des fonctions JavaScript prédéfinies :
Les fonctions prédéfinies en JavaScript sont des méthodes. Une méthode est tout
simplement le nom donné à une fonction définie au sein d’un objet.
Les fonctions personnalisées :
Pour définir une fonction, on va utiliser le mot clef function suivi du nom que l’on souhaite
donner à notre fonction puis d’un couple de parenthèses dans lesquelles on peut
éventuellement définir des paramètres et finalement d’un couple d’accolades dans
lesquelles on va placer le code de notre fonction.
Exemple :
function multiplication (nombre1, nombre2)
{
return nombre1 + ' * ' + nombre2 + ' = ' + (nombre1 * nombre2) ;}

function aleatoire()
{return Math.random() * 100; }
La notion de portée des variables :
• La « portée » d’une variable désigne l’espace du script dans lequel elle va être
accessible. En effet, toutes nos variables ne sont pas automatiquement disponibles à
n’importe quel endroit dans un script et on ne va donc pas toujours pouvoir les
utiliser.
• En JavaScript, il n’existe que deux espaces de portée différents : l’espace global et
l’espace local.
• Une variable définie dans l’espace global d’un script (en dehors de toute fonction) va
être accessible à travers tout le script, même depuis une fonction. En revanche, une
variable définie dans une fonction n’est accessible que dans cette même fonction et
ne peut pas être manipulée depuis l’espace global du script.
• Dans une fonction une variable déclarée avec var sera visible par tout le code de la
fonction tandis qu’une variable déclarée avec let n’est visible que par le bloc où elle
est déclarée et dans les blocs que le bloc contient.

• Remarque : l’instruction return met fin à l’exécution d’une fonction, ce qui signifie
que toutes les autres opérations qui suivent une instruction return dans une fonction
seront ignorées.
• function div(a, b){
if(b == 0){
 return 'Divison par 0 impossible';
}else{
return a / b;
alert('Ce message ne s\’affiche jamais !');
}
}
Qu’est-ce qu’une fonction anonyme et quels sont les cas d’usage ?
On utilisera les fonctions anonymes lorsqu’on n’a pas besoin d’appeler notre fonction par son nom
c’est-à-dire lorsque le code de notre fonction n’est appelé qu’à un endroit dans notre script et n’est
pas réutilisé.

Exemple :
• function(){
alert('Alerte exécutée par une fonction anonyme');
}

Comment appeler une fonction qui n’a pas de nom ?

Exécuter une fonction anonyme en utilisant une variable

Let alerter = function(){

alert('Alerte exécutée par une fonction anonyme');
};

Pour exécuter le code de la fonction anonyme qu’elle contient, il va falloir écrire le nom de la
variable suivi d’un couple de parenthèses.

alerter() ;

Auto-invoquer une fonction anonyme

Pour créer une fonction auto-invoquée à partir d’une fonction, il va tout simplement falloir rajouter
un couple de parenthèses autour de la fonction et un second après le code de la fonction.

Exemple
(function(){alert('Alerte exécutée par une fonction anonyme');})() ;
 Création d’objets en JavaScript
• Il existe 4 façons de créer des objets.

• Par objet littéral

• En créant une instance d’objet directement (en utilisant le mot clé new)

• En utilisant un constructeur d’objet (en utilisant le mot clé new)

• Avec des classes

Par objet littéral

• object={propriété1:valeur1,propriété2:valeur2.....propriétéN:valeurN}

Exemple

Let pers={

nom: "Alami",

Prenom: "Salim",

Age: 25 }

En créant une instance d’objet directement

let objectname=new Object();

Ici, le mot-clé new est utilisé pour créer un objet.

var emp=new Object();

emp.id=103;

emp.nom="Alami Ahmed";

emp.salaire=7000;

document.write(emp.id+" "+emp.nom+" "+emp.salaire);

En utilisant un constructeur d’objet

Il s’agit d’une fonction avec des arguments. Chaque valeur d’argument peut être assignée dans
l’objet actuel à l’aide de ce mot clé.

Le mot-clé this fait référence à l’objet actuel.

function emp(id,nom,salaire){

this.id=id;
this.nom=nom;

this.salaire=salaire;

e=new emp(103, "Alami Ahmed",50000);

document.write(e.id+" "+e.nom+" "+e.salaire);

Exemple :
<script>

function emp(id,nom,salaire){

this.id=id;

this.nom=nom;

this.salaire=salaire;

this.affiche=function(){document.write("Bonjour " +nom); }

this.changerSalaire=changerSalaire;

function changerSalaire(autreSalaire){

this.salaire=autreSalaire; }

e=new emp(103, "Alami Ahmed",40000);

e.affiche();

document.write(e.id+" "+e.nom+" "+e.salaire);

e.changerSalaire(5000);

document.write("<br>"+e.id+" "+e.nom+" "+e.salaire);

</script>

Accès et modification des propriétés d’un objet

Notation avec point

• Let ppte = objet.propriété; //Consulter

• objet.propriété = valeur; //définir

Notation avec crochets

• Let ppte= objet[nom_de_propriété];

• objet[nom_de_propriété]=valeur;
 Types JavaScript
Le JavaScript possède deux grandes catégories de types de données :

Les valeurs primitives : une valeur qui n’est pas un objet et qui ne peut pas être modifiée.

 string ou « chaine de caractères » en français ;

 number ou « nombre » en français ;

 boolean ou « booléen » en français ;

 undefined ou « indéfini » en français ;

Les objets.

 object ou « objet » en français ;

 function ;

Différences

Objets Valeurs primitives

on va tout à fait pouvoir modifier les

membres d’un objet. La chaine de caractères stockée n’aura
pas été modifiée
les valeurs primitives sont passées et
comparées par valeur que les objets sont passés et comparés
par référence.

En JavaScript il y a les objets natifs représentent les valeurs primitives (Number pour
number …) et les objets prédéfinis (Math , Array, RegExp …
 Objet natif
String
L’objet String gère les chaînes de caractères. Le constructeur String () possède deux propriétés et une
trentaine de méthodes.

Propriétés et méthodes de l’objet String

La propriété length va nous permettre d’obtenir la longueur d’une chaine de caractères.

méthode Définition
startsWith() La méthode startsWith() permet de déterminer si une chaine
commence par une certaine sous chaine (ou expression). Si c’est le
cas, cette méthode renvoie true. Dans le cas contraire, c’est le
booléen false qui est renvoyé.

endsWith() La méthode endsWith() permet de déterminer si une chaine se

termine par une certaine sous chaine. Elle va fonctionner
exactement de la même manière que startsWith().

substring () La méthode substring() retourne une sous-chaîne de la chaîne

courante à partir d’un indice de départ.
Cette méthode demande un indice de départ en argument
obligatoire qui va servir à indiquer la position de départ de la sous-
chaine. On va également pouvoir passer un deuxième indice
facultatif pour préciser une position de fin pour notre sous-chaine.
Remarque : Notez que dans le cas où on fournit une position de
départ qui se situe après la position de fin, la
méthode substring() intervertira automatiquement les deux
valeurs.

indexOf La méthode indexOf() permet de déterminer la position de la

première occurrence d’un caractères ou d’une chaine de
caractères dans une chaîne de caractères de base.
Cette méthode va prendre l’expression à rechercher dans la
chaine de caractères en argument et va renvoyer la position à
laquelle cette expression a été trouvée la première fois dans la
chaine si elle est trouvée ou la valeur -1 si l’expression n’a pas été
trouvée dans la chaine.
On va également pouvoir passer un deuxième argument optionnel
à indexOf() qui correspond à l’endroit où on souhaite faire
démarrer la recherche dans la chaine. Par défaut, la recherche se
fait dans toute la chaine.
Attention : la méthode indexOf() est sensible à la casse, ce qui
signifie qu’une lettre majuscule et une lettre minuscule
correspondent à deux entités différentes pour elle.

lastIndexOf La méthode lastIndexOf() va fonctionner exactement de la même

manière que indexOf() à la différence près que c’est la position de
la dernière occurrence de l’expression cherchée qui va être
renvoyée (ou -1 si l’expression n’est pas trouvée dans la chaine).
charAt charAt renvoie le caractère présent à une certaine position. Par
exemple, chaine="Bonjour!";alert(chaine.charAt(5)); renvoie « u
».

charCodeAt charCodeAt renvoie le code Unicode du caractère présent à une

certaine position. Par
exemple, chaine="Bonjour!";alert(chaine.charCodeAt(5)); renvoi
e « 117 ».

fromCharCode fromCharCode renvoie une chaîne correspondant à la séquence

de codes Unicode passée en paramètre.

slice() La méthode slice() extrait une section d’une chaine de caractères

et la retourne comme une nouvelle chaine de caractères. La
chaîne de caractères de départ n’est pas modifiée.
On doit fournir en argument de départ obligatoire la position de
départ dans la chaine de caractères de départ où doit démarrer
l’extraction. On peut également passer en deuxième argument
optionnel la positon où l’extraction doit s’arrêter.
Cette méthode va donc fonctionner comme substring() à deux
différences près :
 En passant des valeurs négatives en argument à slice(), les
positions de départ et de fin d’extraction seront calculées
à partir de la fin de la chaine de caractères à partir de
laquelle on extrait ;
 En passant une position de départ plus lointaine que la
position d’arrivée à slice(), cette méthode n’inverse pas les
valeurs mais renvoie une chaine de caractères vide.
Vous pouvez également noter que la méthode slice() ne modifie
pas la chaine de caractères d’origine mais renvoie une nouvelle
chaine.

replace() La méthode replace() nous permet de rechercher une expression

dans une chaine de caractères et de la remplacer par une autre.
On va passer deux arguments à cette méthode : l’expression à
rechercher, et l’expression de remplacement.
La méthode replace() va renvoyer une nouvelle chaine de
caractères avec les remplacements faits. La chaine de caractères
de départ ne sera pas modifiée.
Notez que dans le cas où on passe une expression de type chaine
de caractères à rechercher, seule la première occurrence dans la
chaine sera remplacée. Pour pouvoir remplacer toutes les
occurrences, il faudra passer une expression régulière comme
schéma de recherche à cette méthode. Nous étudierons les
expressions régulières dans une prochaine partie.

toLowerCase La méthode toLowerCase() retourne une chaine de caractères en

minuscules.
toUpperCase A l’inverse, la méthode toUpperCase() retourne une chaine de
caractères en majuscules.ù
 Ces deux méthodes retournent une nouvelle chaine de caractères
et ne modifient pas chaine de caractères de base.

trim() La méthode trim() supprime les espaces ou les « blancs » en début

et en fin de chaîne. Cette méthode va s’avérer très pratique
lorsqu’on voudra nettoyer des données pour ensuite effectuer des
opérations dessus.
Cette méthode renvoie une nouvelle chaine de caractères sans
blancs ni au début ni à la fin. Elle ne modifie pas la chaine de
caractères de départ.

includes() La méthode includes() permet de déterminer si une chaine de

caractères est inclue dans une autre. Cette méthode prend
l’expression (la chaine) à rechercher en argument.
Si la chaine passée en argument est trouvée dans la chaine dans
laquelle on effectue la recherche, includes() renvoie le
booléen true. Dans le cas contraire, la méthode renvoie le
booléen false.
Attention : cette méthode est sensible à la casse, ce qui signifie
qu’une lettre majuscule et une lettre minuscule correspondent à
deux entités différentes pour includes().

Exercice :

• Ecrire une fonction qui permet de tester si une chaîne de caractère passée en paramètre
commence par une lettre majuscule ou minuscule entre 'a' et 'd'.

• Ecrire une fonction qui renvoie 'true' lorsque'une chaîne contient un seul caractère '@' sinon
renvoie 'false'.

• Ecrire une fonction qui renvoie 'true' lorsque'une chaîne contient au moins un chiffre sinon renvoie
'false'.

• Ecrire une fonction qui remplace les chiffre par le caractère '*' .

• Créer un script qui va utiliser ces fonctions.

Number
L’objet Number gère les nombres. Le constructeur Number() possède une dizaine de
propriétés et une dizaine de méthodes.
Propriétés Définition
MIN_VALUE et MAX_VALUE  représentent respectivement
les plus petite valeur
numérique positive et plus
grand valeur numérique qu’il
est possible de représenter
en JavaScript ;
MIN_SAFE_INTEGER et MAX_SAFE_INTEGER représentent respectivement le plus
petit et le plus grand entiers
représentables correctement ou de
façon « sûre » en JavaScript.
L’aspect « sûr » ici faire référence à
la capacité du JavaScript à
représenter exactement ces entiers
et à les comparer entre eux. Au-
delà de ces limites, les entiers
différents seront jugés égaux ;
NEGATIVE_INFINITY et POSITIVE_INFINITY servent respectivement à
représenter l’infini côté négatif et
côté positif ;

NaN représente une valeur qui n’est pas

un nombre (« NaN » est
l’abréviation de « Not a Number »)
et est équivalente à la valeur NaN

Méthodes
isFinite() La méthode isFinite() permet de déterminer si
une valeur fournie est un nombre fini. On va lui
passer en argument la valeur à tester.
Si l’argument passé est bien une valeur
finie, isFinite() renverra le booléen true. Dans le
cas contraire, cette méthode renverra la
booléen false.

isInteger() La méthode isInteger() permet de déterminer si

une valeur est un entier valide.
Si la valeur testée est bien un entier, la
méthode isInteger () renverra le booléen true.
Dans le cas contraire, cette méthode renverra la
booléen false.
Notez que si la valeur testée est NaN ou l’infini,
la méthode renverra également false.

isNaN() La méthode isNaN() permet de déterminer si la

valeur passée en argument est la
valeur NaN (valeur qui appartient au
type Number).
On va lui passer en argument la valeur qui doit
être comparée à NaN. Si la valeur passée est
bien égale à NaN, notre méthode renverra le
booléen true. Dans le cas contraire, le
booléen false sera renvoyé.

parseFloat() La méthode parseFloat() permet de convertir

une chaîne de caractères en un nombre
décimal. Pour cela, on va lui passer la chaine à
 transformer en argument et la méthode
renverra un nombre décimal en retour.
L’analyse de la chaîne s’arrête dès qu’un
caractère qui n’est pas un chiffre, un point un
est rencontré. Ce caractère et tous les suivants
vont alors être ignorés. Si le premier caractère
de la chaîne ne peut pas être converti en un
nombre, parseFloat() renverra la valeur NaN

parseInt() La méthode parseInt() permet de convertir une

chaine de caractères en un entier selon une
base et va renvoyer ce nombre en base 10. On
va lui passer deux arguments : la chaine de
caractères à convertir et la base utilisée pour la
conversion.

toFixed() La méthode toFixed() permet de formater un

nombre en indiquant le nombre de décimales
(nombre de chiffres après la virgule) qu’on
souhaite conserver.
On va indiquer en argument de cette méthode
le nombre de décimales souhaitées et notre
méthode va renvoyer une chaine de caractères
qui représente le nombre avec le nombre de
décimales souhaitées.
Dans le cas où on demande à toFixed() de
renvoyer un nombre avec moins de décimales
que le nombre de base, l’arrondi se fera à la
décimale supérieure si la décimale suivant celle
où le nombre doit être arrondi est 5 ou
supérieure à 5.

toString() La méthode toString() permet de transformer

un nombre en une chaine de caractères. On va
pouvoir lui passer une base en argument pour
formater notre nombre. Elle renverra une
chaine de caractères représentant notre
nombre.

Math

Les propriétés :
Math.E a pour valeur le nombre d’Euler (base des logarithmes naturels ou encore
exponentiel de 1), soit environ 2,718 ;

 Math.LN2 a pour valeur le logarithme naturel de 2, soit environ 0,693 ;

  Math.LN10 a pour valeur le logarithme naturel de 10, soit environ 2,302 ;

 Math.LOG2E a pour valeur le logarithme naturel de 2, soit environ 0,693;

 Math.LOG10E a pour valeur le logarithme naturel de 10, soit environ 2,302 ;

 Math.pi a pour valeur pi, soit environ 3,14159 ;

 Math.SQRT1_2 a pour valeur la racine carrée de ½, soit environ 0,707 ;

 Math.SQRT2 a pour valeur la racine carrée de 2, soit environ 1,414.

Méthodes
floor() va arrondir la valeur passée en argument
à l’entier immédiatement inférieur (ou
égal) à cette valeur.

ceil() au contraire, va arrondir la valeur passée

en argument à l’entier immédiatement
supérieur (ou égal) à cette valeur.

round() va elle arrondi la valeur passée en

argument à l’entier le plus proche. Ainsi,
si la partie décimale de la valeur passée
est supérieure à 0,5, la valeur sera
arrondie à l’entier supérieur. Dans le cas
contraire, la valeur sera arrondie à l’entier
inférieur. Dans le cas où la partie
décimale vaut exactement 0,5, la valeur
sera arrondie à l’entier supérieur (dans la
direction de l’infini positif).

trunc() va tout simplement ignorer la partie

décimale d’un nombre et ne retourner que
sa partie entière.

random() permet de générer un nombre décimal

compris entre 0 (inclus) et 1 (exclu) de
manière pseudo-aléatoire.
On va ensuite pouvoir multiplier son
résultat par un autre nombre afin d’obtenir
un nombre pseudo-aléatoire compris dans
l’intervalle de notre choix.

min() envoie le plus petit nombre d’une série de

nombres passés en arguments.

max() au contraire, va renvoyer le plus grand

nombre d’une série de nombres passés
en arguments.
n’est pas un nombre et ne peut pas être
 convertie en nombre, alors ces méthodes
renverront la valeur NaN.

Méthode Description

getDate() Renvoie le numéro du jour (1-31)

getDay() Renvoie le numéro du jour de la semaine (0-6)

getFullYear() Renvoie l'année en 4 chiffres (yyyy)

getHours() Renvoie l'heure (0-23)

getMilliseconds() Renvoie les millisecondes (0-999)

getMinutes() Renvoie les minutes (0-59)

getMonth() Renvoie le nombre (0-11)

getSeconds() Renvoie les secondes (0-59)

getTime() Renvoie les secondes depuis 1970

DOM
ABSENTE :

Correction d’un exercice que je dois le récupérer

<div>
<p id="para1" style="color:red" title="text"> paragraphe 1</p>
<p id="vide"></p>

</div>
<script>
let p1=document.getElementById("para1")
let p2=document.getElementById("vide")
if (p1.hasAttribute)
let x=p1.attributes
for (let i of x)
{p2.innerHTML=+i.name+"",+i.value+<br/>}

</script>

Un evenement est une action perceptible acceptee par javascript

Programmation évènementielle l’ordre d’exécution dépend de l’utilisateur il y a un user qui va
selectionner un autre juste voir … exemple de site d’achat

Les évènements lies à la souris

Les évènements liés au clavier
Les évènements lies au formulaire

Un gestionnaire des évènements

Chaque élément html a un attribut d’évènement, un attribut par évènement

lesparas[0].onbdlclick=function(){this.textContent="blablabla"}

dom0 a un defaut quand peut excuter que le dernier element

cet exemple :
letparas[0].onclick=function(){alert("bienvenue")};
lesparas[0].onclick=function(){mefbis(this)}
letparas[0].onclick=function(){alert("au revoir")};

gestion des evenement avec dom2

methode addeventlistener

remove

objet event :
btn[2].addEventListener("dblclick",
function(e){alert(e.type+""+e.target.textContent)})
vV rR oO bB g G

Voici un résumé des éléments essentiels pour réviser les concepts de JavaScript concernant les API et
le DOM :

API JavaScript

 Définition : Une API (Application Programming Interface) est un ensemble de codes

permettant à un logiciel de fournir des services à d'autres logiciels. Elle simplifie des
opérations complexes.

 Catégories :

 API intégrées aux navigateurs web : Utilisées directement dans le développement

web, comme l’API DOM pour manipuler HTML et CSS, l’API Geolocation pour obtenir
des données de localisation, et l’API Canvas pour dessiner des graphiques.

 API externes : Proposées par des services comme Google Maps pour intégrer des
cartes, Twitter pour afficher des tweets, ou YouTube pour intégrer des vidéos.
BOM (Browser Object Model)

 Interface Window : Représente la fenêtre du navigateur. Implémente des méthodes comme

alert(), prompt(), setTimeout(), et setInterval().

 Objets du BOM :

 Navigator : Information sur le navigateur, utilisé avec l’API Geolocation.

 History : Manipulation de l'historique du navigateur.

 Location : Information sur l’URL de la page.

 Screen : Propriétés de l'écran affichant la fenêtre.

 Document : Représentation de la page web.

DOM (Document Object Model)

 Définition : Interface de programmation pour les documents HTML/XML, représentant la

page web sous forme d'arbre.

 Fonctionnalités :

 Modifier tous les éléments et attributs HTML.

 Modifier les styles CSS.

 Ajouter ou supprimer des éléments et attributs HTML.

 Réagir aux événements HTML existants et en créer de nouveaux.

Types de nœuds DOM

 ELEMENT_NODE : Représente un élément HTML (balise).

 TEXT_NODE : Représente un texte.

Relations entre les nœuds

 Hiérarchie : Les nœuds sont organisés en parent/enfant/sibling.

 Accès aux nœuds :

 ParentNode : Accès au parent d'un nœud.

 ChildNodes : Accès aux enfants d'un nœud.

 Siblings : Accès aux frères d'un nœud.

Accès et modification des éléments

 Par ID : getElementById()

 Par classe : getElementsByClassName()

 Par tag : getElementsByTagName()

 Par attribut name : getElementsByName()

  Par sélecteur CSS : querySelector() pour le premier élément, querySelectorAll() pour tous les
éléments correspondants.

Propriétés et méthodes utiles

 innerHTML : Contenu HTML interne d’un élément.

 outerHTML : Contenu HTML interne et de l’élément lui-même.

 textContent : Contenu textuel d’un nœud.

 style : Modification des styles CSS en ligne.

 getComputedStyle() : Obtenir les styles calculés d’un élément.

Manipulation des attributs

 Tester : hasAttribute(), hasAttributes()

 Récupérer : getAttribute(), getAttributeNames()

 Définir : setAttribute()

 Supprimer : removeAttribute()

Ajouter, modifier ou supprimer des éléments

 Créer des nœuds : createElement() pour un élément HTML, createTextNode() pour du texte.

 Insérer des nœuds :

 prepend() : Avant le premier enfant.

 append() : Après le dernier enfant.

 appendChild() : Ajouter comme dernier enfant d’un nœud parent.

En maîtrisant ces concepts et méthodes, vous serez bien préparé pour manipuler efficacement le
DOM avec JavaScript et utiliser diverses API intégrées pour enrichir vos pages web.

Créer de nouveaux nœuds et les ajouter dans l’arborescence du DOM

Création d’un nœud

Pour ajouter des éléments dans un document avec JavaScript, il faut suivre deux étapes : créer un
nouveau nœud et l'insérer à une place spécifique dans le DOM.

Créer un nœud Element ou un nœud Text

 createElement() : Crée un nouvel élément HTML.

 Exemple : document.createElement('p') crée un élément <p>.

 textContent : Propriété utilisée pour insérer du texte dans un nœud élément.

 createTextNode() : Crée directement un nœud de type texte.

 Exemple : document.createTextNode('Texte').
Insérer un nœud dans le DOM

Il existe différentes méthodes pour insérer des nœuds, chacune variant selon la position de
l’insertion :

 prepend() : Insère un nœud avant le premier enfant d'un nœud parent.

 append() : Insère un nœud après le dernier enfant d'un nœud parent.

 appendChild() : Ajoute un nœud en tant que dernier enfant d'un nœud parent.

Différences entre append() et appendChild() :

 append() peut ajouter des chaînes de caractères et plusieurs nœuds, tandis que
appendChild() n'accepte que des objets de type Node et un seul nœud à la fois.

 append() n’a pas de valeur de retour, tandis que appendChild() retourne l’objet ajouté.

 insertBefore() : Insère un nœud avant un nœud de référence spécifié.

 Exemple : parentNode.insertBefore(newNode, referenceNode).

Méthodes spécifiques de l’interface Element :

 insertAdjacentElement() : Insère un nœud élément à une position spécifiée par rapport à

l’élément courant.

 insertAdjacentText() : Insère un nœud texte à une position donnée.

 insertAdjacentHTML() : Insère des nœuds créés à partir d’une chaîne de caractères HTML.

Positions possibles pour insertAdjacent()* :

 beforebegin : Avant l’élément.

 afterbegin : Avant le premier enfant de l’élément.

 beforeend : Après le dernier enfant de l’élément.

 afterend : Après l’élément.

 Méthodes before() et after() : Insèrent un nœud avant ou après un enfant d’un nœud
parent, mais sont moins supportées par tous les navigateurs.

Déplacer un nœud dans le DOM

 Utiliser appendChild() ou insertBefore() avec un nœud déjà existant déplace ce nœud à une
nouvelle position dans le DOM.

Cloner ou remplacer un nœud dans le DOM

 cloneNode() : Clone un nœud.

 cloneNode(true) clone également les enfants du nœud.

 cloneNode(false) clone uniquement le nœud spécifié.

 replaceChild() : Remplace un nœud par un autre.

 Exemple : parentNode.replaceChild(newNode, oldNode).

Supprimer un nœud du DOM

 removeChild() : Supprime un nœud enfant et retourne le nœud retiré.

 Exemple : parentNode.removeChild(childNode).

 remove() : Retire un nœud de l’arborescence.

 Supportée par la plupart des navigateurs modernes.

Ce résumé couvre les bases de la manipulation des nœuds dans le DOM avec JavaScript, permettant
de créer, insérer, déplacer, cloner, remplacer et supprimer des éléments efficacement.

Les événements

Introduction à la programmation événementielle

Les programmes JavaScript que nous avons vus s'exécutaient automatiquement au chargement de la
page, suivant un ordre d'exécution fixe. Pour rendre la page plus interactive et réagir aux actions des
utilisateurs (clics, remplissage de formulaires, etc.), on utilise la programmation événementielle.
Cette méthode permet d'exécuter du code en réponse à des événements déclenchés par les actions
de l'utilisateur.

En JavaScript, un événement est une action détectable et à laquelle on peut répondre en attachant
du code spécifique. Voici les deux caractéristiques d'un événement :

 Écoute : On peut détecter l'action grâce à un système d'écoute.

 Réponse : On peut attacher un code qui s'exécute lorsque l'événement se produit.

Principaux événements

Les événements peuvent être déclenchés par diverses actions. Voici quelques exemples courants :

Événements liés à la souris :

 click : Cliquer sur l'élément.

 dblclick : Double-cliquer sur l'élément.

 mouseover : Le curseur entre sur l'élément.

 mouseout : Le curseur quitte l'élément.

 mousedown : Appuyer sur le bouton gauche de la souris.

 mouseup : Relâcher le bouton gauche de la souris.

 mousemove : Déplacer le curseur sur l'élément.

Événements liés au clavier :

 keydown : Appuyer sur une touche de clavier.

 keyup : Relâcher une touche de clavier.

 keypress : Appuyer puis relâcher une touche de clavier.

Événements liés aux formulaires :

  focus : Cibler l'élément.

 blur : Annuler le ciblage de l'élément.

 change : Changer la valeur d'un élément de formulaire.

 select : Sélectionner le contenu d'un champ de texte.

 submit : Envoyer le formulaire.

 reset : Réinitialiser le formulaire.

Gestion des événements en JavaScript

Il existe trois méthodes principales pour gérer les événements en JavaScript :

1. Utiliser des attributs HTML de type événement (non recommandé).

2. Utiliser des propriétés JavaScript liées aux événements.

3. Utiliser la méthode addEventListener() (recommandée).

Attributs de gestion d'événements (DOM-0)

Ces attributs permettent de gérer des événements de base directement dans le HTML, comme
onclick, onmouseover, etc.

Exemple :
<p onclick="alert('Bonjour les TDI')">
<span id="clickme">Cliquez-moi !</span>
<script>
var element = document.getElementById('clickme');
element.onclick = function() { alert("Vous m'avez cliqué !"); };
</script>

Limitations du DOM-0 :

 Ancienne méthode.

 Ne permet pas de gérer plusieurs événements du même type.

Méthode addEventListener (DOM-2)

La méthode addEventListener ajoute un gestionnaire pour un événement particulier sur un élément

du DOM. Elle prend deux paramètres : le type de l'événement et la fonction qui gère l'événement.

Exemple :
var boutonElt = document.getElementById("bouton");
boutonElt.addEventListener("click", function () { alert("clic"); });

Supprimer un gestionnaire d’événements : Utiliser removeEventListener avec le type d’événement

et le nom de la fonction.
let b1 = document.querySelector('button');
let d1 = document.querySelector('div');
function changeCouleur(){
this.style.backgroundColor = 'orange';
}
b1.addEventListener('click', function(){ alert('Bouton cliqué') });
d1.addEventListener('mouseover', changeCouleur);
d1.removeEventListener('mouseover', changeCouleur);

Objet Event

Lorsqu'un événement se déclenche, un objet Event est créé. Cet objet contient des informations sur
l'événement et permet d'interagir avec celui-ci.

Exemple :
document.getElementById("bouton").addEventListener("click", function (e) {
alert("Evènement : " + e.type + " texte de la cible : " + e.target.textContent);
});

Exemples supplémentaires :

 Gestion de l'appui sur une touche de clavier :

Javascript

document.addEventListener("keypress", function (e) {

console.log("Vous avez appuyé sur la touche " + String.fromCharCode(e.charCode));
});

 Afficher des informations sur un événement clavier :

 function infosClavier(e) {
 alert("Evènement clavier : " + e.type + ", touche : " + e.keyCode);
 }
 document.addEventListener("keydown", infosClavier);
 document.addEventListener("keyup", infosClavier);


Propagation des événements

Les événements se propagent dans le DOM de manière hiérarchique. Un événement déclenché sur
un nœud enfant va se propager vers son nœud parent, et ainsi de suite jusqu'à la racine du DOM.
Cela se passe en deux phases :

 Phase de capture : L'événement descend dans l'arborescence du DOM.

 Phase de bouillonnement : L'événement remonte dans l'arborescence du DOM.

Exemple de gestion de la propagation :

Html
<p id="para">Un paragraphe avec un <button id="propa"> bouton </button> à l'intérieur</p>
<script>
document.addEventListener("click", function () { alert("Gestionnaire document"); });
document.getElementById("para").addEventListener("click", function() { alert("Gestionnaire
paragraphe"); });
document.getElementById("propa").addEventListener("click", function () {
alert("Gestionnaire bouton"); });
</script>
Choisir la phase de déclenchement

Pour déclencher un gestionnaire d’événement durant la phase de capture, passez true comme
troisième argument à addEventListener.

Exemple :

javascript
d1.addEventListener('click', function(){ alert('div cliqué') }, true);

Stopper la propagation d’un événement

Utiliser stopPropagation() pour stopper la propagation d’un événement.

d1p1.addEventListener('click', function(e){
alert('Paragraphe cliqué - Arrêt de la propagation');
e.stopPropagation();
});

Inhiber l’action par défaut d’un événement

Utiliser preventDefault() pour empêcher l’action par défaut du navigateur.

document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
});

Formulaires & JavaScript

Les zones de texte

Les zones de texte permettent aux utilisateurs de saisir du texte sur une ou plusieurs lignes. Une zone
monoligne correspond à la balise HTML <input type="text">, tandis qu'une zone multiligne est
définie avec la balise <textarea>.

Accès à la valeur saisie

En JavaScript, on accède à la valeur d'une zone de texte en utilisant la propriété value de l'élément
du DOM correspondant. Modifier cette propriété change la valeur affichée dans la zone de texte.

Gestion du focus

Lorsqu'une zone de texte est la cible de saisie, elle possède le focus. Cliquer sur une zone de saisie
déclenche un événement de type focus. Le changement de cible de saisie provoque un événement
de type blur sur la zone qui avait le focus.
Exemple d'événements focus et blur

javascript

Copier le code

// Affiche 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 () { document.getElementById("aidePseudo").textContent = ""; });

Les éléments d'options

Ces éléments permettent à l'utilisateur de faire un choix parmi plusieurs possibilités et déclenchent
un événement de type change lorsque l'utilisateur modifie son choix.

Cases à cocher

Une case à cocher est définie avec <input type="checkbox">. Lorsque la valeur de la case change,
l'objet Event associé dispose d'une propriété booléenne checked indiquant l'état de la case.

Exemple de gestion des événements change sur une case à cocher

javascript

Copier le code

// Affichage de la demande de confirmation d'inscription

document.getElementById("confirmation").addEventListener("change", function (e)
{ console.log("Demande de confirmation : " + e.target.checked); });

Boutons radio

Les boutons radio permettent un seul choix parmi plusieurs possibilités. Ils sont créés avec des
balises <input type="radio"> ayant le même attribut name et des attributs value différents.

Exemple de gestion des événements change sur des boutons radio

javascript

Copier le code

// 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); }); }

Listes déroulantes

Une liste déroulante est construite avec une balise <select> contenant des balises <option> pour
chaque choix possible.

Exemple de gestion des événements change sur une liste déroulante

javascript

Copier le code
// Affichage du code de nationalité choisi
document.getElementById("nationalite").addEventListener("change", function (e)
{ console.log("Code de nationalité : " + e.target.value); });

Le formulaire comme élément du DOM

Accès aux champs du formulaire

La balise <form> correspond à un élément du DOM avec une propriété elements regroupant les
champs de saisie.

Exemple d'accès aux champs du formulaire

javascript

Copier le code

var form = document.querySelector("form");

console.log("Nombre de champs de saisie : " + form.elements.length);

console.log(form.elements[0].name);

// Affiche "pseudo" console.log(form.elements.mdp.type);

// Affiche "password"

Soumission du formulaire

Un formulaire est soumis lorsque l'utilisateur clique sur le bouton d'envoi (<input type="submit">).
Un événement de type submit est alors déclenché.

Exemple de gestion de l'événement submit

javascript

Copier le code

form.addEventListener("submit", function (e) { var pseudo = form.elements.pseudo.value; var mdp =

form.elements.mdp.value; var courriel = form.elements.courriel.value; console.log("Vous avez choisi
le pseudo " + pseudo + ", le mot de passe " + mdp + " et le courriel " + courriel); if
(form.elements.confirmation.checked) { console.log("Vous avez demandé une confirmation
d'inscription par courriel"); } else { console.log("Vous n'avez pas demandé de confirmation
d'inscription par courriel"); } switch (form.elements.abonnement.value) { case "abonewspromo":
console.log("Vous êtes abonné(e) à la newsletter et aux promotions"); break; case "abonews":
console.log("Vous êtes abonné(e) à la newsletter"); break; case "aborien": console.log("Vous n'êtes
abonné(e) à rien"); break; default: console.log("Erreur : code d'abonnement non reconnu"); } switch
(form.elements.nationalite.value) { case "FR": console.log("Vous êtes français(e)"); break; case "BE":
console.log("Vous êtes belge"); break; case "SUI": console.log("Vous êtes suisse"); break; default:
console.log("Erreur : code de nationalité non reconnu"); } e.preventDefault(); // Annulation de l'envoi
des données });

Validation des données saisies

Validation pendant la saisie

La validation pendant la saisie utilise les événements input, déclenchés à chaque modification de la
valeur d'une zone de saisie.

Exemple de vérification de la longueur du mot de passe

javascript

Copier le code

document.getElementById("mdp").addEventListener("input", function (e) { var mdp = e.target.value;

var longueurMdp = "faible"; var couleurMsg = "red"; if (mdp.length >= 8) { longueurMdp =
"suffisante"; couleurMsg = "green"; } else if (mdp.length >= 4) { longueurMdp = "moyenne";
couleurMsg = "orange"; } var aideMdpElt = document.getElementById("aideMdp");
aideMdpElt.textContent = "Longueur : " + longueurMdp; aideMdpElt.style.color = couleurMsg; });

Validation à la fin de la saisie

La fin de la saisie correspond à la perte du focus, déclenchant un événement de type blur.

Exemple de contrôle du courriel en fin de saisie

javascript

Copier le code

document.getElementById("courriel").addEventListener("blur", function (e) { var validiteCourriel = "";

if (e.target.value.indexOf("@") === -1) { validiteCourriel = "Adresse invalide"; }
document.getElementById("aideCourriel").textContent = validiteCourriel; });

Utilisation d'une expression régulière

Les expressions régulières permettent de définir des motifs pour vérifier des chaînes de caractères.

Exemple de contrôle du courriel avec une expression régulière

javascript

Copier le code

document.getElementById("courriel").addEventListener("blur", function (e) { var regexCourriel = /.

+@.+\..+/; var validiteCourriel = ""; if (!regexCourriel.test(e.target.value)) { validiteCourriel = "Adresse
invalide"; } document.getElementById("aideCourriel").textContent = validiteCourriel; });

Les expressions régulières offrent des possibilités puissantes pour valider les données saisies dans un
formulaire, améliorant ainsi l'expérience utilisateur en détectant et signalant immédiatement les
erreurs.
<!DOCTYPE html>
<html>
<head>
<title>Formulaire et JavaScript</title>
</head>
<body>
<!-- Formulaire HTML -->
<form id="formulaire">
<label for="pseudo">Pseudo :</label>
<input type="text" name="pseudo" id="pseudo" required>
<span id="aidePseudo"></span>
 <br>

<label for="mdp">Mot de passe :</label>

<input type="password" name="mdp" id="mdp" required>
<span id="aideMdp"></span>
<br>

<label for="courriel">Courriel :</label>

<input type="email" name="courriel" id="courriel" required>
<span id="aideCourriel"></span>
<br>

<input type="checkbox" name="confirmation" id="confirmation">

<label for="confirmation">M'envoyer un courriel de confirmation</label>
<br>

<label for="abonnement">Abonnement :</label>

<input type="radio" name="abonnement" id="abonewspromo" value="abonewspromo">
<label for="abonewspromo">M'abonner à la newsletter et aux promotions</label>
<br>
<input type="radio" name="abonnement" id="abonews" value="abonews">
<label for="abonews">M'abonner uniquement à la newsletter</label>
<br>
<input type="radio" name="abonnement" id="aborien" value="aborien" checked>
<label for="aborien">Ne pas m'abonner</label>
<br>

<label for="nationalite">Nationalité :</label>

<select name="nationalite" id="nationalite">
<option value="FR" selected>Française</option>
<option value="BE">Belge</option>
<option value="SUI">Suisse</option>
<option value="XX">Autre</option>
</select>
<br>

<input type="submit" value="Envoyer">

<input type="reset" value="Annuler">
</form>

<script>
// Accès aux éléments du formulaire
var pseudoElt = document.getElementById("pseudo");
var mdpElt = document.getElementById("mdp");
var courrielElt = document.getElementById("courriel");
var confirmationElt = document.getElementById("confirmation");
var form = document.getElementById("formulaire");

// Gestion du focus et du blur pour le pseudo

pseudoElt.addEventListener("focus", function () {
document.getElementById("aidePseudo").textContent = "Entrez votre pseudo";
});

pseudoElt.addEventListener("blur", function () {
document.getElementById("aidePseudo").textContent = "";
});
 // Affichage d'un message contextuel pour le mot de passe en fonction de sa
longueur
mdpElt.addEventListener("input", function (e) {
var mdp = e.target.value;
var longueurMdp = "faible";
var couleurMsg = "red"; // Longueur faible => couleur rouge

if (mdp.length >= 8) {
longueurMdp = "suffisante";
couleurMsg = "green"; // Longueur suffisante => couleur verte
} else if (mdp.length >= 4) {
longueurMdp = "moyenne";
couleurMsg = "orange"; // Longueur moyenne => couleur orange
}

var aideMdpElt = document.getElementById("aideMdp");

aideMdpElt.textContent = "Longueur : " + longueurMdp; // Texte de l'aide
aideMdpElt.style.color = couleurMsg; // Couleur du texte de l'aide
});

// Contrôle du courriel en fin de saisie

courrielElt.addEventListener("blur", function (e) {
// Correspond à une chaîne de la forme xxx@yyy.zzz
var regexCourriel = /.+@.+\..+/;
var validiteCourriel = "";

if (!regexCourriel.test(e.target.value)) {
validiteCourriel = "Adresse invalide";
}

document.getElementById("aideCourriel").textContent = validiteCourriel;
});

// Affichage de la demande de confirmation d'inscription

confirmationElt.addEventListener("change", function (e) {
console.log("Demande de confirmation : " + e.target.checked);
});

// Gestion des changements de choix de l'abonnement

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);
});
}

// Affichage du code de nationalité choisi

document.getElementById("nationalite").addEventListener("change", function (e) {
console.log("Code de nationalité : " + e.target.value);
});

// Gestion de la soumission du formulaire

form.addEventListener("submit", function (e) {
var pseudo = form.elements.pseudo.value;
var mdp = form.elements.mdp.value;
var courriel = form.elements.courriel.value;
console.log("Vous avez choisi le pseudo " + pseudo + ", le mot de passe " + mdp
+ " et le courriel " + courriel);
 if (form.elements.confirmation.checked) {
console.log("Vous avez demandé une confirmation d'inscription par
courriel");
} else {
console.log("Vous n'avez pas demandé de confirmation d'inscription par
courriel");
}

switch (form.elements.abonnement.value) {
case "abonewspromo":
console.log("Vous êtes abonné(e) à la newsletter et aux promotions");
break;
case "abonews":
console.log("Vous êtes abonné(e) à la newsletter");
break;
case "aborien":
console.log("Vous n'êtes abonné(e) à rien");
break;
default:
console.log("Erreur : code d'abonnement non reconnu");
}

switch (form.elements.nationalite.value) {
case "FR":
console.log("Vous êtes français(e)");
break;
case "BE":
console.log("Vous êtes belge");
break;
case "SUI":
console.log("Vous êtes suisse");
break;
default:
console.log("Erreur : code de nationalité non reconnu");
}

e.preventDefault(); // Annulation de l'envoi des données

});
</script>
</body>
</html>

Explications :

 Gestion du focus et du blur pour le pseudo : Affiche et cache un message contextuel lors de
la saisie du pseudo.

 Validation en temps réel du mot de passe : Change le message et la couleur en fonction de

la longueur du mot de passe.

 Validation du courriel à la fin de la saisie : Utilise une expression régulière pour vérifier la
validité du courriel.

 Gestion de la case à cocher "confirmation" : Affiche l'état de la case à cocher dans la

console.
  Gestion des boutons radio pour l'abonnement : Affiche le choix de l'abonnement dans la
console.

 Gestion de la liste déroulante pour la nationalité : Affiche le code de nationalité sélectionné

dans la console.

 Soumission du formulaire : Affiche toutes les informations saisies ou choisies et annule

l'envoi des données pour les afficher dans la console.

exercice:

un salarier a un matricule qui une fois definie ne peux plus etre modifier en plus il est toujours positif,
un nom et un salaire le salaire doit etre superieur a trois mille, faire la classe salarier avec un
constructeur et les proprieties notes bien lever une exception chaque fois qu’une donnee et
incorrect