Java Script

JavaScript
1. Introduction
1.1. Introduction au JavaScript
1.1.1. Qu’est-ce que le JavaScript ?
Le JavaScript est un langage de programmation cré é en 1995.
Le JavaScript va nous permettre de cré er des pages interactives et « vivantes » à l’aide de scripts.
Un script, c’est tout simplement une suite d’instructions qui vont ê tre interpré té es par un
programme.
1.1.2. Le JavaScript, un langage client-side
Le JavaScript est un langage de programmation dit « client-side ».
Il existe deux grands types de langages de programmation : les langages « client-side » et les
langages « server-side ».
Les langages client-side vont s’exé cuter du cô té du client, c’est-à -dire sur l’ordinateur de la personne
qui va demander la page web.
Les langages server-side, au contraire, vont s’exé cuter cô té serveur. Un serveur, c’est une sorte
d’ordinateur trè s puissant qui va stocker des pages web puis les envoyer au client lorsque celui-ci les
demande.
1.1.3. Le JavaScript, un langage orienté objet
Finalement, le JavaScript est é galement un langage orienté objet à prototype.
1.2. Où é crire le JavaScript

On va pouvoir placer du code JavaScript à trois endroits diffé rents :
● Dans l’é lé ment head d’une page HTML ;
● Dans l’é lé ment body d’une page HTML ;
● Dans un ichier portant l’extension « .js » sé paré .
1.2.1. Dans l’é lé ment head d’une page HTML
1 | Page
prof: yassine.f……………………………………………………SAGI
1.2.2. Dans l’é lé ment body d’une page HTML
1.2.3. Dans un ichier portant l’extension « .js » sé paré
1.3. Syntaxe et commentaires

1.3.1. La syntaxe du JavaScript
Chaque instruction en JavaScript doit ê tre terminé e par un point-virgule.
2 | Page
1.3.2. Les commentaires en JavaScript
1.4. Dé couverte des variables

Une variable JavaScript est un conteneur servant à stocker temporairement une information.
En JavaScript, le signe égal est un opérateur d'affectation et non pas d’é galité .
1.5. Les types de valeurs

1.5.1. Les types de valeurs des variables
Les variables en JavaScript peuvent stocker différents types de valeurs.
1.5.2. Le type de valeurs Number
1.5.3. Le type de valeurs String
3 | Page
1.5.4. Le type de valeurs Boolean
Un boolé en, en algè bre, est une valeur binaire (soit 0, soit 1). En informatique, un boolé en va ê tre
soit la valeur true (vrai), soit la valeur false (faux).
1.5.5. Autres valeurs stocké es en JavaScript
1.5.6. Changer le type d’une valeur stocké e dans une variable

On peut changer le type de la valeur d’une variable ‘un type à un autre.
1.5.7. Tester le type de valeur d’une variable

Pour tester le type de la valeur que contient une variable, on utilise gé né ralement la fonction typeof()
4 | Page
1.6. Opé rations sur les variables
1.6.1. Des opé rations mathé matiques simples sur les variables
1.6.2. Priorité s de calcul

Les parenthè ses sont prioritaires sur toute autre opé ration, puis viennent la multiplication, la
division et le modulo et inalement l’addition et la soustraction.
1.6.3. Opé rations simpli ié es sur les variables JavaScript
1.7. La concaté nation

1.7.1. La concaté nation : dé inition et exemples
5 | Page
Concaté ner signi ie tout simplement mettre bout à bout deux chaı̂nes de caractè res a in d’en former
une troisiè me.
En JavaScript, on va pouvoir concaté ner grâ ce à l’opé rateur « + ».
1.7.2. Additionner un nombre et une chaı̂ne de caractè res
1.8. Pré sentation des conditions

1.8.1. Les opé rateurs de comparaison
6 | Page
1.8.2. Le JavaScript et les comparaisons de valeurs
1.9. Les conditions if, if...else, if...else if...else

1.9.1. Opé rateurs logiques
7 | Page
1.10. L’é valuation des valeurs
Toute valeur diffé rente de null, unde ined, NaN, 0 et la chaı̂ne de caractè res vide sera é valué e par
dé faut par le JavaScript à true.
1.11. Conditions ternaires
8 | Page
1.12. Switch
1.13. Les boucles

1.13.1. La boucle while
1.13.2. La boucle do while
1.13.3. La boucle for
9 | Page
1.13.4. Un mot sur l’incré mentation et la dé cré mentation
1.14. Dé couverte des fonctions
On peut dissocier deux grands types de fonctions en JavaScript : les fonctions natives et celles que
nous allons créer nous-mêmes .
1.14.1. Cré ation d’une fonction JavaScript
1.14.2. Paramè tres ou arguments

On parle de paramè tres au moment de la cré ation ou de la dé claration de la fonction, et on parle
d’arguments au moment de l’appel à la fonction.
2. Les objets en JavaScript

2.1. Dé inition et dé couverte
2.1.1. Qu’est-ce qu’un objet ?
Dans la vraie vie, un crayon est un objet.
Il existe des crayons de diffé rentes couleurs et de diffé rentes tailles ou formes. La couleur, taille ou
forme d’un crayon vont ê tre des propriétés .
De plus, un crayon sert à é crire. "Ecrire" est donc ici une fonction de l'objet crayon ou encore ce que
nous allons dé sormais appeler une méthode .
Les objets en JavaScript vont contenir des proprié té s et mé thodes.
2.1.2. Les objets en JavaScript
Jusqu’à pré sent, nous n’avons fait stocker qu’une seule valeur à la fois à nos variables. Plus
pré cisé ment, nous avons fait stocker ce que l’on appelle des valeurs primitives à nos variables.
2.1.3. Proprié té s et mé thodes des objets
10 | Page
2.2. objets natifs et valeurs primitives en JavaScript
2.2.1. Les objets natifs du JavaScript
En JavaScript, vous devez savoir qu’il existe dé jà des objets natifs, c’est-à -dire des objets qui
possè dent dé jà leurs proprié té s et mé thodes et qui sont dé jà « prê ts à l’emploi ».
Parmi les objets natifs qu’on trouve en JavaScript on trouve l’objet String , l’objet Number et l’objet
Boolean . On appelle é galement ces objets des objets globaux car ils vont nous permettre de cré er de
nouveaux objets de mê me « type ».
Nous venons de cré er notre premier objet de type string à partir de notre objet global String et plus
pré cisé ment de la fonction constructeur String().
2.2.2. Valeurs primitives ou objets ?
11 | Page
Les valeurs primitives et les objets sont traité s de la mê me façon, il faut juste savoir que les valeurs
primitives sont des objets simpli ié s qui consomment moins de ressources.
Tandis que l’on peut tout à fait comparer des valeurs primitives entre elles, il est totalement
impossible de comparer des objets entre eux.
2.3. Cré ation d’objets en JavaScript et identité des objets

2.3.1. Cré er un objet litté ral
12 | Page
On utilise des deux points pour assigner les valeurs à nos marqueurs.
2.3.2. Cré er des objets à partir d’un constructeur
Nous utiliserons cette façon de faire pour des gros projets pour lesquels nous aurons à cré er
beaucoup d’objets similaires.
Voici ci-dessous une liste des constructeurs natifs les plus connus et utilisé s en JavaScript :
● Object() ;
● String() ;
● Number() ;
● Boolean() ;
● Array() ;
● RegExp() ;
● Function() ;
● Date() ;
2.3.3. L’identité des objets
13 | Page
Faites bien attention à un point avec les objets : au contraire des valeurs primitives, on y accè de par
ré fé rence et non pas par valeur.
14 | Page
3. L’objet String
15 | Page
16 | Page
3.1. Autres mé thodes de l’objet String
valueOf() qui retourne la valeur primitive d’un objet de type String,
search() et match()qui vont comparer une chaı̂ne à une certaine expression et vont retourner les
correspondances
split()qui va casser une chaı̂ne de caractè res selon un dé limiteur et va cré er un tableau avec les
morceaux.
4. L’objet Number
4.1. Pré sentation et proprié té s
L’objet Number sert à gé rer les nombres en JavaScript.
Les proprié té s de Number sont :
● MAX_VALUE retourne la valeur maximale,
● MIN_VALUE retourne la valeur minimale,
● NEGATIVE_INFINITY retourne la valeur in inie né gative,
● POSITIVE_INFINITY retourne la valeur in inie positive,
● NaN repré sentant une valeur qui n’est pas un nombre.
4.2. La mé thode toString()

La mé thode toString() va transformer un nombre en chaı̂ne de caractè res.
17 | Page
4.3. La mé thode toFixed()
La mé thode toFixed() va changer le nombre de dé cimales d’un nombre et va le transformer en
chaı̂ne de caractè res.
Cette mé thode va prendre le nombre de dé cimales voulues en argument.
4.4. La mé thode toPrecision()

La mé thode toPrecision() va nous permettre de choisir la « longueur » du nombre (c'est à dire le
nombre de chiffres) qui doit ê tre retourné et va le retourner sous forme de chaı̂ne de caractè res.
18 | Page
4.5. La mé thode toExponential()
La mé thode toExponential() va nous permettre de choisir le nombre de dé cimales d’un nombre et va
le retourner sous forme de chaı̂ne de caractè res, en utilisant une notation sous forme de nombre
exponentiel.
4.6. Quelques mé thodes globales inté ressantes

La mé thode Number() va ê tre utilisé e pour convertir certaines valeurs JavaScript en nombres,
comme des boolé ens ou des valeurs de type date par exemple.
19 | Page
Les mé thodes parseInt() et parseFloat() vont retourner respectivement un nombre entier et un
nombre entier ou dé cimal à partir d’une chaı̂ne de caractè res.
20 | Page
5. L’objet Array
5.1. Pré sentation de Array et des tableaux
Un tableau (« array » en anglais) est un type de variable spé cial qui peut contenir plusieurs valeurs.
Les tableaux vont ê tre gé ré s par l’objet Array, un objet natif en JavaScript qui possè de ses propres
proprié té s et mé thodes.
Lorsque l’on cré e un tableau, un indice (ou une clef) numé rique unique est automatiquement
affecté e à chaque valeur de notre tableau.
5.2. Cré ation et syntaxe d’un tableau
5.3. Connaı̂tre le nombre d’é lé ments dans un tableau
21 | Page
ne petite astuce : comme length retourne le nombre d’é lé ments d’un tableau, et comme la
U
premiè re valeur d’un tableau possè de toujours la clef 0, on peut utiliser cette proprié té pour
rajouter des é lé ments à la in de notre tableau.
5.4. Parcourir un tableau et af icher toutes ses valeurs

Pour parcourir et af icher les valeurs d’un tableau, nous utiliserons gé né ralement une boucle for, qui
va nous permettre de passer en revue notre tableau valeur par valeur.
22 | Page
5.5. Des tableaux avec des index textuels
Dans nombre d’autres langages informatique (dont le PhP, par exemple), on peut cré er des tableaux
en choisissant d’attribuer une clef textuelle à chaque nouvelle valeur. On appelle ces tableaux des
tableaux associatifs .
En JavaScript, ce type de tableau n’existe tout simplement pas. Pour cré er quelque chose qui
ressemble à un tableau associatif, nous allons cré er un objet litté ral en JavaScript.
Encore une fois attention : un objet litté ral n’est pas un objet de type Array. Ainsi, les proprié té s et
mé thodes de l’objet Array ne fonctionneront pas avec les objets litté raux.
Pour parcourir un objet litté ral et af icher ses é lé ments, nous allons utiliser une nouvelle boucle
spé ci iquement cré é e pour cela : la boucle for…in.
23 | Page
6. Les méthodes de l’objet Array
Dans cette partie, nous allons voir la majorité des mé thodes de Array, à savoir :
● Les mé thodes push() et pop() ;
● Les mé thodes shift() et unshift() ;
● La mé thode splice() ;
● La mé thode sort() ;
● La mé thode reverse() ;
● La mé thode join() ;
● La mé thode slice() ;
● La mé thode concat().
6.1. Ajouter et supprimer des é lé ments en in de tableau
push() : Pour ajouter des é lé ments en in de tableau.
pop() : Pour supprimer des é lé ments en in de tableau.
push() : va retourner la nouvelle taille du tableau.
pop() : va retourner dans une chaı̂ne de caractè res la valeur relative à l’é lé ment supprimé .
24 | Page
25 | Page
6.2. Ajouter et supprimer des é lé ments au dé but d’un tableau
unshift() : Pour ajouter un é lé ment au dé but du tableau.
shift() : Pour supprimer un é lé ment au dé but du tableau.
unshift() : va retourner la nouvelle taille du tableau.
shift() : va retourner dans une chaı̂ne de caractè res la valeur relative à l’é lé ment supprimé .
26 | Page
6.3. Ajouter ou supprimer des é lé ments choisis dans un tableau
splice() va prendre au minimum deux arguments : la position à partir de laquelle les nouveaux
é lé ments devront ê tre ajouté s et combien d’é lé ments doivent ê tre enlevé s.
Aprè s ces deux arguments obligatoires, on peut rajouter autant d’autres arguments qu’on veut
insé rer de valeurs.
27 | Page
6.4. Classer les é lé ments d’un tableau
La mé thode sort() : permet de trier les é lé ments d’un tableau dans l’ordre croissant ou alphabé tique
de leurs valeurs.
Attention cependant à la casse (majuscule / minuscule) : les valeurs commençant par des majuscules
vont ê tre classé es avant celles commençant par des minuscules.
28 | Page
Remarque : la mé thode sort() va classer les valeurs en les comparant caractè re par caractè re.
On va donc avoir des problè mes pour trier les nombres. Par exemple, « 25 » va ê tre considé ré
comme supé rieur à « 100 » car, en comparant chiffre par chiffre, « 2 » est supé rieur à « 1 ».
6.5. Inverser l’ordre des é lé ments d’un tableau

La mé thode reverse() : Pour inverser l’ordre des é lé ments d’un tableau.
29 | Page
6.6. La mé thode join()
La mé thode join() va retourner les diffé rentes valeurs d’un tableau sous forme de chaı̂ne de
caractè res.
Outre cela, nous allons pouvoir choisir le type de sé parateur voulu entre les diffé rentes valeurs de
notre tableau (un espace, une virgule, etc.).
ttention : join() ne modi ie pas notre tableau en soi, elle renvoie seulement une chaı̂ne de
A
caractè res cré é e à partir de notre tableau.
6.7. Cré er un tableau à partir d’un autre

La mé thode slice() : permet de cré er un nouveau tableau en extrayant des é lé ments d’un tableau de
base.
Cette mé thode va gé né ralement avoir besoin de deux arguments : une position de dé part et une
position de in pour couper.
On peut toutefois ne pré ciser qu’un seul argument qui sera la position de dé part. Dans ce
cas-là , slice() coupera jusqu’à la in du tableau de dé part.
Tout comme la pré cé dente, cette mé thode n’impacte pas le tableau de dé part. Elle va servir à cré er
un nouveau tableau à partir de notre tableau de dé part.
30 | Page
ttention : cette é criture du tableau n’est pas recommandé e car on n’a pas de contrô le sur le
A
formatage des donné es af iché es.
6.8. Cré er un tableau à partir de plusieurs tableaux

La mé thode concat() va nous permettre de « concaté ner » diffé rents tableaux entre eux ; c’est-à -dire
de les fusionner pour en cré er un nouveau.
31 | Page
7. L’objet Date
7.1. Pré sentation de l’objet Date
L’objet Date est un objet natif du JavaScript qui va nous permettre de manipuler des dates.
Les dates en JavaScript peuvent ê tre é crites de deux maniè res : soit litté ralement (c'est-à -dire sous
forme de chaı̂nes de caractè res), soit sous forme d’un Timestamp Unix multiplié par 1000.
Le Timestamp Unix correspond au nombre de secondes é coulé es depuis le premier janvier 1970 à
minuit UTC (Universal Time).
En JavaScript, on va compter en millisecondes (ms). C’est donc pour cela que le nombre renvoyé par
le JavaScript correspond au Timestamp Unix multiplié par 1000.
7.2. Ré cupé rer la date actuelle

Date() : Pour ré cupé rer la date actuelle sous forme litté rale.
Date.now() : Pour af icher cette mê me date sous forme de nombre (le nombre de millisecondes
é coulé es depuis le 1er janvier 1970).
ttention : pensez bien que le nombre retourné par le JavaScript correspond au Timestamp Unix
A
multiplié par 1000. Pour retrouver le Timestamp standard, il faudra donc diviser le nombre renvoyé
par 1000.
7.3. Cré er un objet de type date

Pour cré er un objet de type date, nous allons cette fois-ci ê tre obligé d’utiliser le
constructeur Date() avec le mot clef new.
32 | Page
Nous pouvons ensuite pré ciser quatre types de valeurs diffé rents en argument de notre
constructeur, qui vont constituer autant de maniè res de cré er un objet de type date.
7.3.1. La premiè re façon
7.3.2. La deuxiè me façon
7.3.3. La troisiè me façon

On peut encore pré ciser un nombre en argument de notre constructeur. Ce nombre va correspondre
au nombre de millisecondes é coulé es depuis le 1er janvier 1970.
Il y a 604800000 millisecondes dans une semaine.
33 | Page
7.3.4. La quatriè me façon
On faire passer au constructeur 7 arguments qui vont correspondre respectivement à l’anné e, le
mois, le jour, l’heure, les minutes, les secondes et les millisecondes correspondants à la date qui doit
ê tre stocké e dans l’objet cré é .
Attention : Sachez toutefois que seuls les trois premiers nombres sont strictement obligatoires.
Remarque : si on ne pré cise pas l’heure, les minutes, etc. le point de ré fé rence par dé faut est minuit.
Notez é galement qu'en cré ant une date de cette maniè re, le mois de janvier est associé au chiffre 0,
fé vrier est associé à 1, juillet à 6, etc.
7.4. Les formats de date en JavaScript

Le JavaScript reconnaı̂t en effet quatre grands types de formats de dates litté rales :
● Le format de dates ISO ;
● Les dates courtes ;
● Les dates longues ;
● Les dates complè tes.
Notez que gé né ralement on pré fé rera utiliser la norme ISO pour cré er une date en JavaScript.
Le format de dates ISO suit la norme ISO 8601.
7.4.1. La date ISO (date) complet
34 | Page
7.4.2. La date ISO (date) anné e et mois seulement
7.4.3. La date ISO (date) anné e seulement
7.4.4. La date ISO (date-temps)
La date et le temps sont sé paré s par un T.

Le temps UTC est dé ini par Z.
Si on veut modi ier l'heure par rapport à UTC, supprimer le Z et ajouter plutô t + hh: mm ou -hh: mm.
35 | Page
8. Les méthodes de l’objet Date
8.1. Les getters de l’objet Date
getDay() renvoie un nombre entre 0 (Dimanche) et 6 (Samedi).

36 | Page
getMonth() renvoie un nombre entre 0 (Janvier) et 11 (Dé cembre).
8.2. Les setters de l’objet Date
37 | Page
9. L’objet Math
9.1. Pré sentation de l’objet Math
Notez dé jà que l’objet Math ne possè de pas de constructeur. Ainsi, nous ne cré erons pas d’objet de «
type Math » mais allons appliquer les mé thodes à Math en soi.
9.1.1. La mé thode random()
La mé thode random() qui retourne un nombre dé cimal alé atoire entre 0 et 1.
Pour obtenir un nombre alé atoire entre 0 et 1000 par exemple, il suf it de multiplier le ré sultat
renvoyé par random() par 1000.
9.1.2. La mé thode round()
La mé thode round() va nous permettre d’arrondir un nombre donné à l’entier le plus proche.
38 | Page
9.1.3. Les mé thodes loor() et ceil()
Les mé thodes loor() et ceil() vont nous permettre respectivement d’arrondir un nombre dé cimal à
l’entier infé rieur ou supé rieur.
9.1.4. Les mé thodes min() et max()

Les mé thodes min() et max() retournent respectivement le plus petit ou le plus grand nombre parmi
une sé rie de nombres.
39 | Page
9.1.5. La mé thode abs()
La mé thode abs() va retourner la valeur absolue d’un nombre.
40 | Page
10. La portée en JavaScript
10.1. Qu’est-ce que la porté e ?
La porté e dé signe la possibilité d’accé der ou non à certaines variables (et donc aux valeurs,
fonctions ou objets contenus à l’inté rieur de ces variables) depuis un endroit pré cis d'un script.
Lorsqu'une variable n'est accessible que dans une partie de votre code, on dit qu'elle se trouve au
sein d'un « scope ».
10.2. Les variables locales

Une variable est dite « locale » lorsqu’elle est dé inie à l’inté rieur d’une fonction (donc localement).
10.3. Variables globales

Une variable est globale si elle est dé inie dans l’espace global d’un script, c’est-à -dire en dehors de
toute fonction.
10.4. Le mot clef var

Si on omit le mot clé var lorsqu’on veut cré er une variable, le JavaScript va automatiquement cré er
une sorte de variable globale.
41 | Page
11. Les fonctions anonymes
Les fonctions anonymes ont la particularité de ne pas possé der de nom.
Pour appeler (ou exé cuter) ce genre de fonctions, nous allons utiliser une façon trè s simple qui
consiste à enfermer la fonction dans une variable, puis ensuite appeler la variable comme une
fonction.
Il faut juste noter qu’on a met un point-virgule aprè s l’accolade fermante de la fonction anonyme
puisqu’il s’agit d’une instruction et non pas d’une dé claration de fonction proprement dit.
42 | Page
12. Les fonctions auto-invoquées
Les fonctions auto-invoqué es ( self-invoked functions en anglais) vont ê tre des fonctions qui vont
s’appeler elles-mê mes.
13. Les closures en JavaScript

Une closure (de « close », « fermé » en anglais) est une fonction qui va ré cupé rer et pouvoir utiliser
des variables d’environnement dans laquelle elle a é té cré é e.
43 | Page
Noter qu’en JavaScript il est tout à fait normal et naturel qu’une fonction ait accè s aux variables de sa
fonction parente (on parle de parent car on voit bien que notre fonction anonyme est enfermé e dans
notre fonction compteur).
Cependant, notez ici un point trè s inté ressant : si jamais on appelle compteur() , la fonction anonyme
va ê tre renvoyé e mais pas exé cuté e immé diatement.
Rappelez-vous que pour exé cuter une fonction anonyme il faut soit l’enfermer dans une variable soit
la transformer en fonction auto-invoqué e.
Ré sumons donc la situation : si on appelle compteur() , une variable i est initialisé e et notre fonction
anonyme est renvoyé e mais pas exé cuté e.
Ce code comporte deux immenses avantages : d’une part, notre variable i est « proté gé e » au sens où
elle ne peut pas ê tre modi ié e par l’environnement exté rieur. D’autre part, on va pouvoir cré er
autant d’instances de notre fonction compteur() que l’on souhaite.
44 | Page
Typiquement, notre variable (qui contient une fonction et qu’on peut donc é galement appeler
fonction tout simplement) plusUn est ce qu’on appelle une closure.
45 | Page
14. Le DOM HTML
14.1. Dé couverte du Document Object Model (DOM)
Pour manipuler du code HTML dynamiquement en utilisant le JavaScript, nous allons avoir besoin
d’une interface qui va nous permettre d’accé der à ce code HTML.
L’interface que nous allons utiliser va justement ê tre le Document Object Model , ou DOM.
Le DOM est sé paré en trois parties : une partie pour le XML, une partie pour le HTML et une partie
cœur, accessible pour tous. Nous ne nous occuperons pas ici de la partie XML.
Le DOM d’une page va ê tre cré é automatiquement par le navigateur lors du chargement de la page
web.
Le DOM HTML est un standard de programmation reconnu par tous et considè re les é lé ments HTML
comme des objets. Ainsi, nos é lé ments HTML vont possé der des proprié té s et des mé thodes.
Le DOM HTML va é galement nous permettre de dé clencher ce qu’on appelle des événements .
14.2. La structure du DOM HTML

Le document HTML lui-mê me, les é lé ments HTML, les attributs HTML, le texte à l’inté rieur des
é lé ments, sont tous considé ré s comme des nœuds (node en anglais).
Tout objet appartenant au DOM est un node, ou un nœud en français.
Il y a plusieurs types de nœuds correspondant aux diffé rents objets HTML : le type de
nœud ELEMENT_NODE (pour les é lé ments HTML), le type de nœud TEXT_NODE (pour le texte), etc.
46 | Page
Le document en soi est repré senté dans le DOM par un objet Document. L’objet Document, tout
comme tous les autres objets cré é s par le DOM, est un nœud.
L’objet Document va é galement contenir tous les autres objets cré é s par le DOM, comme par exemple
l’objet Element.
Cela signi ie donc que les objets Element vont disposer, en plus de leurs propres proprié té s et
mé thodes, des proprié té s et mé thodes de l’objet Document par hé ritage.
47 | Page
15. Accéder à un élément HTML en JavaScript
15.1. L’objet document et ses mé thodes
Pour accé der aux é lé ments de notre page HTML, nous allons toujours devoir passer par
l’objet Document et non pas l’objet Element comme on pourrait le penser à priori.
15.2. La mé thode getElementById() de l’objet document

La premiè re mé thode, getElementById(), va nous permettre de cibler un é lé ment HTML possé dant
un attribut id en particulier. C’est certainement la mé thode la plus utilisé e.
Si l’é lé ment est trouvé , getElementById() va renvoyer l’é lé ment en tant qu’objet. Si aucun é lé ment
n’est trouvé , la mé thode renverra la valeur null.
48 | Page
Ici, la mé thode getElementById() renvoie les informations suivantes : l’é lé ment HTML portant l’id=
"gros_titre" est un é lé ment de type heading (h).
15.3. La mé thode getElementsByTagName()

La mé thode getElementsByTagName() va retourner des informations relatives à tous les é lé ments
HTML d’un mê me « genre » (tous les é lé ments p par exemple) dans un tableau.
15.4. La mé thode getElementsByClassName()

La mé thode getElementsByClassName() va nous permettre d’accé der aux é lé ments HTML disposant
d’un attribut class en particulier.
getElementsByClassName() va prendre la valeur d’un attribut class en argument. Elle va s’utiliser de
maniè re similaire à la mé thode pré cé dente et renvoyer é galement un tableau.
49 | Page
15.5. Les mé thodes querySelector() et querySelectorAll()
Les mé thodes querySelector() et querySelectorAll() vont nous permettre d’accé der à des é lé ments
HTML correspondant à un certain sé lecteur CSS, que ce soit un id, une class, un type d’é lé ment, un
attribut ou autre.
Ces deux mé thodes vont donc prendre un sé lecteur CSS en argument.
querySelector() va renvoyer des informations relatives au premier é lé ment trouvé correspondant au
sé lecteur CSS sé lectionné , tandis que querySelectorAll() va renvoyer des informations sur tous les
é lé ments correspondants.
Une nouvelle fois, un tableau va ê tre cré é lorsqu’on utilise querySelectorAll().
50 | Page
15.6. Accé der au contenu des é lé ments HTML et au texte
On va é galement pouvoir accé der au contenu des é lé ments HTML, c’est-à -dire à ce qui se situe entre
les deux balises ouvrante et fermante d’un é lé ment.
La maniè re la plus simple de procé der est d’utiliser la proprié té innerHTML sur le ré sultat renvoyé
par nos mé thodes.
Faı̂tes bien attention : innerHTML va bien ré cupé rer tout le contenu d’un é lé ment HTML et pas
seulement le texte contenu dans celui-ci
51 | Page
Si l’on souhaite ne ré cupé rer que le contenu textuel pré sent à l’inté rieur d’un é lé ment, on pré fè rera
alors utiliser la proprié té textContent.
Vous pouvez donc en dé duire que innerHTML et textContent sont des proprié té s de
l’objet Element et non pas Document.
15.7. Accé der directement à des types d’é lé ments

Nous allons voir ici les proprié té s title, body et links qui appartiennent toutes à l’objet Document.
otez que la propriété links va retourner tous les éléments area et a possédant un attribut href dans un
N
tableau.
52 | Page
16. Modi ier du contenu HTML
16.1. Les objets JavaScript document et element
On va appliquer les proprié té s et mé thodes de l’objet Element sur des objets de type element,
c’est-à -dire sur les é lé ments HTML sur lesquels on travaille en particulier.
On appliquera innerHTML sur un é lé ment en particulier ou plus exactement sur l’objet repré sentant
l’é lé ment (auquel on accè dera grâ ce aux mé thodes de l’objet Document).
53 | Page
16.2. Modi ier le contenu d’un é lé ment HTML
La proprié té innerHTML va é galement nous servir à modi ier le contenu d’un é lé ment HTML.
Pour cela, il suf it d’utiliser innerHTML sur un é lé ment et de lui affecter une nouvelle valeur textuelle.
Notez que l’on peut é galement utiliser d’autres opé rateurs d’affectation pour modi ier le contenu
d’un é lé ment HTML. Par exemple, en utilisant +=, on va rajouter du contenu.
16.3. Modi ier la valeur d’un attribut HTML

Pour modi ier la valeur d’un attribut HTML, nous allons gé né ralement utiliser la proprié té attribute
de l’objet Element.
54 | Page
Pour utiliser cette proprié té , nous n’allons pas é crire attribute mais bien le nom de l’attribut dont on
souhaite modi ier la valeur (comme href par exemple).
Pour modi ier la valeur d’un attribut class, il faut utiliser la proprié té className à la place de class
car ce dernier est un mot ré servé .
55 | Page
16.4. Modi ier le CSS d’un é lé ment HTML
Pour ajouter ou modi ier le style CSS d’un é lé ment HTML, on va utiliser la proprié té style de
l’objet Element suivie de la proprié té CSS à ajouter / modi ier.
otez que lorsqu’on utilise la propriété style, il faut supprimer le tiret des propriétés CSS qui
N
en contiennent et mettre une majuscule au deuxième mot ( font-size devient fontSize par
exemple).
17. Ajouter et insérer des éléments HTML

17.1. Cré er un nouvel é lé ment HTML
Pour cré er un nouvel é lé ment HTML en JavaScript, on utilise gé né ralement la
mé thode createElement() de l’objet Document.
56 | Page
Nous allons donc commencer par ajouter du texte et un attribut à notre é lé ment, puis nous
l’insé rerons ensuite dans le lux de notre document.
17.2. Ajouter un attribut et du texte à un é lé ment HTML

Pour ajouter des attributs, on va utiliser notre proprié té attribute ou exceptionnellement avec la
mé thode setAttribute().
Pour ajouter du texte, nous allons utiliser la mé thode createTextNode() qui, comme son nom
l’indique, va cré er un nouveau nœud de type texte.
Il nous reste donc à insé rer le texte dans notre paragraphe puis le paragraphe dans notre page.
17.3. Insé rer du texte et un é lé ment dans une page HTML
Pour insé rer notre texte dans notre é lé ment et notre é lé ment dans le lux de notre page, nous allons
utiliser la mé thode appendChild().
La mé thode appendChild() va insé rer un objet en tant que dernier enfant d’un autre objet. Cette
mé thode appartient à l’objet Element et va prendre le nom de l’objet à insé rer en argument.
57 | Page
17.4. Insé rer un é lé ment HTML à un endroit pré cis
La mé thode appendChild() va toujours insé rer un objet en tant que dernier enfant de l’objet de type
Element indiqué .
Pour insé rer un é lé ment dans un endroit pré cis d’une page HTML. On va utiliser la mé thode
insertBefore().
Cette mé thode appartient é galement à l’objet Element et nous devons lui fournir deux arguments :
l’é lé ment à insé rer et l’é lé ment avant lequel il sera insé ré .
58 | Page
18. Modi ier ou supprimer des éléments HTML
18.1. Supprimer un é lé ment HTML en JavaScript
Pour retirer un é lé ment HTML d’une page en JavaScript, nous allons utiliser la mé thode
removeChild().
Cette mé thode appartient à l’objet Element. Elle va prendre le nom de l’é lé ment à retirer en
argument.
Cette mé thode va supprimer un é lé ment HTML enfant ciblé relativement à son parent.
18.2. Modi ier des é lé ments HTML en JavaScript

Pour modi ier ou remplacer des nœuds / é lé ments HTML par d’autres, on va utiliser la
mé thode replaceChild(), qui est une autre mé thode de l’objet Element.
Cette mé thode va prendre deux arguments : la valeur de remplacement et le nœud qui doit ê tre
remplacé .
59 | Page
Comme replaceChild() est une mé thode de l’objet Element, on va devoir l'appliquer au parent de
l’é lé ment à remplacer.
60 | Page
19. Naviguer dans le DOM
19.1. Naviguer entre les nœuds cré és par le DOM
Il existe des proprié té s spé cialisé es qui vont nous permettre de nous dé placer entre les nœuds trè s
simplement.
● parentNode ;
● childNodes et nodeValue ;
● irstChild et lastChild ;
● nextSibling et previousSibling.
19.2. La proprié té parentNode
La proprié té parentNode va nous permettre d’accé der au nœud parent d’un certain nœud.
Cette proprié té est une proprié té de l’objet Element.
Dans l’exemple ci-dessus, par exemple, parentNode nous permet d’accé der au parent de notre
é lé ment p, c’est-à -dire à notre div.
19.3. Les proprié té s childNodes et nodeValue

ChildNodes, à l’inverse de parentNode, va nous permettre d’accé der aux nœuds enfants d’un certain
nœud HTML.
61 | Page
19.4. Les proprié té s irstChild et lastChild
Les deux proprié té s irstChild et lastChild vont nous permettre d’accé der respectivement au premier
et au dernier enfant d’un nœud.
Comme pour childNodes, les espaces à l’inté rieur des é lé ments vont ê tre considé ré s comme du texte
et le texte lui-mê me comme un nœud texte.
62 | Page
On a utilisé nodeValue pour le premier enfant (qui est un nœud textuel), et innerHTML pour le
dernier (qui est un nœud é lé ment).
19.5. Les proprié té s nextSibling et previousSibling

Les proprié té s nextSibling et previousSibling vont nous permettre d’accé der respectivement au
nœud « frè re » (c’est-à -dire de mê me niveau) suivant le nœud ciblé ou à celui pré cé dent le nœud
ciblé .
ttention une nouvelle fois aux espaces dans votre code, considérés comme des nœuds
A
textuels.
63 | Page
Dans l’exemple ci-dessus, nous n’utilisons que nextSibling car previousSibling s’utilise exactement de
la mê me façon.
20. Les événements en JavaScript

20.1. Dé inition et dé couverte des é vé nements
Les é vè nements correspondent à des actions effectué es soit par un utilisateur, soit par le navigateur
lui-mê me.
Parfois, on va vouloir « attacher » une action spé ci ique à un é vè nement.
Les attributs HTML de type é vè nements sont nombreux. Nous allons passer en revue les plus utilisé s
d’entre eux dans cette partie.
Parmi ceux-ci, nous avons notamment :
● L’attribut onclick : se dé clenche lorsque l’utilisateur clique sur un é lé ment ;
● L’attribut onmouseover : se dé clenche lorsque l’utilisateur passe le curseur de sa souris sur
un é lé ment ;
● L’attribut onmouseout : se dé clenche lorsque l’utilisateur sort son curseur d’un é lé ment ;
64 | Page
● L’attribut onkeydown : se dé clenche lorsque l’utilisateur appuie sur une touche de son clavier
sans la relâ cher avec son curseur sur l’é lé ment.
20.2. L’utilisation du mot clef this dans la gestion d’é vè nements
Pour rappel, en JavaScript, le mot clef this nous sert de ré fé rence à diffé rents objets selon le contexte.
Dans le contexte de la gestion d’é vé nements, this va faire ré fé rence à l’objet (repré sentant l’é lé ment
HTML) qui est le sujet de l’é vé nement.
Par exemple, si on reprend l’exemple de notre paragraphe, ce paragraphe est le sujet de l’é vé nement
car c’est lui qui possè de l’attribut d’é vè nement et le code associé qui va dé clencher une action lors
du clic.
En utilisant this dans notre code JavaScript dans ce cas, on va donc travailler sur l’é lé ment p en soi.
20.3. Les é vè nements et le DOM

La gestion des é vè nements va devenir vé ritablement inté ressante lorsqu’on va ré agir aux
é vè nements via le DOM HTML.
Nous avons deux maniè res de ré agir aux é vè nements avec le JavaScript :
● on peut soit utiliser des proprié té s qui vont assigner un gestionnaire d’é vé nement à un
é lé ment spé ci ique en HTML,
● soit utiliser la mé thode addEventListener().
65 | Page
La premiè re mé thode, à savoir l’utilisation de proprié té s est une ancienne mé thode et vous ne
devriez plus l’utiliser aujourd’hui car elle possè de des limitations.
L’une des plus importantes d’entre elles est que l’on ne peut pas assigner plusieurs fois le mê me
gestionnaire d’é vé nement à un é lé ment HTML.
Notez que les proprié té s possè dent souvent des noms analogues aux attributs HTML (l’attribut
HTML onclick devient la proprié té JavaScript onclick par exemple).
En effet, rappelez-vous que pour exé cuter une fonction anonyme, nous devions jusqu’à pré sent soit
la transformer en fonction auto invoqué e, soit l’enfermer dans une variable puis appeler cette
variable avec un couple de parenthè ses.
Ici, nous voyons une troisiè me façon de faire : l’assigner à un é vè nement.
66 | Page
21. La méthode addEventListener()
21.1. Pré sentation de la mé thode addEventListener()
La mé thode addEventListener() va nous permettre de lier du code à un é vè nement. On parlera alors
de gestionnaire d’é vè nements.
Le code sera alors exé cuté dè s le dé clenchement de l’é vè nement.
Cette mé thode appartient à l’objet Element et va avoir besoin de deux arguments pour fonctionner :
● le nom de l’é vè nement dé clencheur de l'action
● le code relatif à l’action à effectuer.
Les é vé nements vont une nouvelle fois avoir des noms similaires aux attributs HTML mais ne vont
plus ê tre pré cé dé s du « on » (par exemple, onclick devient click).
67 | Page
On peut é galement utiliser une fonction anonyme en second argument de notre mé thode.
21.2. Pourquoi utiliser la mé thode addEventListener() ?

L’un des grands avantages de la mé thode addEventListener() est de pouvoir lier plusieurs
gestionnaires d’é vè nements de mê me type sur un é lé ment HTML.
68 | Page
La mé thode addEventListener() va é galement nous permettre de lier plusieurs é vè nements
diffé rents à un mê me é lé ment HTML.
Par exemple, on va pouvoir exé cuter un code lorsqu’un utilisateur dé place le curseur de sa souris
sur un é lé ment et un autre code lorsqu’il reste cliqué dessus.
Pour faire cela, nous allons utiliser respectivement les deux é vè nements mouseover et mousedown.
69 | Page
70 | Page
Si on souhaite rendre son comportement d’origine à notre paragraphe une fois les é vè nements
dé clenché s, on doit utiliser é galement les é vè nements mouseout et mouseup.
71 | Page
22. La propagation des évènements : capture et bouillonnement
22.1. Pré sentation du phé nomè ne de propagation des é vè nements
On va utiliser le terme de « propagation » des é vè nements pour caracté riser l’ordre dans lequel
diffé rents é vè nements vont se dé clencher.
22.2. Le sens de propagation des é vè nements

Un é vè nement va toujours partir de la racine de notre arbre DOM, c’est-à -dire de notre é lé ment html,
vers l’é lé ment le plus profond comportant un gestionnaire de cet é vè nement.
Cette « descente » le long de l’arbre DOM est appelé e phase de « capture ».
Ensuite, une fois l’é lé ment atteint, notez bien que l’é vè nement ne va pas s’arrê ter mais va faire le
chemin inverse et remonter le long de l’arbre jusqu’à l’é lé ment html.
Cette deuxiè me phase de « remonté e » est appelé e la phase de « bouillonnement ».
72 | Page
22.3. Gé rer l’ordre de dé clenchement des é vè nements
Les é vè nements vont se dé clencher par dé faut durant la phase de bouillonnement.
On peut choisir durant quelle phase les é vè nements doivent se dé clencher en ajoutant un 3é me
paramè tre à addEventListener().
Ce paramè tre prend la forme d’un boolé en (true ou false). Si l’on indique la valeur false (valeur par
dé faut), on choisit de ne dé clencher l’é vè nement que lors de la phase de bouillonnement.
Si en revanche on choisit la valeur true, on choisit de dé clencher l’é vè nement lors de la phase de
capture.
73 | Page
22.4. L’objet Event-Empê cher la propagation d’un é vè nement
22.4.1. Proprié té s et mé thode de l’objet Event
Notez que cet objet n’est accessible que durant le dé clenchement d’un é vè nement. Il faut donc y
accé der au sein de la fonction servant à exé cuter une action lors du dé clenchement de l’é vè nement.
Event possè de une dizaine de proprié té s. Nous allons voir les
proprié té s target, currentTarget et type.
22.4.2. Les proprié té s target et currentTarget de l’objet Event
La proprié té target va retourner le type de l’é lé ment qui a dé clenché l’é vè nement.
La proprié té currentTarget va elle retourner le type de l’é lé ment portant le gestionnaire de
l’é vè nement dé clenché .
74 | Page
Lorsqu’on clique sur le paragraphe :
Lorsqu’on clique sur le div :
22.4.3. La proprié té type de l’objet Event

La proprié té type de l’objet Event va tout simplement retourner le type d’é vè nement qui a é té
dé clenché .
22.4.4. Empê cher la propagation d’un é vè nement

Pour empê cher la propagation d’un é vè nement on va utiliser la mé thode stopPropagation(), qui est
une mé thode de l’objet Event.
75 | Page
Cette mé thode va faire qu’un é vè nement va arrê ter de se propager aprè s avoir rencontré l’é lé ment
la portant.
Si on clique sur le paragraphe ou sur le div :
Si on clique sur ok la boite de dialogue ne s’af iche plus.

22.4.5. Empê cher l’exé cution d’un gestionnaire d’é vè nements
Pour certains é vè nements, on va é galement pouvoir empê cher tout simplement l’é vè nement en soi.
Pour cela, on va utiliser une autre mé thode de l’objet Event : la mé thode preventDefault().
Notez é galement que preventDefault() ne va en revanche pas stopper la propagation d’un
é vè nement.
76 | Page
77 | Page
23. Le BOM Browser Object Model
23.1. L’objet JavaScript window et ses mé thodes
23.1.1. Introduction au BOM – L’objet Window
Le BOM, ou Browser Object Model va lui nous permettre d’accé der au navigateur, et notamment à la
fenê tre ouverte actuellement en utilisant le JavaScript.
L’objet le plus cé lè bre et le plus utilisé du BOM est l’objet Window. L’objet Window va tout
simplement repré senter la fenê tre du navigateur.
Vous devez savoir que toutes les fonctions, variables et objets globaux appartiennent
automatiquement à l’objet Window.
Cependant, l’objet Window est dit implicite . Cela signi ie que nous n’aurons gé né ralement pas
besoin de le mentionner pour utiliser les mé thodes (ou fonctions globales) et proprié té s (ou
variables globales) lui appartenant.
La fonction alert() est é galement une mé thode de l’objet Window.
L’objet Document (appartenant au DOM) est une proprié té de Window.
23.1.2. La mé thode open() de Window
La mé thode open() va nous servir à ouvrir un nouvel onglet ou une nouvelle fenê tre.
Open() peut prendre jusqu'à quatre arguments, tous optionnels. Utilisé e sans argument, cette
mé thode va ouvrir un nouvel onglet vide.
23.1.3. La mé thode close() de Window

La mé thode close() va elle permettre de fermer un onglet / une fenê tre. Cette mé thode n'a pas
besoin d'argument.
78 | Page
23.1.4. La mé thode resizeTo() de Window
La mé thode resizeTo() va nous permettre de redimensionner une fenê tre ou un onglet.
79 | Page
23.2. L’objet JavaScript screen
23.2.1. Pré sentation et proprié té s de l’objet Screen
L’objet Screen nous donne accè s à des informations concernant l’é cran de vos visiteurs, comme la
taille ou la ré solution de l’é cran par exemple.
L’objet Screen possè de six proprié té s inté ressantes :
● width : retourne la largeur totale de l’é cran ;
● availWidth : retourne la largeur de l’é cran moins celle de la barre de tâ ches ;
● height : retourne la hauteur totale de l’é cran ;
● availHeight : retourne la hauteur de l’é cran moins celle de la barre de tâ ches ;
● colorDepth : retourne la profondeur de la palette de couleur de l’é cran en bits ;
● pixelDepth : retourne la ré solution de l’é cran en bits par pixel.
23.2.2. Utilisation des proprié té s de Screen
80 | Page
23.3. L’objet JavaScript navigator
23.3.1. Pré sentation et proprié té s de l’objet Navigator
L’objet Navigator va nous donner des informations sur le navigateur de vos visiteurs en soi ainsi que
sur les pré fé rences enregistré es (langue, etc.).
L’objet Navigator possè de dix proprié té s :
● language : retourne la langue dé inie dans le navigateur ;
● geolocation : retourne un objet « geolocation » qui peut ê tre utilisé pour dé inir la localisation
de l’utilisateur ;
● product : retourne le nom du moteur utilisé par le navigateur ;
● cookieEnabled : dé termine si les cookies sont autorisé s ou non ;
● appName : retourne le nom du navigateur ;
● appCodeName : retourne le nom de code du navigateur ;
● appVersion : retourne la version du navigateur utilisé e ;
● online : dé termine si le navigateur est en ligne ou pas ;
● platform : dé termine pour quelle plateforme le navigateur est compilé ;
● userAgent : retourne l’en-tê te du ichier user-agent envoyé par le navigateur au serveur ;
De plus, Navigator possè de une mé thode inté ressante : la mé thode javaEnabled(), qui dé termine si
Java a é té activé sur le navigateur ou pas
81 | Page
23.3.2. La proprié té geolocation de l’objet Navigator
Pour tenter de ré cupé rer la localisation de nos visiteurs, nous allons devoir utiliser la
proprié té geolocation.
Cette proprié té est un peu plus complexe à utiliser puisqu’elle va renvoyer un objet geolocation qui
va ê tre inexploitable tel quel.
Nous allons devoir utiliser la mé thode getCurrentPosition() de l’objet geolocation pour obtenir une
information exploitable.
On va donner une autre mé thode en argument de getCurrentPosition() qui sera chargé e de renvoyer
la latitude et la longitude de l’utilisateur si on y a accè s.
82 | Page
23.4. L’objet JavaScript location
23.4.1. Pré sentation de l’objet Location
L’objet Location appartient à Window. Celui-ci va nous fournir des informations relatives à l’URL de
la page actuelle.
L’objet Location possè de neuf proprié té s :
● hash, qui retourne la partie ancre d’une URL ;
● search, qui retourne la partie recherche de l’URL ;
● pathname, qui retourne le chemin de l’URL ;
● href, qui retourne l’URL complè te ;
● hostname, qui retourne le nom de l’hô te ;
● port, qui retourne le port de l’URL ;
● protocole, qui retourne le protocole de l’URL ;
● host, qui retourne le nom de l’hô te et le port relatif à l’URL ;
83 | Page
● origin, qui retourne le nom de l’hô te, le port et le protocole de l’URL.
Location possè de é galement trois mé thodes qui sont trè s inté ressantes :
● La mé thode assign() qui va charger un nouveau document ;
● La mé thode reload() qui va recharger le document ;
● La mé thode replace() qui va remplacer le document actuel par un autre.
23.4.2. Utilisation des proprié té s et mé thodes de Location
a différence fondamentale entre les méthodes assign() et replace() est la suivante :

L
avec assign(), on peut revenir en arrière pour revenir sur notre page de départ, ce qui est
84 | Page
i mpossible avec replace() vu que cette méthode charge une page qui remplace complètement
la précédente.
23.5. L’objet JavaScript history

23.5.1. Pré sentation de l’objet History
L’objet History appartient à Window.
History va nous permettre de nous dé placer dans l’historique de nos visiteurs et nous donner des
informations relatives à celui-ci. Evidemment, nous allons ê tre limité s aux informations auxquelles
l’utilisateur nous donne accè s.
L’objet History possè de une proprié té et trois mé thodes :
● La proprié té length nous permet de connaı̂tre le nombre d’URL dans l’historique ;
● La mé thode back() nous permet de charger la derniè re URL disponible dans l’historique
(l’URL la plus ré cente) ;
● La mé thode forward() nous permet de charger l’URL suivant une premiè re URL dans
l’historique (l’URL directement la plus ré cente par rapport à une premiè re).
● La mé thode go() nous permet de charger une URL spé ci ique dans l’historique.
85 | Page
orsque l’on parle d’historique, ici, on ne parle pas de l’historique de navigation du
L
navigateur de vos visiteurs mais bien l’historique relatif à la fenêtre courante (combien de
pages avez-vous chargé dans cet onglet).
86 | Page
24. Les expressions régulières REGEX
24.1. Dé couverte des regex en JavaScript
24.1.1. Introduction aux expressions ré guliè res et dé inition
Commencez par noter que les expressions ré guliè res, ou « regex » en abré gé , forment un langage à
part qui n’appartient pas exclusivement au JavaScript et qui ne constitue pas non plus un langage de
programmation à proprement parler.
Le grand inté rê t des expressions ré guliè res est qu’on va pouvoir les utiliser conjointement avec de
nombreux langages, comme le JavaScript ou le PhP par exemple.
Une expression ré guliè re va consister en une suite de caractè res qui vont former, ensemble, un
sché ma de recherche.
Pour faire trè s simple, les expressions ré guliè res vont nous permettre de vé ri ier la pré sence de
certains caractè res ou suites de caractè res dans une expression.
Les regex vont nous permettre de vé ri ier, par exemple, qu’un utilisateur a bien mentionné une suite
de dix chiffres dans le champ « numé ro de té lé phone » d’un formulaire d’inscription.
Le JavaScript va supporter les expressions ré guliè res via son objet regExp, qui va nous permettre
d’exploiter toute la puissance de celles-ci.
L’objet regExp va bien entendu possé der des proprié té s et mé thodes qu'on va pouvoir utiliser avec
nos expressions ré guliè res.
24.1.2. Syntaxe des regex et premiers exemples
Pour construire une expression ré guliè re, il suf it de pré ciser une sé quence de caractè res et
d’entourer cette sé quence par des caractè res d’encadrement (ou dé limiteurs).
Il est conseillé d’utiliser le slash (« / ») comme caractè re d’encadrement.
Notez é galement qu’une expression ré guliè re peut contenir des options.
Ces caractè res d’options vont avoir une signi ication spé ciale dans le langage des regex et vont ê tre
les seuls caractè res qui vont devoir ê tre placé s en dehors des dé limiteurs, en in de regex.
Le caractè re i, par exemple, signi ie que notre regex va ignorer la casse de notre sé quence de
caractè res (isigni ie ici « case-insensitive »).
Ainsi, en rajoutant le i aprè s notre deuxiè me caractè re d’encadrement, on indique que l’on ne
travaille plus seulement avec « Pierre », mais avec toutes ses dé clinaisons de casse comme « karim »,
« KARIM» ou encore « KaRiM » par exemple.
87 | Page

Java Script

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Java Script

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript

1.2. Où é crire le JavaScript

1.2.3. Dans un ichier portant l’extension « .js » sé paré

1.3. Syntaxe et commentaires

1.4. Dé couverte des variables

1.5. Les types de valeurs

1.5.3. Le type de valeurs String

1.5.6. Changer le type d’une valeur stocké e dans une variable

1.5.7. Tester le type de valeur d’une variable

1.6.2. Priorité s de calcul

1.7. La concaté nation

1.7.2. Additionner un nombre et une chaı̂ne de caractè res

1.8. Pré sentation des conditions

1.9. Les conditions if, if...else, if...else if...else

1.11. Conditions ternaires

1.13. Les boucles

1.13.2. La boucle do while

1.13.3. La boucle for

1.14.2. Paramè tres ou arguments

2. Les objets en JavaScript

2.3. Cré ation d’objets en JavaScript et identité des objets

2.3.3. L’identité des objets

4.2. La mé thode toString()

4.4. La mé thode toPrecision()

4.6. Quelques mé thodes globales inté ressantes

5.2. Cré ation et syntaxe d’un tableau

5.3. Connaı̂tre le nombre d’é lé ments dans un tableau

5.4. Parcourir un tableau et af icher toutes ses valeurs

6.5. Inverser l’ordre des é lé ments d’un tableau

6.7. Cré er un tableau à partir d’un autre

6.8. Cré er un tableau à partir de plusieurs tableaux

7.2. Ré cupé rer la date actuelle

7.3. Cré er un objet de type date

7.3.2. La deuxiè me façon

7.3.3. La troisiè me façon

7.4. Les formats de date en JavaScript

7.4.3. La date ISO (date) anné e seulement

7.4.4. La date ISO (date-temps)

La date et le temps sont sé paré s par un T.

getDay() renvoie un nombre entre 0 (Dimanche) et 6 (Samedi).

8.2. Les setters de l’objet Date

9.1.4. Les mé thodes min() et max()

10.2. Les variables locales

10.3. Variables globales

10.4. Le mot clef var

13. Les closures en JavaScript

14.2. La structure du DOM HTML

15.2. La mé thode getElementById() de l’objet document

15.3. La mé thode getElementsByTagName()

15.4. La mé thode getElementsByClassName()

15.7. Accé der directement à des types d’é lé ments

16.3. Modi ier la valeur d’un attribut HTML

17. Ajouter et insérer des éléments HTML

17.2. Ajouter un attribut et du texte à un é lé ment HTML

18.2. Modi ier des é lé ments HTML en JavaScript

19.3. Les proprié té s childNodes et nodeValue

19.5. Les proprié té s nextSibling et previousSibling

20. Les événements en JavaScript

20.3. Les é vè nements et le DOM

21.2. Pourquoi utiliser la mé thode addEventListener() ?

22.2. Le sens de propagation des é vè nements

Lorsqu’on clique sur le div :

22.4.3. La proprié té type de l’objet Event