Scribd
Importer
17 vues66 pages

02JavaScript TypesDonneesAvecExercices

Transféré par

hibapisc
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
17 vues66 pages

02JavaScript TypesDonneesAvecExercices

Transféré par

hibapisc
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 66

JAVASCRIPT

Notions Fondamentales
Préparé par : Larbi HASSOUNI

1
Identificateurs
• Un identifiant est le nom d'une :
• variable,
• fonction,
• paramètre
• classe.
• Un identifiant se compose d'un ou plusieurs caractères au
format suivant:
• Le premier caractère doit être une lettre (a-z ou A-Z), un trait de
soulignement (_) ou un signe dollar ($).
• Les autres caractères peuvent être des lettres (a-z, A-Z), des
chiffres (0-9), des traits de soulignement (_) et des signes dollar
($).
• Notez que lettre dans ce contexte n'est pas limitée au
caractère ASCII mais peut inclure un ASCII étendu ou
Unicode bien que ce ne soit pas recommandé.

2
• Il est recommandé d'utiliser la casse de chameau pour les
identificateurs, ce qui signifie que la première lettre est en
minuscule et que chaque mot supplémentaire commence
par une majuscule. Pour une classe, la 1ère lettre du 1er mot
est également en majuscule.
• Exemple d'identificateurs corrects:
• tauxTva
• unEtudiant
• prixAchat
• Exemple d'indentificateurs incorrects
• taux Tva
• 9disques
• £prix

• Un nom de vriable ne doit pas être un mot réservé du


langage JavaScript.

3
JavaScript est sensible à la casse
• Tout en JavaScript, y compris les variables, les noms de fonction, les
noms de classe et les opérateurs, est sensible à la casse.
• Cela signifie que les identificateurs taux et Taux sont différents.

4
Mots clés
• JavaScript définit une liste de mots clés qui ont des utilisations
spéciales.
• Vous ne pouvez pas utiliser les mots clés comme identifiants.
• La liste des mots clés JavaScript complets est la suivante:
break export super
case extends switch
catch finally typeof
class for this
const function throw
continue if try
debugger import var
default in void
delete instanceof while
do new with
else return yield 5
Commentaires
• JavaScript prend en charge deux types de commentaires :
• sur une seule ligne
• sur plusieurs lignes
• Un commentaire sur une seule ligne commence par deux
caractères de barre oblique (//), par exemple:
//Ceci est un commentaire sur une ligne
• Un commentaire sur plusieurs lignes commence par une barre
oblique suivi d' un astérisque (/ *) et se termine par l'opposé
(* /) comme suit:
/*
*Ceci est un commentaire
*Sur plusieurs lignes
*/
• Pour une meilleure lisibilité, Il est recommandé d'utiliser un
astérisque pour commencer chaque ligne de commentaire.
6
Variables en JavaScript
• JavaScript est un langage faiblement typé, c'est-à-dire qu'une même
variable peut contenir des valeurs de types différents à des moments
du temps d'exécution.
• Les variables sont juste des espaces réservés nommés pour contenir
des valeurs.

7
Déclaration d'une variable JavaScript à l'aide du mot clé var

• Pour déclarer une variable, on utilise le mot-clé var suivi du nom de


la variable comme suit:
var <nom-variable> [= <expression>];
• Exemples
• Var message = "Bonjour";
• Var taux;
• Var a, b;
• Var c = 10, d;

8
Undefined vs. undeclared variables
• Il est important de distinguer les variables non définies
(undefined) des variables non déclarées (undeclared).
• Une variable qui a été déclarée mais n'a pas encore reçu de
valeur est non définie et a la valeur undefined.
• En revanche, une variable qui n'a pas été déclarée
(undeclared), déclenche une erreur si on cherche à l'utiliser.

L'exemple de la diapositve suivante présente cette différence

9
Undefined vs. undeclared variables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Undefined vs
Undeclared</title>
</head> Nous constatons que le système affiche
<body> la valeur undefined pour a qui a été déclarée
<h1>Undefined vs Undeclared</h1> mais non initialisé.
<script> La variable b a été déclarée et initialisée,
var a, b=10; le système affiche sa valeur 10.
console.log(a); La variable c n'a pas été déclarée, le système
console.log(b); envoie un message d'erreurs :
console.log(c) Uncaught ReferenceError : c is not defined.
</script>
</body>
</html>
10
Variables globales et locales
• En JavaScript, une variable possède une portée (scope) qui
détermine sa durée de vie et les endroits du code où elle peut être
utilisée.
• JavaScript a principalement deux portées ou étendues ou scopes:
• Scope global
• Scope fonction.
• ES6 a introduit une nouvelle portée appelée portée de bloc.
• Si vous déclarez une variable dans une fonction, JavaScript ajoute la
variable à l'étendue de la fonction. Si vous déclarez une variable en
dehors d'une fonction, JavaScript l'ajoute à la portée globale.

11
<!DOCTYPE html>
<html lang="fr">
<head> <meta charset="UTF-8">
<title>Scope d'une Variable : Global, Fonction, Bloc</title>
</head><body>
<h1>Scope d'une Variable : Global, Fonction, Bloc </h1>
<script>
var a = 10;
function myf(c, d){
var e = c + d;
{
var f = c*d; //Visible dans toute la fonction
let g = c/d;//Visible uniquement dans le bloc
}
console.log("Variable gmlobale visible dans la fonction a = " +a);
console.log("Variable locale définie avec var dans un bloc f = " +f);
// console.log("variable locale définie avec let dans un bloc g = " + g);
return e;
}
console.log("out a= " + a);
//console.log("Variable locale non visible au niveau global e = " + e);
var h = myf(10,20);console.log("h = "+h);
</script>
</body></html>

12
Redéfinition d'une variable globale à l'intérieur d'une fonction

<!DOCTYPE html>
<html lang="fr">
<head> <meta charset="UTF-8">
<title>Redéfinition d'une variable globale</title>
</head>
<body>
<script>
// variable globale
var message = "Bonjour";
function myf() {
// variable locale
var message = 'Bonsoir';
console.log(message); // Quel message?
}
myf();// Bonsoir
console.log(message); // Bonjour
</script>
</body></html>

13
Accès à une variable globale à l'intérieur d'une fonction
<!DOCTYPE html>
<html lang="fr"><head> <meta charset="UTF-8">
<title>Visibilité d'une variable globale</title>
</head><body>
<script>
var message = "Bonjour"; //Variable globale
function myf() {
message = 'Bonsoir'; //Modifier la variable globale
console.log(message); // Affiche Bonsoir
}
myf();// Affiche Bonsoir
console.log(message); // Bonsoir
</script></body></html>
Bien qu'il soit possible de faire référence à une variable globale à l'intérieur d'une
fonction, ce n'est pas recommandé. Cela est dû au fait que les variables globales sont
très difficiles à maintenir et peuvent provoquer beaucoup de confusion.

14
Mode Non-strict
• Considérons le script ci-dessous:

<!DOCTYPE html>
<html lang="fr"><head> <meta charset="UTF-8">
<title>Mode non-stric</title>
</head>
<body>
<script>
15
</script></body></html>

15
• Lorsque vous exécutez le script, il génère deux fois la chaîne Bonsoir
dans la sortie.
• Parce que lorsque nous appelons la fonction myF (), le moteur
JavaScript recherche la variable nommée message dans la portée de
la fonction.
• Puisqu'il ne trouve aucune variable déclarée avec ce nom, il passe
donc à la portée immédiatement supérieur qui est la portée globale
et demande si la variable de message a été déclarée ou non.
• Étant donné que le moteur JavaScript ne trouve aucune variable
globale nommée message, il crée une nouvelle variable avec ce nom
et l'ajoute à la portée globale.

16
Mode strict
• Pour éviter de créer accidentellement une variable globale dans une
fonction en raison de l'omission du mot-clé var, vous utilisez le mode
strict en ajoutant "use strict"; au début du fichier JavaScript (ou de la
fonction) comme suit:
"use strict";
function myF() {
message = 'Bonsoir'; // Exception ReferenceError
console.log(message);
}
myF(); // Bonsoir
console.log(message);

Il est recommandé de toujours utiliser le mode strict dans le code JavaScript pour
éliminer certaines erreurs silencieuses et accélérer l'exécution du code.

17
Mode strict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
"use strict";
function myF() {
message = 'Bonsoir'; // Exception ReferenceError
console.log(message);
}
myF(); // Bonsoir
console.log(message);
</script>
</body>
</html>

18
Hoisting des variables JavaScript
• Lors de l'exécution de code JavaScript, le moteur JavaScript passe par
deux phases:
• Analyse
• Exécution
• Dans la phase d'analyse, le moteur JavaScript déplace toutes les
déclarations de variables en haut du fichier si les variables sont
globales, ou en haut d'une fonction si les variables sont déclarées
dans la fonction.
• Dans la phase d'exécution, le moteur JavaScript attribue des valeurs
aux variables et exécute le code.

19
• Hoisting est un mécanisme qui permet au moteur JavaScript de
déplacer toutes les déclarations de variables en haut de leurs scopes,
qu'elles soient fonction ou global.
• Si vous déclarez une variable avec le mot clé var, la variable est hissée
en haut de sa portée englobante, soit globale ou fonction.
• Par conséquent, si vous accédez à une variable avant de la déclarer, la
variable est évaluée comme non définie.
• Ainsi dans l'exemple suivant:
console.log(message); // undefined
var message;
Le moteur JavaScript déplace la déclaration de la variable de message vers le haut,
donc le code ci-dessus est équivalent à ce qui suit:
var message;
console.log(message); // undefined
S'il n'y avait pas de Hoisting, on aurait obtenu l'exception ReferenceError car on fait
référence à une variable qui n'a pas été définie.

20
Hoisting des variables JavaScript
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hoisting</title> <title>Hoisting</title>
</head> </head>
<body> <body>
<script> Hoisting <script>
console.log(message); // undefined var message;
var message; console.log(message); // undefined
</script> </script>
</body> </body>
</html> </html>

21
Hoisting ne fonctionne pas pour une initialisation
• Regardons l'exemple ci-dessous.

console.log(message);
var message = "Bonsoir";

Le moteur JavaScript déplace uniquement la déclaration des variables vers le haut.


Cependant, il conserve l'affectation initiale de la variable reste intacte.
Par conséquent, le code ci-dessus est équivalent au code suivant:

var message
console.log(message);
message = "Bonsoir";

22
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hoisting ne s'applique pas aux <title>Hoisting ne s'applique pas aux
initialisations</title> initialisations</title>
</head> </head>
<body> <body>
<h1>Hoisting ne s'applique pas aux <h1>Hoisting ne s'applique pas aux
initialisations</h1> initialisations</h1>
<script> <script>
console.log(message); var message
var message = "Bonsoir"; Hoisting de la console.log(message);
</script> déclaration message = "Bonsoir";
uniquement </script>
</body>
</html> </body>
</html>

23
Déclaration d'une variable à portée de bloc : let

• Depuis ES6, vous pouvez utiliser le mot clé let pour déclarer
une ou plusieurs variables.
• Le mot clé let est similaire au mot clé var.
• Cependant, une variable déclarée à l'aide du mot clé let a
une portée de bloc, et non fonction ou global comme il est
le cas avec mot clé var.
• Un bloc en JavaScript est indiqué par des accolades ({})
comme en Java.

24
• L'exemple suivant déclare la variable tmp dans un bloc
entouré d'accolades {}.
• La variable tmp n'existe que dans le bloc. Par conséquent, si
vous la référencez en dehors du bloc, vous obtiendrez
l'exception ReferenceError

var a = 20, b = 10;


{
let tmp = a;
a = b;
b = tmp;
}
console.log(tmp); // ReferenceError

25
Tmp a une Portée bloc Tmp a une Portée global
<!DOCTYPE html>
<html lang="fr"> <!DOCTYPE html>
<head> <html lang="fr">
<meta charset="UTF-8"> <head>
<title>Variable à portée de bloc : let</title> <meta charset="UTF-8">
</head> <title> Variable à portée de bloc : let </title>
<body> </head>
<script> <body>
var a = 20, b = 10; <script>
{ var a = 20, b = 10;
let tmp = a; {
a = b; let tmp = a;
b = tmp; a = b;
} b = tmp;
console.log(tmp); // ReferenceError }
</script> console.log(tmp); // ReferenceError
</body> </script>
</body>
</html>
</html>

26
Définition d'une constante avec le mot clé const
• Le mot clé const fonctionne comme le mot clé let, mais la
variable que vous déclarez doit être immédiatement
initialisée avec une valeur, et cette valeur ne peut pas être
modifiée par la suite.

27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Définition d'une constatnte : const</title>
</head>
<body>
<script>
const g = 9.81;
{
const pi = 3.14;
console.log("g = " + g);
console.log("pi = " + pi);
pi = 3.14159;//TypeError: Assignement to constant variable
}
console.log("g = " + g);
console.log("pi = " + pi);//RefrenceError
</script>
</body>
</html>

28
Le mot clé const définit une constante à portée bloc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>const a une porté bloc comme let</title>
</head>
<body>
<script>
const g = 9.81;
{
const pi = 3.14;
console.log("g = " + g);
console.log("pi = " + pi);
}
console.log("g = " + g);
console.log("pi = " + pi);//ReferenceError
</script>
</body>
</html>

29
JavaScript a des types dynamiques

Les types de données de JavaScript sont dynamiques,


ce qui signifie qu'une même variable peut recevoir
des valeurs de types différents durant le temps
d'exécution.
Exemples:
var a; // le type de a est undefined
var a = 10; // le type de a est Number
var a = "Moha"; // le type de a est String

30
Types de données
•JavaScript fournit trois types primitifs de
données:
➢Number : utilisé pour représenter les nombres
de type entier ou réel
Remarque : les nombres sont représentés en
virgule flottante. Si un résultat est plus grand ou
plus petit que le type Number il sera stocké
comme Infinity ou -Infinity.
➢String : utilisé pour représenter les chaines de
caractères
➢Boolean : utilisé pour représenter les deux
valeurs logiques true et false.

31
• Exemples de valeurs numériques
15
-21
21,5
-124,50
-3,5E-2
• Exemples de valeurs de type String
"JavaScript" //Chaine délimiée par ""
'Java' //Chaine délimitée par '
"" //Chaine vide

• Les deux valeurs de type booléen:


true
false

32
Le type String
• Le type String est utilisé pour stocker et manipuler
les chaines de caractères.
• Une String est n'importe quelle suite de caractère
délimitée par des guillemets("abcd ") ou des
quotes('abcd ').
• Exemples
• var a = "Bonjour tout le monde"
• var b = 'Bonsoir'
• var c = "il s'appelle M'hamed"
• var d = 'Il a dit "Il fait très chaud"'
• var e = 'il s\'appele M\'hamed'
• var f = "Il a dit \"il fait beau\""

33
Le caractère escape (\) peut être utilisé pour
insérer dans une string les caractères spéciaux
fournis dans le tableau ci-dessous.

Code Outputs
\' single quote
\" double quote
\\ backslash
\n new line
\r carriage return
\t tab
\b backspace
\f form feed
34
Une String est aussi un objet
• Normalement, une string JavaScript est de type primitive
créé en lui affectant une valeur littérale :
var nom = "Moha"
• Mais une string peut aussi être definie comme un objet en
utilisant le mot clé new:
var fnom = new String("Moha")
• Exemple:
var x = "Moha"; // typeof x retournera string
var y = new String("Moha"); // typeof y retournera object
• Remarque:
• Ne pas créer les strings en tant qu'objets car cela ralentit la vitesse
d'exécution. En plus le mot clé new complique le code et peut
produire des résultats imprévisibles:
35
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>Manipulation des strings</title></head><body>
<p id="para1"></p><p id="para2"></p>
<p id="para3"></p><p id="para4"></p><p id="para5"></p>
<script>
var s1 = "Moha"; // s1 est une string
var s2 = new String("Moha"); // s2 est un object
var s3 = new String ("Moha");
document.getElementById("para1").innerHTML =
"Type des chaines : <br> s1 : " + typeof s1 + "<br>s2 : " + typeof s2;
document.getElementById("para2").innerHTML =
"Comparaison de s1 et s2 avec = = : " + (s1 == s2) +" Car ont la même
valeur";
document.getElementById("para3").innerHTML =
"Comparaison de s1 et s2 avec = = = : " + (s1 === s2) + " Car ne sont pas
de même type";
document.getElementById("para4").innerHTML =
"Comparaison de s2 et s3 avec = = : " + (s2 == s3) +" Car s2 et s3 sont
deux objets différents";
document.getElementById("para5").innerHTML =
"Comparaison de s2 et s3 avec = = = : " + (s2 === s3) + " Car s2 et s3
sont deux objets différents";
</script></body></html>

36
37
Propriétés et Méthodes de String

• Les valeurs primitives, tel que "Moha", ne peuvent


pas avoir des propriétés et méthodes puisque ce ne
sont pas des objets.

• Mais JavaScript traite les valeurs primitives comme


des objets lorsqu'on leur applique des propriétés et
méthodes.

38
Propriétés de String

Propriété Description
constructor Returne la fonction contructeur de string
(voir cours sur les objets)
length Retourne la longueur de la chaine
var s1 = "Bonjour tout le monde!";
var l1 = str.length; →22
prototype Permet d'ajouter des propriétés et
méthodes à un objet.
(Voir cours sur les objets)

39
Méthodes de String
Méthode Description
charAt(n) Retourne le caractère à la position n
charCodeAt(n) Retourne le code Unicode du caractère qui se trouve à la
position n spécifiée.
concat(s1, s2,…) Concatène deux ou plusieurs strings et retourne une
nouvelle string.
endsWith(s) Retourne true au cas où la chaine se termine par la
chaine s fournie en argument. False dans le cas
contraire. Attention! endsWith() est sensible à la casse.
fromCharCode(code) Convertit le code Unicode en un caractère
includes(s) Checks whether a string contains the specified
string/characters
indexOf() Returns the position of the first found occurrence of a
specified value in a string
lastIndexOf() Returns the position of the last found occurrence of a
specified value in a string

40
Méthode Description
localeCompare() Compares two strings in the current locale
match() Searches a string for a match against a regular
expression, and returns the matches
repeat() Returns a new string with a specified number of
copies of an existing string
replace() Searches a string for a specified value, or a regular
expression, and returns a new string where the
specified values are replaced
search() Searches a string for a specified value, or regular
expression, and returns the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
startsWith() Checks whether a string begins with specified
characters
41
Méthode Description
substr() Extracts the characters from a string, beginning at a
specified start position, and through the specified
number of character
substring() Extracts the characters from a string, between two
specified indices
toLocaleLowerCase() Converts a string to lowercase letters, according to
the host's locale
toLocaleUpperCase() Converts a string to uppercase letters, according to
the host's locale
toLowerCase() Converts a string to lowercase letters
toString() Returns the value of a String object
toUpperCase() Converts a string to uppercase letters
trim() Removes whitespace from both ends of a string
valueOf() Returns the primitive value of a String object
42
Expression régulières
• Une expression régulière est un objet (RegExp)qui
définit un motif (pattern) utilisé pour effectuer des
tests, recherches et remplacement dans les strings.
• Une expression est souvent utilisée pour valider une
entrée de l'utilisateur.
• Pour créer une expression régulière on peut procéder
de deux manières:
• Utiliser la fonction constructeur RegExp
• var patt = new RegExp(pattern)
• Utiliser une constante string délimité par deux slash
• /pattern/
• La fonction test(chaine) de l'objet RegExp permet de
tester si le pattern est contenu dans la chaine.
43
Exemples d'expressions régulières
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Expression réguliere01</title>
</head><body><p id="para1"></p><p id="para2"></p>
<script>
var pat1 = /som/
var pat2 = new RegExp("la");
var d = new Date()
var strDate = d.getDate() +"/" + (d.getMonth()+1) + "/" +
d.getFullYear()
var str1 = "Nous sommes le " + strDate;
document.getElementById("para1").innerHTML = str1;
var res1 = pat1.test(str1); //str1 contient t-elle "som"?
var res2 = pat2.test(str1); //str1 contient t-elle "la"?
var res3 = /\d/.test(str1); //str1 commence t-elle un chiffre?
var res4 = /^n/i.test(str1); //la chaine commence t-elle par n ou N
document.getElementById("para2").innerHTML = "res1 : " + res1 +
"<br>res2 : " + res2 +
"<br>res3 : " + res3 +
"<br>res4 : " + res4;
</script></body></html> 44
Comment introduire un caractère dans un
pattern: utiliser le backaslash(\)
Pattern Correspond à
\\ Caractère backslash (\)
\/ Caractère slash(/)
\t Caractère tabulation
\n Caractère nouvelle ligne©©
\r Caractère retour chariot
\f Caractère Form Feed
[\b] Caractère backslash. Le seul caractère qui doit être placé
entre crochets
\udddd Caractère unicode dont le code est spécifié en hexa
\xdd Équivalent à \u00dd : caractère dont le code unicode <=255

45
Correspondance avec certains types de caractères
Pattern Correspond à
N'importe quel caractère à l'exception du caractère nouvelle
.
ligne(\n)
N'importe quel caractère se trouvant entre les crochets
[ ]
(\[ et \] pour chercher les crochets)
[^ ] N'importe quel caractère ne se trouvant pas entre les crochets
[a-z] N'importe quel caractère se trouvant dans l'intervalle spécifié
\w N'importe quelle lettre, chiffre ou trait de soulignement
N'importe quel caractère autre que lettre, chiffre, ou trait de
\W
soulignement
\d N'importe quel chiffre
\D N'importe quel caractère autre que chiffre
\s N'importe quel caractère espace (espace, \t, \n, \r, …)
\S N'importe quel caractère autre que espace (espace, \t, \n, \r, …)
46
Pattern qui correspondent aux positions dans
une string
Pattern Correspond à
Début de la chaine (utiliser \^ pour faire correspondre au
^
caractère ^
Fin de la chaine (utiliser \$ pour faire correspondre à la fin
$
de la chaine)
Caractère de mot qui n'est pas suivi ou précédé par un
caractère de mot.
\b
Un caractère de mot est n'importe quelle lettre minuscule(a-
z), majuscule(A-Z), chiffre(0-9) et underscore(_).
Caractère de mot qui est suivi ou précédé par un caractère
\B de mot.

47
Les quantificateurs
• Les quantifiateurs permettent de dire combien de fois un caractère
doit être recherché.
Quantifier Description
c+ N'importe quelle string qui contient au moins une fois c
c* N'importe quelle string qui contient zero ou plusieurs
occurrences de c
c? N'importe quelle string qui contient 0 ou 1 occurrence de c
c{n} N'importe quelle string qui contient une sequence de n c
c{n,m} N'importe quelle string qui contient une séquence de n à m c
c{n,} N'importe quelle string qui contient une séquence d'au moins
n c.
?=s N'importe quelle string suivie par une string spécifique s
?!s N'importe quelle string qui n'est pas suivie par une string
spécifique s 48
Quantificateurs : exemples d'utilisation
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Expressions régulières : Quantificateurs</title>
</head><body>
<p id="para1"></p><p id="para2"></p><p id="para3"></p>
<p id="para4"></p>
<script>
var $ = function(id){return document.getElementById(id);};
var phone = "559-555-6627";
var fax = "(559) 555-6635";
var pat1 = /^\d{3}-\d{3}-\d{4}$/;
var pat2 = /^\(\d{3}\) ?\d{3}-\d{4}$/;
alert(pat1.test(phone));
alert(pat2.test(fax));
$("para1").innerHTML = phone.match(pat1);
$("para2").innerHTML = fax.match(pat2);
</script></body></html>
49
Exemples d'expressions régulières pour tester
la validité de quelques informations
Information Expression régulière

999-999-9999

9999-9999-9999-9999

99999 ou
99999-9999
mm/dd/yyyy

Email

Nom de poste dans un domaine

50
Regroupement et Alternatives
Symbole Description
() Regroupe des caractères pour être cherché comme un tout. Il ya
possibilité d'imbrication
() Apart from grouping characters (see above), parenthesis also
serve to capture the desired subpattern within a pattern. The
values of the subpatterns can then be retrieved
using RegExp.$1, RegExp.$2 etc after the pattern itself is
matched or compared.
For example, the following matches "2 chapters" in "We read 2
chapters in 3 days", and furthermore isolates the value "2":
var mystring="We read 2 chapters in 3 days"
var needle=/(\d+) chapters/
mystring.match(needle) //matches "2 chapters"
alert(RegExp.$1) //alerts captured subpattern, or "2"
The subpattern can also be back referenced later within the main
pattern.

51
Regroupement et Alternatives

Symbole Description
(?:x) Matches x but does not capture it. In other words, no
numbered references are created for the items within the
parenthesis.
x(?=y) Positive lookahead: Matches x only if it's followed by y. Note
that y is not included as part of the match, acting only as a
required conditon.
x(?!y) Negative lookahead: Matches x only if it's NOT followed by y.
Note that y is not included as part of the match, acting only as
a required condition.
| Alternation combines clauses into one regular expression and
then matches any of the individual clauses. Similar to "OR"
statement.

52
Regroupement et Alternatives
Symbole Exemple
() /(abc)+(def)/ matches one or more occurrences of "abc"
followed by one occurrence of "def".
() The following finds the text "John Doe" and swaps their
positions, so it becomes "Doe John":
"John Doe".replace(/(John) (Doe)/, "$2 $1")
(?:x) /(?:.d){2}/ matches but doesn't capture "cdad".

x(?=y) /George(?= Bush)/ matches "George" in "George Bush" but


not "George Michael" or "George
Orwell"./Java(?=Script|Hut)/ matches "Java" in "JavaScript"
or "JavaHut" but not "JavaLand".
x(?!y) /^\d+(?! years)/ matches "5" in "5 days" or "5 oranges", but
not "5 years".
| /forever|young/ matches "forever" or
"young"/(ab)|(cd)|(ef)/ matches and remembers "ab" or
"cd" or "ef".
53
Back references
Symbole Description
( )\n "\n" (where n is a number from 1 to 9) when added to the end of a regular
expression pattern allows you to back reference a subpattern within the
pattern, so the value of the subpattern is remembered and used as part of
the matching . A subpattern is created by surrounding it with parenthesis
within the pattern. Think of "\n" as a dynamic variable that is replaced with
the value of the subpattern it references. For example:/(hubba)\1/
is equivalent to the pattern /hubbahubba/, as "\1" is replaced with the
value of the first subpattern within the pattern, or (hubba), to form the
final pattern.
Lets say you want to match any word that occurs twice in a row, such as
"hubba hubba." The expression to use would be:
/(\w+)\s+\1/
"\1" is replaced with the value of the first subpattern's match to essentially
mean "match any word, followed by a space, followed by the same word
again".
If there were more than one set of parentheses in the pattern string you
would use \2 or \3 to match the desired subpattern based on the order of
the left parenthesis for that subpattern. In the example:
/(a (b (c)))/
"\1" references (a (b (c))), "\2" references (b (c)), and "\3" references (c).
54
Method Description Example
String.replace(regular Searches and replaces the regular expression var oldstring="(304)434-5454"
expression, replacement portion (match) with the replaced text newstring=oldstring.replace(/[\(\)-
text) instead. For the "replacement text" ]/g, "")
parameter, you can use the keywords $1 to //returns "3044345454" (removes
$99 to replace the original text with values "(", ")", and "-")
from subpatterns defined within the main
pattern.The following finds the text "John
Doe" and swaps their positions, so it
becomes "Doe John":
var newname="John
Doe".replace(/(John) (Doe)/,
"$2 $1")
The following characters carry special
meaning inside "replacement text":
•$1 to $99: References the submatched
substrings inside parenthesized expressions
within the regular expression. With it you can
capture the result of a match and use it
within the replacement text.
•$&: References the entire substring that
matched the regular expression
•$`: References the text that proceeds the
matched substring
•$': References the text that follows the
matched substring
•$$: A literal dollar sign
The "replacement text" parameter can also
be substituted with a callback function
instead. See example below.
55
Méthode Description Example
String.match(regular Executes a search for a var oldstring="Peter has 8
expression) match within a string based dollars and Jane has 15"
on a regular expression. It newstring=oldstring.matc
returns an array of h(/\d+/g)
information or null if no //returns the array
match is found.Note: Also ["8","15"]
updates the $1…$9
properties in the RegExp
object.
RegExp.exec(string) Similar to String.match() var match =
above in that it returns an /s(amp)le/i.exec("Sample
array of information or null text")
if no match is found. Unlike //returns
String.match() however, the ["Sample","amp"]
parameter entered should
be a string, not a regular
expression pattern.

56
Method Description
String.split (string literal or Breaks up a string into an array of substrings
regular expression) based on a regular expression or fixed string.
String.search(regular Tests for a match in a string. It returns the index
expression) of the match, or -1 if not found. Does NOT
support global searches (ie: "g" flag not
supported).
RegExp.test(string) Tests if the given string matches the Regexp,
and returns true if matching, false if not.

57
Method Example
String.match(regular expression) var oldstring="Peter has 8 dollars and Jane has 15"
newstring=oldstring.match(/\d+/g)
//returns the array ["8","15"]
RegExp.exec(string) var match = /s(amp)le/i.exec("Sample text")
//returns ["Sample","amp"]
String.replace(regular expression, var oldstring="(304)434-5454"
replacement text) newstring=oldstring.replace(/[\(\)-]/g, "")
//returns "3044345454" (removes "(", ")", and "-")
String.split (string literal or regular var oldstring="1,2, 3, 4, 5"
expression) newstring=oldstring.split(/\s*,\s*/)
//returns the array ["1","2","3","4","5"]
String.search(regular expression) "Amy and George".search(/george/i)
//returns 8
RegExp.test(string) var pattern=/george/i
pattern.test("Amy and George")
//retuns true

58
Example- Replace "<", ">", "&" and quotes (" and ') with the equivalent HTML entity
instead
function html2entities(sometext){
var re=/[(<>"'&]/g
arguments[i].value=sometext.replace(re, function(m){return
replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}

html2entities(document.form.namefield.value) //replace "<", ">",


"&" and quotes in a form field with corresponding HTML entity
instead

59
1. Write a JavaScript program to test the first character of a string is uppercase or
not

function upper_case(str) {
regexp = /^[A-Z]/;
if (regexp.test(str)) {
console.log("String's first character is uppercase");
} else {
console.log("String's first character is not uppercase");
}
}

upper_case('Abcd');
upper_case('abcd');

60
2-Write a JavaScript program to check a credit card number
( format 9999-9999-9999-9999 )

function is_creditCard(str) {
regexp = /^(?:(4[0-9]{12}(?:[0-9]{3})?)|(5[1-5][0-
9]{14})|(6(?:011|5[0-9]{2})[0-9]{12})|(3[47][0-9]{13})|(3(?:0[0-
5]|[68][0-9])[0-9]{11})|((?:2131|1800|35[0-9]{3})[0-9]{11}))$/;

if (regexp.test(str)) {
return true;
} else {
return false; }
}

61
3-Write a pattern that matches e-mail addresses.
The personal information part contains the following ASCII
characters.
▪ Uppercase (A-Z) and lowercase (a-z) English letters.
▪ Digits (0-9).
▪ Characters ! # $ % & ' * + - / = ? ^ _ ` { | } ~
▪ Character .( period, dot or fullstop) provided that it is not
the first or last character and it will not come one after the
other.

62
function valid_email(str) {
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(str)) {
console.log("Valid email address!");
} else {
console.log("You have entered an invalid email address!");
}
}

valid_email('[email protected]');

63
4-Write a JavaScript program to search a date within a string.

Sample string:
"Albert Einstein was born in Ulm, on 14/03/1879."

function is_dateString(str) {
regexp = /^(1[0-2]|0?[1-9])\/(3[01]|[12][0-9]|0?[1-9])\/(?:[0-9]{2})?[0-9]{2}$/;
if (regexp.test(str)) {
return true;
} else {
return false;
}
}

console.log(is_dateString("01/01/2015"));
console.log(is_dateString("01/22/2015"));
console.log(is_dateString("32/01/2015"));

64
5- Write a JavaScript program to count number of words in string.
The script will be used to:
- Remove white-space from start and end position.
- Convert 2 or more spaces to 1.
- Exclude newline with a start spacing.

<!DOCTYPE html>
<html> <head>
<meta charset=utf-8 />
<title>Count number of words in a string</title>
<style type="text/css"> body {margin-top: 40px;} </style> </head>
<body>
<textarea id="InputText" cols="30" rows="4">The quick brown fox
jumps over the lazy dog.</textarea> <br>
<input type="button" name="Convert" value="No. of Words"
onClick="count_words();">
<input id = "noofwords" type="text" value="" size="6">
</body> </html>

65
function count_words() {
str1= document.getElementById("InputText").value;
//exclude start and end white-space
str1 = str1.replace(/(^\s*)|(\s*$)/gi,"");
//convert 2 or more spaces to 1
str1 = str1.replace(/[ ]{2,}/gi," ");
// exclude newline with a start spacing
str1 = str1.replace(/\n /,"\n");
document.getElementById("noofwords").value = str1.split(' ').length;
}

66

Vous aimerez peut-être aussi