Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur Objectifs opérationnels - Stocker des données à l’aide des variables - Traiter des données à l’aide des opérateurs. - Communiquer avec l’internaute à l’aide des E/S de base - Contrôler le flux d’exécution des instructions. - Réutiliser et organiser le code en créant des fonctions - Créer l’interactivité grâce à la gestion des évènements - Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets - Gérer les propriétés de la fenêtre avec l’objet window - Manipuler le contenu de la page Web grâce à l’objet document - Contrôler la saisie d’un formulaire avec l’objet form

1. Introduction
à JavaScript
M. Abdoulaye DIENG 1Juillet 2020

2. Objectif général
Savoir créer des pages Web interactives sans trop
solliciter le serveur et le réseau pour offrir une
meilleure expérience utilisateur
2

3. Objectifs opérationnels
 Stocker des données à l’aide des variables
 Traiter des données à l’aide des opérateurs.
 Communiquer avec l’internaute à l’aide des E/S de base
 Contrôler le flux d’exécution des instructions.
 Réutiliser et organiser le code en créant des fonctions
 Créer l’interactivité grâce à la gestion des évènements
 Traiter plus facilement plusieurs données connexes grâce
aux tableaux et aux objets
 Gérer les propriétés de la fenêtre avec l’objet window
 Manipuler le contenu de la page Web grâce à l’objet
document
 Contrôler la saisie d’un formulaire avec l’objet form
3

4. Sommaire
1. Présentation de JavaScript
2. Inclusion du JavaScript
3. Variable et types primitifs
4. Opérateurs
5. Entrée/Sortie de base
6. Structures de contrôle
7. Fonctions
8. Objets
8. Evénements
9. Objet Array
10. Objet Window
11. Objet Document
12. Objet Form
4

5. Qu’est ce JavaScript?
 Pb : comment interagir efficacement avec l’internaute ?
 Sol : recueillir et traiter des données côté client
 JavaScript = langage de script à incorporer dans une page Web
pour créer de l’interactivité sans trop solliciter le serveur.
 Créé en 1995 par Brendan Eich de Netscape à cette époque
 JS permet au navigateur, entre autres, de :
• traiter les saisies et frappes faites au clavier ;
• traiter les mouvements et clics de la souris ;
• réagir aux actions précitées avec des sorties
à l'écran ou des modifications dans la page ;
• effectuer des traitements en mode asynchrone .
 Last version : ECMAScript 7
en juin 2016 5

6. Inclusion du JavaScript
 Inclusion interne : n’importe où dans la page html en
délimitant le code avec l’élément html script comme suit :
<script type="text/javascript">
//code JS
</script>
 Inclusion externe : écrire le code JS dans un fichier .js à inclure
dans une page html comme suit :
<script type="text/javascript" src="chemin/du/fichier_inclus.js">
</script>
 Toute dépendance doit être incluse avant le code.
6

7. Variable
 Variable : emplacement mémoire pour le stockage
d’une donnée
 Syntaxe de déclaration :
var nomVariable;
 Avec ES6 :
let nomVar
const NOM_CONSTANTE=valeur
 Exemples
let i;
var taille, age = 26;
const PI = 3.14;
 JavaScript est un langage dont le typage est :
– faible : pas nécessaire de déclarer le type d'une variable avant
de l'utiliser
– dynamique : la même variable peut avoir différents types au
cours de son existence 7
v
a
l
e
u
r
identificateur

8. Types primitifs
undefined et number
 undefined : variable non initialisée
8
 number
• entier (32 bits)
Ex : 47
• réels (64 bits) :
forme décimal ou
avec exposant (e ou E).
Ex : 3.14159, 123e5, 123e-5
• +Infinity (+infini), -Infinity
et NaN (Not a Number)

9. Types primitifs
string et boolean
 string
• string = suite de caractères
(unicode 16 bits).
• une littérale string est délimitée
par des quotes (' ou " ).
Ex : 'Bonjour', "Bonsoir"
 boolean
– Deux valeurs uniquement :
true ou false.
– Seules les valeurs 0 et ses
variations, "" (la chaîne vide),
null, undefined donnent false
par conversion. 9
• l’anti-slash () : caractère d’échappement
', ", , n, r, t, b, …
Ex : 'Il s'appelle Toto. n Elle, Titi '

10. Types primitifs
conversion chaînes de caractère en nombre
 parseFloat(chaine)
• Analyse une chaîne et retourne un nombre à virgule
flottante ou retourne NaN.
• Exemples :
parseFloat("0.0314E+2"); // 3.14
parseFloat("3.14=pi"); // 3.14
parseFloat("FF2"); // NaN
 parseInt(chaine[, base=10])
• Analyse une chaîne et retourne un entier dans la base base
ou retourne NaN.
• Exemples :
parseInt("F", 16); parseInt("15.99"); // 15
parseInt("116", 2); // 3
parseInt("611", 2); // NaN
 Tout caractère de la chaîne analysée est retourné jusqu'à ce
qu’un caractère non conforme soit rencontré. 10

11. Opérateurs
 Opérateur : outil primitif de traitement de données
 Opérateurs arithmétiques
+, -, *, /, % (modulo), ++(incrément), --(décrément)
NB : + permet aussi de concaténer (ou fusionner) deux string
 Opérateurs d’assignation
= (affectation), += (ajouter à), *=, /=, -=, %=
NB : += permet aussi de concaténer deux string
 Opérateurs logiques
&& (et), || (ou), ! (non)
 Opérateurs de comparaison
== (égalité après une éventuelle conversion de type),
=== (égalité incluant le type), <, <=, >, >=,
!= (différent), !== (inégalité incluant le type)
NB : permettent aussi de comparer deux string
en ordre lexicographique. 11

12. Entrée/Sortie de base
affichage d’une fenêtre d’invite de saisie
 prompt("question" [, "texteParDéfaut"])
• Ecrit une question dans une boîte de dialogue munie d’une zone de
saisie et de deux boutons OK et Annuler;
• Le texte par défaut, s’il est mis, s’affiche dans la zone de saisie pour
aider l’internaute à répondre à la question
• Retourne la chaîne de caractères (même si c’est un nombre) saisie
par le visiteur qui appuie aussi sur OK
• Retourne null si le visiteur clique sur Annuler
• Remplacer les caractères accentués par leur code latin-1 en octal
précédé de l’anti-slash.
Ex : é (351), è (350), ê (352), à (340), â (342)
Table complète : www.pjb.com.au/comp/diacritics.html
 Exemple (à tester avec la console)
prompt("Quel est votre pr351nom SVP ?" , "Saisissez-le ici")
12

13. Entrée/Sortie de base
affichage d’une fenêtre de demande de confirmation
 confirm("texte")
• Ecrit une string et/ou la valeur d’une expression dans une boîte de
dialogue munie de deux boutons OK et Annuler,
• Retourne true si le visiteur clique sur Ok
• Retourne false si le visiteur clique sur Annuler ou appuie sur la
touche Echap.
• Une string et une expression sont concaténées par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère n.
• Remplacer tout caractère non-ASCII par son code latin-1 en octal
précédé de l’anti-slash.
 Exemple (à tester avec la console)
confirm("Confirmez-vous le pr351nom Toto ?")
13

14. Entrée/Sortie de base
affichage d’une fenêtre d’alerte
 alert("texte")
• Ecrit une string et/ou la valeur d’une expression dans une boîte de
dialogue munie d’un bouton OK.
• Retourne toujours undefined
• Une string et une expression sont concaténées par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère spécial de
retour à la ligne n.
• Remplacer tout caractère non-ASCII par son code latin-1 en octal
précédé de l’anti-slash.
 Exemple (à tester avec la console)
alert("Nous allons valider votre pr351nom comme 351tant Toto
!")
14

15. Entrée/Sortie de base
affichage dans la page Web
 document.write("texte")
• Ecrit une string et/ou la valeur d’une expression dans le corps
(body) du document, à la position de l'appel du script
• Une string et une expression sont concaténées par , ou par +
• Pour écrire sur plusieurs lignes, utiliser la balise <br>.
• Remplacer tout caractère non-ASCII par son code html ou par
son code latin-1 en octal précédé de l’anti-slash.
 Exemple (à tester avec la console)
document.write("Votre pr351nom est vraiment <b>Toto</b>")
15
x

16. Structures de contrôle
présentation
 Par défaut, les instructions d’un programme sont exécutées d’une
manière séquentielle.
Exemple :
let prenom = prompt("Quel est votre pr351nom SVP ?")
confirm("Confirmez-vous le pr351nom "+prenom)
document.write("Votre pr351nom est vraiment "+prenom)
• Parfois, il est nécessaire qu’un traitement (une ou +sieurs
instructions) ne soit pas systématiquement exécuté ou soit
exécuté plusieurs fois :
d’où l’intérêt des structures de contrôle.
• Deux grands types de structures de contrôle :
– structures conditionnelles ou tests ;
– structures répétitives (ou itératives) ou boucles.
16

17. Structures de contrôle
conditionnelles - Syntaxe
 if (condition) {
traitement_1
}
[else {
traitement_2
}]
17
if (condition_1){
traitement_1
}else if
(condition_2){
traitement_2
}
… // suite de else if
}else {
traitement_n
}
switch (expression){
case valeur_1 : traitement 1;
break;
case valeur_2 : traitement 2;
break;
… // suite de case
[default : traitement par défaut]
}

18. Structures de contrôle
exemple-if.html - exemple-switch.html
18
x

19. Structures de contrôle
répétitives - Syntaxe
 while(condition){
traitement
}
 do{
traitement
}while(condition);
 for(initialisation; condition; modification){
traitement
}
19

20. Structures de contrôle
exemple-while.html – exemple-do-while-and-for.html
20
x

21. Fonctions
présentation
• Fonction = ensemble d’instructions portant un nom
• Utilité :
– implémenter la décomposition d’un problème en sous-problèmes
– faciliter la lisibilité, le débogage et la réutilisabilité/factorisation
• Une fonction est définie avec un nom, un corps et d’éventuels
arguments (ou paramètres formel) lui permettant de communiquer
• Une fonction n’est exécutée que lorsqu’elle est appelée
• Lors de l’appel, tout paramètre formel est associé à une variable ou une
constante nommée « paramètre effectif » du code appelant
• Après son exécution une fonction peut retourner explicitement une
valeur
21

22. Fonctions
syntaxe
 Syntaxe de la définition d’une fonction
• Avec une instruction :
function nomDeLaFonction([arg_1 [, arg_2, …] ] ) {
séquence d'instructions;
[return expression]
}
• Dans une expression : le nom de la fonction est optionnel.
Exemples :
let myVar = function(){ … }
elt.onclick = function(){ alert("Pourquoi m'avez-vous cliqué
?")}
 En JS, une fonction retourne toujours une valeur
 L'appel d'une fonction qui :
• retourne undefined constitue une instruction en lui-même ;
• retourne une valeur différente de undefined est remplacé à
l'exécution par cette valeur retournée ; cet appel doit
forcément se trouver dans un calcul, une affectation, un
22

23. Fonctions
exemple-fonction-sans-return.html
23

24. Fonctions
exemple-fonction-avec-return.html
24
x

25. Fonction
Arrow function
 Une expression de fonction fléchée permet d'avoir une syntaxe
plus courte
 Syntaxe
– ([param] [, param]) => { instructions }
– 1 seul argument ne nécessite pas de parenthèses
– 1 seule expression ne nécessite pas d'accolades et sa valeur
est la valeur de retour implicite pour cette fonction.
 exemple-arrow-fonction.html (fonctions à définir et à appeler)
– let sayHello = nbr => {
for(let i=1; i<=nbr; i++){
console.log('Hello World');
}
}
– let multiplier = (a,b) => a*b;

26. Fonction
callback
 Callback (fonction de rappel) = fonction passée en paramètre à
une autre pour être exécutée plus tard
 Pas d’exécution immédiate => Pas de parenthèses « () » en
suffixe dans la syntaxe du paramètre
 Quelques usages
 setTimeout() et setInterval()
 Gestion d’évènements
 Traitement asynchrone
 exemple-callback.html
26
x

27. Objet
présentation
 La programmation orientée objet consiste à modéliser un
concept du monde réel en entités informatiques
 Chaque entité informatique est appelée objet et est caractérisé
par :
 son identifiant : nom qui le distingue
 ses attributs : données qui le caractérisent
 ses méthodes : fonctions qui caractérisent son
comportement et les actions qu’il peut subir
 Exemple : personne
 Attributs : nom, âge, taille, poids, …
 Opérations possibles : saluer, grandir, grossir, …
27

28. Objet
création avec une notation littérale
28
 Notation littérale : ensemble de couples (propriété,valeur)
 Type de valeur : primitif, tableau, objet et fonction
 Si valeur est de type fonction alors propriété = méthode
 Syntaxe
let nomObjet = { clé1:valeur1, clé2:valeur2, … }
 exemple-objet.html
this fait référence à l’objet courant (ici, personne)

29. Objet
accès aux membres
 Syntaxes
nomObjet.nomPropriété
nomObjet.nomMéthode()
 exemple-objet.html (suite)
29
Ces deux instructions sont à rajouter après l’accolade
fermante de la création de l’objet personne

30. Evénements
présentation
 Événement = changement d'état de l'environnement
qui peut être intercepté par le code JavaScript
 Un événement peut être provoqué par l'utilisateur (pression
d'une touche, ...), par le document (chargement d'une image,
...), ou même par le développeur (soumission d’un form. valide)
 Quelques évènements relatif à un document Web
– mouseover : le pointeur de la souris survole l’élément
– click : l’élément associé est cliqué
– mouseout : le pointeur de la souris quitte l’élément
– focus : l’élément associé est ciblé
– blur : l’élément associé n’est plus ciblé
– change : le contenu du champ associé est modifié
– load : la page est chargée dans le navigateur
– submit : le formulaire associé est soumis
30

31. Evénements
gestionnaire d’évènement DOM 2
 Gérer un événement = associer une action à un événement.
« Lorsque tel événement se produit, faire telle action »
 Principe
1) Référencer ou modéliser en objet JavaScript, le contenu
HTML sur lequel l’événement est écouté
2) invoquer addEventListener() sur le modèle objet
 Quelques syntaxes de modélisation d’un contenu HTML
• let nomObjet =
document.getElementById("id_element_html")
• let nomObjet = document.querySelector("selecteurCSS")
 Syntaxe du gestionnaire d’évènement
nomObjet.addEventListener('nomEvent', function(){
// action à faire lorsque l’événement écouté se produit
});
31
x

32. Evénements
exemple-gestionnaire-evenement.html
32
x

33. Objet Array
présentation
 Objet Array : créer et manipuler des tableaux
 Définition d’un tableau : var nomTab = new Array();
 Initialisation : nomTab[ i ]= element;
 Définition et initialisation :
– avec Array() :
var nomTab=new Array( element_1 , element_2[, …] );
– littéral : var nomTab=[ element_1 [, element_2, …] ];
– Ex : var j_tab = new Array("j", "a", "v", "a");
var s_tab=["s", "c", "r", "i", "p", "t"];
 length : propriété de l’objet Array, renvoi le nombre de valeurs
contenues dans un tableau
 Parcourt d’un tableau
for(let i in nomTab){
traitement
}
i est un indice du tableau
 NB : qd for … in parcourt un autre objet (i est une propriété)
for(let val of nomTab){
traitement
}
ES6
val est une valeur du tableau33

34. Objet Array
quelques méthodes
 .push(newElt1 [,newElt2, …]) ajoute 1 ou +sieurs élément(s) à
la fin et retourne la nouvelle taille
 .shift()/.pop() supprime et retourne le premier/dernier élément
 .splice(deb, n[, elem1[, élem2, ...]]) supprime n (≥0) élément(s)
à partir de l’indice deb et/ou insère tout élément spécifié. Elle
retourne un tab contenant l’(ou les) élément(s) supprimé(s).
 .slice(deb [,fin]) retourne le tableau des éléments de
l'indice deb à l'indice fin-1
 .reverse() retourne un tab en inversant l'ordre de ses éléments.
 .sort() retourne un tab en triant ses éléments par ordre
alphabétique croissant.
 .join(['sep']) joint les éléments d’un tableau avec sep (virgule,
par défaut) pour former et retourner une chaîne de caractères
 tab1.concat(tab2 [, tab3, …]) fusionne tab1 à d’autres tableaux
et retourne le tableau obtenu
34

35. Objet Array
quelques méthodes utilisant des fonctions de rappel
 .reduce( function(acc, val, indice, tab), val_init ) applique une
fonction qui est un « accumulateur » et qui traite chaque valeur
d'un tableau afin de le (tableau) réduire à une seule valeur. acc
est la valeur précédemment retournée par le dernier appel du
callback, ou val_init.
 .map(function(val, indice, tab) ) retourne un nouveau tableau
composé des images des éléments d'un tableau par une
fonction donnée en argument
 .filter(function(val, indice, tab) ) retourne un nouveau tableau
composé des éléments du tableau d'origine pour lesquels la
fonction de rappel retourne true.
 .forEach(function(val, indice, tab) ) exécute une fonction de
rappel sur chaque élément du tableau
 + d’infos :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
35
x

36. Objet window
 Objet window : gestion de la fenêtre
 Objet propriétaire, par défaut, de toute variable ou méthode
 .name : retourne ou défini le nom de la fenêtre
 .alert(), .confirm() et .prompt() : boîtes de dialogue (déjà vues)
 .setTimeout(fct, delai) : appelle la fonction fct après delai ms
et retourne un identificateur numérique
NB : définition de fct en paramètre
 .clearTimeout(id) : efface un délai défini par setTimeout()
 .setInterval(fct, delai) : appelle la fonction fct chaque delai ms
et retourne un identificateur numérique
 .clearInterval(id) : efface un délai défini par setInterval()
 exemple-window.html
(à tester puis à modifier pour ne permettre que 3 affichages)
function sayHello(){
document.write('<br>Hello World');
}
setInterval(sayHello,3000);
36
x

37. Objet document
arbre DOM
37

38. Objet document
présentation
 Objet document : gestion du contenu d’une page Web
 .write() : écrire dans un document
 .createElement("typeEltHTML") crée un élément du type
spécifié
 element.cloneNode(profond) renvoie une copie du nœud
element avec profond, une valeur booléenne obligatoire,
indiquant si la copie doit se faire en profondeur ou non
 .getElementById("nomId") retourne un élément à partir de son
id
 .getElementsByTagName("nomElement") retourne un tableau
d‘éléments HTML à partir de leur nom
 .querySelector("selecteur") retourne le 1er élément satisfaisant
au sélecteur CSS.
 .querySelectorAll("selecteur") retourne un tableau de tous les38

39. Objet document
quelques sélecteurs CSS
Expression Retour
Y Tout contenu désigné par l’élément HTML Y.
#nomId Tout contenu identifié par nomId
.nomClasse Tout contenu faisant partie de la classe nomClasse
[attr] Tout contenu dont l'attribut attr est spécifié.
[attr="val"] Tout contenu dont l'attribut attr vaut val.
[attr^="val"] Tout contenu dont l'attribut attr commence par val.
[attr$="val"] Tout contenu dont l'attribut attr se termine par val.
X Y Tout contenu sélectionné par Y et inclus dans un contenu sélectionné par X
X > Y
Tout contenu sélectionné par Y et inclus directement dans un contenu
sélectionné par X
X + Y
Tout contenu sélectionné par Y et suivant immédiatement un contenu
sélectionné par X
39

40. Objet document
méthodes d’accès (R/W) au contenu
 parentElt.appendChild(enfant) ajoute un nœud à la fin de la
liste des enfants d'un nœud parent spécifié
 parentElt.insertBefore(newElt, refElt) insère newElt juste avant
refElt parmi les enfants de parentElt.
 .innerHTML R/W tout le contenu d'un élément
 .nomAttribut R/W la valeur d’un attribut d'un élément
 .style.propriétéCSS R/W une propriété de style d'un élément
– propriétéCSS a presque le même nom qu’en CSS
– Remplacer les "-" par une majuscule sur le mot suivant
Ex : background-color → style.backgroundColor
 .classList retourne la liste des classes CSS d'un élément
 .classList.add("nom")/.remove(…)/.toggle(…) ajoute /
supprime / change l’existence d’une classe à la liste des classes
40

41. Objet Document
exemple-document.html
41
x
NB : onload="ajouteElement()" respecte la syntaxe DOM 0 de gestion
d’un évènement

42. Objet form
présentation
 Objet form : gestion d’un formulaire
 .name : nom d’accès à tout élément et au formulaire
 .length : nombre d'éléments à l'intérieur du formulaire ou
nombre d’éléments dans un groupe (radio, checkbox, option, …)
 .submit() : soumet le formulaire
 .reset() : réinitialise le formulaire
 .value : valeur en cours d’un élément
 .placeholder : indication dans un champ (text, textarea, …)
 .required : caractère obligatoire d’un champ
 .autofocus : donne le focus automatiquement
 .disabled : état d’activation d’un élément
 .checked : état (coché ou non) d’un bouton ou d’une case
 .selectedIndex : rang de l’option sélectionnée d’un menu
 .options : tableau donnant les options d’un objet select
 .text / .value : libellé / valeur d’une option 42

43. Objet form
exemple-form.html
43
x

44. Documentation
https://developer.mozilla.org/fr/docs/JavaScript/Référence_JavaScript
http://www.toutjavascript.com/reference/
http://www.w3schools.com/jsref/
http://devdocs.io/offline
44