Communauté  • le Livre d'or
WalkAmidMaples2.jpg Actualités et interview d'un contributeur, lisez la Gazette automne 2021 de Vikidia ! DessinInterview.png

JavaScript

« JavaScript » expliqué aux enfants par Vikidia, l’encyclopédie junior
(Redirigé depuis JS)
Aller à : navigation, rechercher
Confusion Ne pas confondre avec Java (langage) !
Travaux
Cet article est en cours de rédaction.
L'utilisateur Matteo1234321 est en train de travailler sur cet article. Merci de ne pas le modifier pour éviter les risques de conflit de versions jusqu'à la disparition de ce message.
Dernière modification de cette page le 4 novembre 2021.


Unofficial JavaScript logo 2.svg

JavaScript est un langage de programmation très utilisé par les navigateurs Internet. Il permet de créer des animations sur des pages Web, de les modifier en fonction de ce que veut faire l’internaute... JavaScript permet au site Web d'avoir plusieurs possibilités pour l'internaute.

Pour cela, c’est le navigateur Web qui fait ce que dit le programme JavaScript alors que, d’habitude, c’est plutôt un serveur qui travaille pour construire ou envoyer une page Web à l’utilisateur.

Attention Bien que leur nom semblent les rapprocher, JavaScript n’a rien à voir avec Java, un autre langage de programmation. L'acronyme js est couramment utilisé par les développeurs pour désigner le JavaScript.

Il s'agit d'un langage de programmation orienté client, en effet JavaScript s'exécute sur la machine de l'utilisateur. Contrairement à PHP qui est un langage de programmation orienté serveur. Ces deux langages sont indispensables pour faire un site Internet très complet.

Principe[modifier | modifier le wikicode]

JavaScript est un langage de programmation : cela veut dire que c’est un ensemble de mots et de caractères de ponctuation qui, correctement arrangés, peuvent être traduits dans un langage que l’ordinateur comprend et donc permettre de faire exécuter des tâches à cet ordinateur.

Comme JavaScript est un langage prévu pour les pages Web, il possède beaucoup d’outils pour modifier ce qui s’affiche dans le navigateur et très peu pour le reste, contrairement à d’autres langages plus généraux.

Une page Web est construite comme un arbre, avec une racine et un ensemble de "branches" qui en dépendent; cette ensemble s’appelle le DOM. On peut voir chaque chose qui s’affiche sur une page Web comme un nœud de ce « DOM » : les paragraphes, les images, les boutons, les liens, tout ! Le principe de JavaScript est de modifier ces "branches" (qu'on appelle des nœuds) et les relations entre eux pour transformer la page. Par exemple, imaginons une image sur une page web. Cette image, c'est un nœud du DOM comme dit ci-avant. Avec JavaScript, il est possible de donner des effets particuliers à cette image ; par exemple, la grossir quand l'utilisateur met la souris dessus.

Utilités[modifier | modifier le wikicode]

Le JavaScript a de multiples utilités :

  • Créer des meilleurs sites web avec, par exemple, des animations ;
  • Créer des jeux vidéo ;
  • Créer des applications ;
  • Et bien d'autres utilités !

Aperçu[modifier | modifier le wikicode]

Dans une page Web, on écrit le JavaScript entre deux « mots » (plus précisément deux balises), qui indiquent au navigateur que ce n’est pas du texte « normal » :

<script>
// On met du JavaScript ici
</script>

Il s'agit des balises <script> et </script>. La première sert à ouvrir la zone de texte où est écrit le JavaScript, la seconde sert à fermer cette zone. Si ces balises ne sont pas présentes, l'ordinateur ne devine pas qu'il doit interpréter du JavaScript, et va donc afficher le texte à l'écran.

Toutefois, il est grandement recommandé de préciser qu'on utilise le JavaScript la façon suivante, car la balise <script> peut servir à d'autres langages, tel que le VBScript par exemple.

<script type="text/javascript">
// On a précisé que ce code est bien du JavaScript
</script>

Commentaires[modifier | modifier le wikicode]

Quand on écrit des mots derrière les deux symboles « // » en JavaScript, on écrit un « commentaire » : c’est juste pour expliquer aux humains ce que fait le code ; l'ordinateur ignorera le commentaire. On ne peut pas écrire comme ça hors des commentaires, car l’ordinateur croirait qu’on s’adresse à lui et ne comprendrait pas, puisque ce n’est pas du JavaScript mais du français ! On peut aussi écrire des commentaires avec /* et */. Exemple :

<script type="text/javascript">
Texte en JavaScript /* Commentaire */ Suite du texte en JavaScript
/*
* Commentaire
*/
/****
* Commentaire
****/
</script>

On peut mettre plusieurs astérisques.

Il y a donc deux parties dans un programme JavaScript : le code en JavaScript destiné à être lu et interprété par l'ordinateur, et les commentaires, destinés à expliquer le code aux humains qui seront amenés à le lire pour l'améliorer ou le corriger.

Afficher du texte[modifier | modifier le wikicode]

Pour afficher du texte, il faut, suivant où on veut l'afficher, mettre document.write("Texte à afficher"); ou console.log("Texte à afficher");. Le premier est utilisé pour l'afficher sur un site Internet. Le second est pour l'afficher dans la console JavaScript, un endroit pour tester des scripts. Il y en a une intégrée dans chaque navigateur, on l'obtient en tapant Ctrl+Maj+k. Le point-virgule indique la fin du code.

Variables[modifier | modifier le wikicode]

Le JavaScript, comme beaucoup de langages de programmation, utilisé des variables. Ce sont des valeurs attribuées à un nom, par exemple. Avant de les utiliser et de leur assigner une valeur, il faut les déclarer avec les mots-clés var, let, ou const. Il y a des petites subtilités entre les trois, mais le premier est le plus utilisé. Voici un exemple de comment les utiliser :

<script type="text/javascript">
var x; // Déclaration de la variable.
x = 50 // On lui assigne une valeur.
let y = 'Ceci est une "chaîne".' // Déclaration et assignation de valeur à la variable en une seule fois.
const z = Math.PI // z vaut donc 3.141592653589793 (pi : π).
document.write(y); // Affichera : Ceci est une "chaîne".
</script>

Chaînes[modifier | modifier le wikicode]

Les apostrophes autour de « Ceci est une "chaîne". » servent à préciser que c'est du texte, car l'ordinateur a besoin que l'on lui explique que c'est un texte en français à afficher, autrement il tenterait de l’interpréter comme du code. Sans ces apostrophes, l'ordinateur renverra une erreur. On peut aussi, au lieu des apostrophes, mettre des guillemets. Si on a un apostrophe dans une chaîne délimitée par des apostrophes, ou des guillemets dans une chaîne délimitée par des guillemets, on doit les échapper grâce au caractère \. Exemple : console.log('C\'est une chaîne !');. Ce caractère est ausi utilisé pour les expressions régulières.

Boîtes de dialogue[modifier | modifier le wikicode]

Une boîte de dialogue est une petite boîte qui apparaît sur l'écran.

alert()[modifier | modifier le wikicode]

Voici un bout de code tout simple pour afficher un message, ou plus précisément une boîte de dialogue :

<script type="text/javascript">
alert('Coucou !');
</script>

Cela va afficher à l'internaute un petit message disant : « Coucou ! ». Pour faire disparaître le message, il suffit de cliquer sur le bouton Ok.

La fonction alert() sert à afficher des alertes à l'utilisateur. Toutes les fonctions s'écrivent avec un nom, puis deux parenthèses contenant un texte que les fonctions vont interpréter. Par exemple, ici la fonction alert va lire le texte « Coucou ! » et le renvoyer dans une fenêtre où le texte s'affichera.

<script type="text/javascript">
alert('Veux-tu vraiment quitter cette page ?');
alert('Au revoir, alors !');
</script>

Ce code affichera un premier message disant : « Veux-tu vraiment quitter cette page ? ». Lorsque l’utilisateur aura répondu Ok, la fenêtre se fermera et le second message JavaScript sera lu à son tour : un nouveau message s’ouvrira pour afficher « Au revoir, alors ! ».

confirm()[modifier | modifier le wikicode]

À compléter Cette section est vide, pas assez détaillée ou incomplète. Améliore-la !


prompt()[modifier | modifier le wikicode]

Cette boîte de dialogue sert à faire écrire un texte à l'internaute. Voici un exemple :

<script type="text/javascript">
var ageDeLinternaute = prompt('Indique ton âge :', '10'); // La variable "ageDeLinternaute" vaudra ce qu'a indiqué l'utilisateur.
/*****
* La première valeur ("Indique ton âge :"), c'est le texte qui sera affiché comme indication pour dire ce que l'internaute doit saisir.
* La seconde (10) sert à mettre le texte par défaut.
*****/
alert('Tu as ' + ageDeLinternaute + ' ans.');
</script>

Vous aurez remarqué qu'on a fait une action spéciale autorisée dans l'alerte : la concaténation.

Le problème avec ce script est que l'utilisateur peut mettre n'importe quoi. Il est possible de contourner ce problème avec le script suivant :

<script type="text/javascript">
function recracherAge() {
let ageEnPremier = parseInt(prompt("Indique ton \u00e2ge :", "10"));
let ageEnSecond;
let ageEnPremierNotNaN = (isNaN(ageEnPremier) ? "ce que tu as mis" : ageEnPremier);
let expPourTesterAge = /\d{1,3}/g;
if (expPourTesterAge.test(ageEnPremier) == true && ageEnPremier <= 130 && ageEnPremier >= 0) {
  alert("Tu as " + ageEnPremier + " ans.");
  } else {
  alert("Veille à indiquer un nombre seulement, ou ton vrai \u00e2ge...\nDonc autre chose que " + ageEnPremierNotNaN + ".");
};
if (ageEnPremier > 130 || ageEnPremier < 0 || isNaN(ageEnPremier) == true) {
   ageEnSecond = parseInt(prompt("Indique cette fois vraiment ton \u00e2ge.", "10"));
   if ((ageEnSecond != undefined || ageEnSecond != null) && ageEnSecond <= 130 && ageEnSecond >= 0) {
         alert ("Tu as " + ageEnSecond + " ans.");
         } else {
         alert("Tant pis pour toi, ton \u00e2ge ne te sera pas recommuniqu\u00e9.");
      };
   };
};

recracherAge();
</script>

Nous reviendrons sur ce script une fois avoir analysé tous les éléments qui le composent.

Types de données[modifier | modifier le wikicode]

  • String : Chaîne (phrase, court texte...) ;
  • Number : Nombre ;
  • Boolean : true (vrai) ou false (faux) ;
  • Array : Tableau ;
  • Object : Objet ;
  • Undefined : Indéfini ;
  • Null : Nul.

Caractères d'échappement[modifier | modifier le wikicode]

Confusion Ne pas confondre avec JavaScript#Signification des caractères !

Il existe, en Javascript, des caractères dits « d'échappement », de la forme \x. Les voici listés :

Caractère Signification
\n Saut de ligne.
\b Retour au caractère précédent.
\r Retour au début de la ligne actuelle.
\f Continuer à la page suivante.
\t Tabulation horizontale.
\v Tabulation verticale.

À ceux-là s'ajoutent \\ (caractère \ échappé), ainsi que l'apostrophe et les guillemets et apostrophes, qu'on échappe quand ils sont dans une chaîne.

Opérateurs[modifier | modifier le wikicode]

Opérateurs arithmétiques[modifier | modifier le wikicode]

Les principaux opérateurs arithmétiques sont +, -, *, et /. Il existe aussi %, équivalent du modulus, et **, la puissance. Les deux derniers, surtout utilisés pour des boucles, sont ++ et --, qui signifient respectivement +1 et -1.

<script type="text/javascript">
var i, j, k, l; // Déclaration des variables que nous allons utiliser.
i = 5; // Assignation d'une valeur.
i = i + 2; // i est maintenant égal à 7.
j = i * 2; // j = 14.
k = j / 7; // k = 2.
l = 17;
l = l++; // l est égal à 18.
k = k--; // k est égal à 1.
j = j % 5 // équivalent à 14 mod 5 ; j est égal à 4.
l = l**2 // l est égal à 18 au carré ; l est égal à 324.
</script>

Opérateurs d'affectation[modifier | modifier le wikicode]

Ces opérateurs sont utilisés pour mettre ensemble plusieurs bouts de texte (la concaténation), ou assigner une nouvelle valeur à une variable, par raport à la précédente. Ils sont : +=, -=, *=, /=, et %=.

<script type="text/javascript">
var txt = 'Anti'; // La variable txt vaut 'Anti'.
txt += 'constitutionnel'; // On ajoute 'constitutionnel'.
txt += 'lement'; // Et pour finir : 'lement'. txt est maintenant égal à 'Anticonstitutionnellement'.
var x = 30;
x += 20; // x vaut 50 (équivalent à x = x + 20).
x -= 20; // x vaut 30 (équivalent à x = x - 20).
x *= 20; // x vaut 500 (équivalent à x = x * 20).
x /= 20; // x vaut 30 (équivalent à x = x / 20).
x %= 20; // x vaut 10 (équivalent à x = x % 20).
</script>

Opérateurs de comparaison[modifier | modifier le wikicode]

  • == : Égal à ;
  •  != : Pas égal à ;
  • > : Plus grand que ;
  • < : Plus petit que ;
  • >= : Plus grand ou égal à ;
  • <= : Plus petit ou égal à ;
  • === : Égal et de même type ;
  •  !== : Pas égal ou pas de même type.
<script type="text/javascript">
1 == 1 // true
1 != 7 // true
4 < 2 // false
6 > 3 // true
3 <= 3 // true
5 >= 8 // false
6 === '6' // false
9 !== '9' // true
'Test' === 'T' + 'es' + 't' // true
</script>

Opérateurs logiques[modifier | modifier le wikicode]

Les opérateurs logiques sont && (et), || (ou), et ! (not).

Application de not (!)[modifier | modifier le wikicode]

! (not) recrache une valeur booléenne (true ou false) à une donnée. Elle renvoie false si la donnée vaut null ou undefined, true dans tous les autres cas.

<script type="text/javascript">
var x = 5; // Déclaration et affectation de valeur à la variable
document.write(!x); // Affiche "true"
document.write(!0); // Affiche "false"
document.write(!!x); // Affiche "true"
</script>

Ce dernier exemple est souvent utilisé pour avoir la valeur booléenne d'une donnée.

Concaténation de chaînes[modifier | modifier le wikicode]

Confusion Ne pas confondre avec #Concaténation de tableaux !

La concaténation est l'action de mettre ensemble plusieurs bouts de chaînes, ou des les mettre avec des variables. Cela est utile lorsqu'on désire afficher un texte parfois personnalisé.

<script type="text/javascript">
var age = 4
document.write('J\'ai ' + age + ' ans.'); // Affiche : "J'ai 4 ans.".
</script>

Application des opérateurs avec les instructions if et if/else[modifier | modifier le wikicode]

if[modifier | modifier le wikicode]

If est une instruction pratique pour dire « Si quelque chose, alors quelque chose ».

<script type="text/javascript">
var x = 2;
var y = 3;
if (x == 2 && y != 4) {
document.write('x est égal à 2 et y n\'est pas égal à 4.');
};
</script>

Analysons ce code. On commence par déclarer et attribuer une valeur aux variables x et y. Ensuite, le programme va exécuter le code après if car ce qui est entre parenthèses est vrai. Si ce n'était pas vrai, il n'afficherait rien. En l'occurrence, le programme va afficher « x est égal à 2 et y à 3. ».
Si on veut que le programme affiche quelque chose si c'est faux, on utilise if/else.

if/else[modifier | modifier le wikicode]

<script type="text/javascript">
var x = 2;
if (x != 2) {
document.write('x n\'est pas égal à 2 !');
} else {
document.write('x est égal à 2 !');
};
</script>

Cette fois, le code va afficher « x est égal à 2. ! » car l'affirmation dans les parenthèses est fausse.

Il existe une version raccourcie de if/else, moins utilisée, mais plus simple intuitivement : (condition) ? à afficher si vrai : à afficher si faux.

<script type="text/javascript">
var age = 13
var adulteOuPas = (age > 18) ? Adulte : Enfant;
document.write(adulteOuPas);
</script>

Ce code affichera « Enfant », car 13 est strictement inférieur à 18.

if/else if/else[modifier | modifier le wikicode]

<script type="text/javascript">
var x = 2;
var y = 5;
if (x !== 2) {
document.write('x n\'est pas égal à 2 !');
} else if (x + y == 7) {
document.write('Puisque x = 2, et que x + y = 7, y = 5.')
} else {
document.write('x est égal à 2, et y n\'est pas égal à 5.');
};
</script>

Ce code affichera « Puisque x = 2, et que x + y = 7, y = 5. ». Il fonctionne avec une deuxième condition if encastrée dans la première.

L'instruction switch[modifier | modifier le wikicode]

Switch est utilisé pour « switcher » justement, entre plusieurs valeurs. Exemple :

<script type="text/javascript">
var x = 2;
switch (x) {
    case 0:
    document.write('x = 0.');
    break;
    case 1:
    document.write('x = 1.');
    break;
    case 2:
    document.write('x = 2.');
    break;
    case 3:
    document.write('x = 3.');
};
</script>

Ce code affichera « x = 2. » car nous avons défini x comme étant égal à 2. Il est nécessaire de mettre break; après chaque instruction, pour indiquer au programme de ne pas continuer après.

Pour en savoir plus Pour en savoir plus, lire l’article : #break.

On peut aussi mettre la même chose pour plusieurs cas, comme ici :

<script type="text/javascript">
var x = 2;
var y = 3;
switch (x + y) {
    case 3:
    case 4:
    document.write('x + y = 3 ou 4.'); // Si x + y = 3 ou 4, c'est cette partie qui sera affichée.
    break;
    case 5:
    case 6:
    document.write('x + y = 5 ou 6.'); // Si x + y = 5 ou 6, c'est cette partie qui sera affichée.
}; // Si x + y n'est égal à aucun des cas ci-dessus, switch n'indique rien. On peut y remédier avec le code suivant.
</script>

Ou ajouter un cas défaut :

<script type="text/javascript">
var x = 2;
var y = 5; // Changeons la valeur de y.
switch (x + y) {
    case 3:
    case 4:
    document.write('x + y = 3 ou 4.');
    break;
    case 5:
    case 6:
    document.write('x + y = 5 ou 6.');
    break;
    default:
    document.write('x + y = autre chose que 3, 4, 5 ou 6, car x + y = ' + x + '.');
};
</script>

Puisque maintenant x + y = 7, le cas défaut est exécuté. Il affichera « x + y = autre chose que 3, 4, 5 ou 6, car x + y = 7. ». Nous avons concaténé, avec document.write, le texte à écrire et x (7).

Pour en savoir plus Pour en savoir plus, lire l’article : #Concaténation de chaînes.


Fonctions[modifier | modifier le wikicode]

Une fonction est une itération définie à l'avance, pour éviter de la répéter. Comme exemple, nous utiliserons une fonction qui retourne l'opposé d'un nombre.

<script type="text/javascript">
function inverse(nombre) {
return -nombre;
};
</script>

On commence par indiquer qu'on définit une fonction avec le mot-clé function. Puis on lui donne un nom (inverse), et on indique de quoi on veut retourner quelque chose (nombre). On peut en théorie utiliser n'importe quelle chaîne, mais il vaut mieux prendre quelque chose en rapport. Ensuite, on ouvre une accolade, et on indique grâce au mot-clé return la valeur à retourner (-nombre).

Application de la fonction précédente[modifier | modifier le wikicode]

<script type="text/javascript">
document.write(inverse(4)); // Affiche -4
document.write(inverse(10)); // Affiche -10
</script>

Liste non-exhaustive de fonctions couramment utilisées[modifier | modifier le wikicode]

Nombres[modifier | modifier le wikicode]
Types[modifier | modifier le wikicode]
  • typeof() ;
  • isNaN().
Temps[modifier | modifier le wikicode]
Dates[modifier | modifier le wikicode]
  • getMilliseconds() et getUTCMilliseconds() ;
  • getTime() ;
  • getSeconds() et getUTCSeconds() ;
  • getMinutes() et getUTCMinutes() ;
  • getHours() et getUTCHours() ;
  • getDay() et getUTCDay() ;
  • getDate() et getUTCDate() ;
  • getMonth() et getUTCMonth() ;
  • getYear() ;
  • getFullYear() et getUTCFullYear() ;
  • getTimezoneOffset.
Autres[modifier | modifier le wikicode]
  • setTimeout() ;
  • clearTimeout() ;
  • setInterval() ;
  • clearInterval().

Méthodes[modifier | modifier le wikicode]

Une méthode est une fonction qui suit une ligne de code, d'abord par un point, puis par son nom, et puis deux parenthèses, pour la modifier.

Liste non-exhaustive de méthodes couramment utilisées[modifier | modifier le wikicode]

Texte[modifier | modifier le wikicode]
  • .length() ;
  • .charAt() ;
  • .charCode() ;
  • .fromCharCode() ;
  • .substring() ;
  • .indexOf() ;
  • .lastIndexOf() ;
  • .toLowerCase() ;
  • .toUpperCase().
Formatage de texte[modifier | modifier le wikicode]

Les méthodes de formatage de texte ont l’usage déprécié, et il est vivement conseillé de ne plus les utiliser.

  • .bold() ;
  • .italics() ;
  • .strike() ;
  • .fontcolor() ;
  • .fontsize() ;
  • .small() ;
  • .big() ;
  • .sub() ;
  • .sup() ;
  • .anchor() ;
  • .fixed() ;
  • .link().
Méthodes pour les tableaux[modifier | modifier le wikicode]
  • .push() ;
  • .pop() ;
  • .concat() ;
  • .forEach() ;
  • .join() ;
  • .sort() ;
  • .reverse().
Méthodes pour les expressions régulières[modifier | modifier le wikicode]

Tableaux[modifier | modifier le wikicode]

Les tableaux sont utilisés pour stocker des données, souvent de même type. Ils peuvent se construire de deux manières : à l'aide du constructeur Array(), ou bien de façon plus manuelle.

Construction avec l'objet Array()[modifier | modifier le wikicode]

<script type="text/javascript">
var Tableau = new Array('élément1', 'élément2', 'élément3', 'élément4');
document.write(Tableau); // Affichera : élément1,élément2,élément3,élément4.
</script>

Avec cette méthode, on commence par déclarer et nommer une variable. Ici, nous l'avons appelée « Tableau ». On continue avec new, utilisé pour annoncer un objet. Entre parenthèses, ensuite, chaque élément, séparés par des virgules. Ici, ce sont tous des chaînes.

Construction littérale[modifier | modifier le wikicode]

<script type="text/javascript">
var Tableau = ['élément1', 'élément2', 'élément3', 'élément4'];
document.write(Tableau); // Affichera : élément1,élément2,élément3,élément4.
</script>

Ici, on commence aussi par déclarer et nommer une variable. Ensuite, on indique qu'on veut définir un tableau avec les crochets. Les éléments sont ici aussi séparés par des virgules.

Un tableau est affiché différemment qu'il n'est écrit. On ne peut l'écrire de la manière dont il est affiché (il ne le reconnaîtra pas comme un tableau), et vice-versa.

Expressions régulières[modifier | modifier le wikicode]

Les expressions régulières, aussi appelées « regex » (pour Regular Expressions), sont des objets utilisés pour contrôler par exemple la saisie d’un champ dans un formulaire. Il existe deux formes pour les créer, qui seront détaillées ici.

Première forme[modifier | modifier le wikicode]

Dans cette forme, il faut déclarer une variable. Ensuite, on utilise le mot-clé new et l'objet RegExp(). Cette façon de faire est un peu plus longue, mais plus simple à comprendre. Exemple :

<script type="text/javascript">
var Exp = new RegExp("^.*[A-Za-z]{3}[0-9]{,2}\W$", "g");
</script>

Nous détaillerons ce code après l'explication de la deuxième forme.

Deuxième forme[modifier | modifier le wikicode]

Dans cette deuxième forme, il faut également définir une variable, mais cette fois on n'utilise ni new, ni RegExp(). Cette fois, on donne une valeur avec / au début et à la fin. C'est une manière plus courte, mais donc aussi plus compacte et difficile à lire. Exemple :

<script type="text/javascript">
var Exp = /^.*[A-Za-z]{3}[0-9]{,2}\W$/g;
</script>

Signification des caractères[modifier | modifier le wikicode]

Quelle que soit la forme utilisée, les caractères ont tous une certaine signification. Voici un tableau pour les illustrer :

Expressions
Caractère Signification
^ Indique le début de la chaîne à tester.
$ Indique la fin de la chaîne à tester.
. N'importe quel caractère.
? Caractère précédent 0 ou 1 fois.
* Caractère précédent 0 ou plus de fois.
+ Caractère précédent 1 fois ou plus.
(?:xyz) Expression mémorisée.
(xyz) Capture de caractères.
[xyz] Un caractère de ceux entre crochets.
[a-z] Une lettre minuscule.
[f-n] Une lettre minuscule entre f et n.
[A-Z] Une lettre majuscule.
[C-S] Une lettre majuscule entre C et S.
[0-9] Un chiffre.
[3-8] Un chiffre entre 3 et 8.
[^xyz] Tout sauf ce qui est entre crochets.
{x} Caractère précédent exactement x fois.
{x,y} Caractère précédent entre x et y fois.
{x,} Caractère précédent au minimum x fois.
{,y} Caractère précédent au maximum y fois.
x|y x ou y.

Caractères d'échappement
Confusion Ne pas confondre avec JavaScript#Caractères d'échappement !

Caractère Équivalent en expressions ou signification
\d [0-9]
\D [^0-9]
\b Frontière de mot[Quoi ?] (espace, alinéa...)
\s Espace, quel qu'il soit (espace, tabulation, alinéa...)
\S Tous les caractères, sauf \s.
\w [A-Za-z0-9_]
\W [^A-Za-z0-9_]

Note : Pour faire le caractère \ (antislash), il faut écrire \\ pour l'échapper.

Analyse d'une chaîne RegExp d'exemple[modifier | modifier le wikicode]

<script type="text/javascript">
var Exp = new RegExp("^.*[A-Za-z]{3}[0-9]{,2}\W$", "g");
</script>

Cette chaîne commence par le caractère ^, qui signifie d'analyser la chaîne depuis le début. Elle continue avec un point, qui signifie n'importe quel caractère. Il est suivi de l'astérisque (*), qui veut dire le caractère précédent 0 fois ou plus. Cela veut donc dire qu'il peut y avoir n'importe quel caractère, n'importe quel nombre de fois. Ensuite, on a [A-Za-z]{3} qui autorise trois fois une lettre minuscule ou majuscule. Puis, on a [0-9]{,2} qui autorise un chiffre, au maximum deux fois. La chaîne se termine par \W et $, qui veulent dire [^A-Za-z0-9_] (aucun de ces caractères) et fin de la chaîne à tester.

Options[modifier | modifier le wikicode]

Tout ce qu'on vient d'analyser s'appelle le motif, il nous reste à analyser l'option, g. Il existe six options, qui, comme le dit leur nom, sont optionnelles.

  • g : Analyser toute la chaîne ;
  • i : Ne pas prendre en compte minuscules et majuscules ;
  • x : Ignorer les espaces ;
  • m : Si la chaîne est sur plusieurs lignes, bien les traiter comme plusieurs lignes ;
  • s : Autorise les points à aussi signifier des retours à la ligne ;
  • u : Contrôles tous les caractères unicode ;
Pour en savoir plus Pour en savoir plus, lire l’article : Codage des caractères.
  • y : Recherche d'une sous-chaîne à un endroit précis dans la chaîne à tester.

Les quatre dernières sont peu utilisées.

Méthodes pour les expressions régulières[modifier | modifier le wikicode]

Méthode .exec()[modifier | modifier le wikicode]

.exec() cherche une expression à l'intérieur d'une chaîne. Si elle la trouve, elle renvoie l'expression cherchée. Sinon, elle renvoie null.

<script type="text/javascript">
var chaîne = "Ceci est une chaîne.";
var Exp = new RegExp("cha[iî]ne", "gi");
var réponse = chaîne.exec(Exp);
document.write(réponse); // Affichera : chaîne.
var Exp2 = new RegExp("nombre", "g");
var réponse2 = chaîne.exec(Exp2);
document.write(réponse2); // Affichera : null
</script>
Méthode .test()[modifier | modifier le wikicode]

Cette méthode sert à contrôler s'il y a le motif dans la chaîne. Voici un petit programme pour y voir plus clair :

<script type="text/javascript">
var Exp = new RegExp("^.*[A-Za-z]{3}[0-9]{,2}\W$", "g");
Exp.test("ReD6+");
</script>

« ReD6+ » est accepté, car il respecte le motif (trois lettres majuscules ou minuscules, 0-2 chiffres, un caractère ni chiffre, ni lettre, ni _). La méthode .test() retourne donc true. On peut combiner .test() avec if/else ;

<script type="text/javascript">
var Exp = new RegExp("^.*[A-Za-z]{3}[0-9]{,2}\W$", "g"); // Le motif avec lequel on va analyser la chaîne.
var boolPseudo = Exp.test("ReD6+"); // boolPseudo vaut true ou false, d'après si la chaîne contient le motif ou pas.
if (boolPseudo == true) { // On regarde si ça vaut true...
    document.write("C'est bon !"); // Si oui, on affiche "C'est bon !".
    } else {
    document.write("Ce n'est pas bon !"); // Sinon, on affiche "Ce n'est pas bon !".
};
</script>
Méthode .match()[modifier | modifier le wikicode]

La méthode .match() cherche une expression régulière à l'intérieur d'une chaîne. Elle renvoie un tableau des différents caractères correspondants. Pour éviter que cette méthode ne renvoie une erreur, il faut impérativement avoir l'option g.

<script type="text/javascript">
var chaîne = "Ceci est une chaîne.";
var tableau = chaîne.match(/[a-e]/g);
document.write(tableau2); // Affichera : e,c,e,e,a,e.
</script>
Méthode .search()[modifier | modifier le wikicode]

Cette méthode cherche une chaîne à l'intérieur d'une autre. Si elle la trouve, elle renvoie sa position, là où elle apparaît en premier, en commençant par 0. Sinon, elle renvoie -1.

<script type="text/javascript">
var chaîne = "Ceci est une chaîne.";
var réponse = chaîne.search(/i/);
document.write(réponse); // Affichera : 3
var réponse2 = chaîne.search(/[x-z]/);
document.write(réponse2); // Affichera : -1
</script>
Méthode .split()[modifier | modifier le wikicode]

La méthode .split() divise une chaîne en plusieurs parties, et renvoie un tableau. Elle prend en premer paramètre une chaîne ou une expression régulière, et un maximum de chaînes à renvoyer en deuxième.

<script type="text/javascript">
var chaîne = "Ceci est une chaîne.";
var réponse = chaîne.split(" ");
document.write(réponse); // Affichera : Ceci,est,une,chaîne.
var réponse2 = chaîne.search(/[aeiouy]/i, 5);
document.write(réponse2); // Affichera : c,c, ,st ,n
</script>

Bibliothèques et Frameworks[modifier | modifier le wikicode]

Le JavaScript pur reste tout de même assez difficile d'utilisation, surtout pour les débutants, sans compter les incompatibilités entre navigateurs. C'est pourquoi des bibliothèques et des frameworks ont été développés, pour permettre d'utiliser plus facilement le JavaScript. Parmi les plus connus, on trouve :

  • La célèbre bibliothèque jQuery redoutable par sa simplicité et son efficacité.
  • Son concurrent la bibliothèque Mootools.
  • Le framework Dojo.

Viennent ensuite d'autre bibliothèques moins répandues telles que Prototype, YUI, ExtJs etc.

Sources[modifier | modifier le wikicode]

Liens externes[modifier | modifier le wikicode]

Langages de programmation.svg
Les langages de l’informatique
Portail des techniques — Tous les articles sur les moyens de transport, l'informatique, les outils et les matériaux…
Portail de l'informatique —  Tous les articles sur son histoire, les logiciels, Internet…