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 Traiter des chaînes de caractères avec l’objet String 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. DIENG Abdoulaye 1
Avril 2017

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

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
 Traiter des chaînes de caractères avec l’objet String
 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

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. Evénements
9. Objets du noyau
10. Objets du navigateur
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.
 En production, pour le chargement rapide d’une page :
• inclure éventuellement JavaScript après le contenu ;
• combiner plusieurs fichiers JavaScript en un seul fichier. 6

7. Variable
 Syntaxe de déclaration :
var nomVariable;
 Avec ES6 :
let nomVar
const NOM_CONSTANTE=valeur
 Exemples
let i;
var taille, age=26;
const TVA=0.18;
 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

8. Types primitifs
undifined 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"
• l’anti-slash () permet d’échapper
ou de déspécialiser les caractères
(', ", ).
Ex : 'Il s'appelle Toto'
 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

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", 10); // 15
parseInt("546", 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é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 saisie par le visiteur qui appuie
aussi sur OK
• Retourne null si le visiteur clique sur Annuler ou appuie sur la
touche Echap.
• 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 : 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 :
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.
• Une string et une expression sont concaténées par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère spécial de
retour chariot n.
• Remplacer tout caractère non-ASCII par son code latin-1 en octal
précédé de l’anti-slash.
 Exemple :
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 :
document.write("Votre pr351nom est vraiment <b>Toto</b>")
15
x

16. Structures de contrôle
conditionnelles - Syntaxe
 if (condition) {
traitement_1
}
[else {
traitement_2
}]
16
 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]
}

17. Structures de contrôle
conditionnelles - Exemples
 if (nbr%2==0){
alert(nbr+" est pair")
}
else {
alert(nbr+" est impair")
}
17
 switch (jour){
case "1" : alert (" On est lundi"); break;
case "2" : alert (" On est mardi"); break;
case "3" : alert (" On est mercredi"); break;
case "4" : alert (" On est jeudi"); break;
case "5" : alert (" On est vendredi"); break;
case "6" : alert (" On est samedi"); break;
case "7" : alert (" On est dimanche"); break;
default : alert (" Entrez un chiffre compris entre 0 et 8 exclus");
}
X-debutants

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

19. Structures de contrôle
répétitives - exemples
 var nbr = ?;
while(nbr<0){
nbr = prompt("Entrez une valeur positive SVP");
}
 do{
var nbr = prompt("Entrez une valeur positive SVP");
}while(nbr<0);
 for(let i=1; i<51; i++){
document.write( i+" " );
}
19x

20. Fonctions
présentation
 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 :
var myVar = function(){ doSomething }
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
affichage, un test, etc.
20

21. Fonctions
exemples
/* Définition d’une fonction qui
retourne undefined */
function sayHello(nbr) {
for(i=1; i<=nbr; i++){
document.write('<br>Hello')
}
}
/* Appel de la fonction */
var nombre = 3;
sayHello(nombre);
/* Définition d’une fonction qui retourne une
valeur ≠ undefined */
var multiplier = function(a,b){
var prod = a*b;
return prod;
}
/* Appel de la fonction */
var nbr1 = 5, nbr2 = -7;
var produit = multiplier(nbr1,nbr2);
document.write(nbr1,' x ',nbr2,' =
',produit);
21
x

22. Evénements
présentation
 Événement = changement d'état de l'environnement qui peut
être intercepté par le code JavaScript
 Quelques évènements
– 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 texte associé est modifié
– load : la page est chargée dans le navigateur
– submit : le formulaire associé est soumis
22

23. Evénements
gestionnaire d’évènement
 Gérer un événement = associer une action à un événement.
« Si tel événement se passe, faire telle action »
 Syntaxes de la création d’un gestionnaire d'événement :
• Attribut HTML :
<balise onEvenement='Action_JS ou nomFonction();'>
Ex : <body onLoad="alert(‘la page est chargée !’);" >
• Propriété DOM 1 (Document Object Model level 1)
element.onevenement=function(){ };
Ex : <span id="clickme">Cliquez-moi !</span>
<script type="text/javascript">
var elt = document.getElementById('clickme');
elt.onclick = function() {
alert("Pourquoi m'avez-vous cliqué ?");
};
</script>
23

24. Evénements
gestionnaire d’évènement DOM 2
 Permet plusieurs actions pour un même évènement
 Syntaxe :
element.addEventListener('nomEvent', function(){ … }, false);
 Exemple
<span id="clickme"> Cliquez-moi pour me remplacer </span>
<script type="text/javascript">
var elt = document.getElementById('clickme');
elt.addEventListener('click', function() {
alert(" Merci de votre clic ! ");
}, false);
elt.addEventListener('click', function() {
document.write(" Merci du remplacement !");
}, false);
</script>
24
x

25. Objets du noyau
 Les objets du noyau proposent des propriétés et des
méthodes permettant d'effectuer facilement un grand
nombre de manipulations.
 Les objets du noyau JavaScript sont : Array, Boolean, Date,
Function, Math, Number, RegExp et String.

26. Objet Array
présentation
 Objet Array : créer et manipuler des tableaux
 Définition d’un tableau :
var nomTab = new Array();
 Initialisation :
nomTabl[ i ]= element;
 Définition et initialisation :
– avec Array() :
var nomTab=new Array( element_1 , element_2[, …] );
– littéral : var nomTab=[ element_1 [, element_2, …] ];
 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 tableau

27. Objet Array
quelques méthodes
 tab1.concat(tab2 [, tab3, …]) fusionne tab1 à d’autres tableaux
 .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
 .push(newElt1 [,newElt2, …]) ajoute des éléments à la fin et
retourne la nouvelle taille
 .shift()/.pop() supprime et retourne le premier/dernier élément
 .slice(deb [,fin]) retourne le tableau des éléments de l'indice deb
à l'indice fin-1
 .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é.
 .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.

28. Objet Array
quelques méthodes
 .reduce( fct(acc, val) ) applique une fonction qui est un
« accumulateur » et qui traite chaque valeur d'un tableau afin
de le réduire à une seule valeur
 .forEach( fct(val, indice) ) permet d'exécuter une fonction
donnée sur chaque élément du tableau
 .map( fct(val, indice) ) retourne un nouveau tableau composé
des images des éléments d'un tableau par une fonction donnée
en argument
 + d’infos :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
x

29. Objet String
Objet String : manipuler les chaînes de caractères
length : propriété qui stocke le nombre de caractères
.charAt(indice) retourne le caractère à la position indice
.indexOf(ssCh [,pos]) retourne la position d'une sous-chaîne en
partant de la position pos ou retourne -1 en cas d’absence
ch1.concat(ch2[, ch3, …]) fusionne ch1 à une ou +sieurs chaîne(s)
str1.localeCompare(str2) compare les chaînes str1 et str2 et
retourne -1 (str1< str2), 0 (str1= str2) ou 1.
.split(sep [, n]) retourne un tableau de n sous-chaînes de
caractères en utilisant le séparateur sep.
.replace(motif,newStr) remplace motif par newStr
motif est une expression régulière de syntaxe : /motif/[flag]
flag peut être égal à i (case insensitive) ou g (globale)
Plus d’info : http://www.w3schools.com/jsref/jsref_obj_regexp.aspx

30. Objets du navigateur
présentation
 Les objets du navigateur permettent d'agir sur l'état du
navigateur et des documents affichés.
 Quelques objets :
• navigator : informations sur le navigateur du visiteur
• window : propriétés concernant la fenêtre elle-même
mais aussi tous les objets-enfants contenus dans celle-ci
• location : informations sur l'adresse de la page affichée
• history : adresses des pages déjà visitées
• document : propriétés sur le contenu du document
(couleur d'arrière plan, titre, ...)

31. Objets du navigateur
hiérarchie

32. Objets du navigateur
accès à un objet
 La page du navigateur est hiérarchisée en objets
 Exemple
objet fenêtre
objet document
objet formulaire
 Tout objet, après avoir été nommé, peut être désigné par
une arborescence
 Exemple
accéder au bouton radio "semaine", en écrivant :
[window.]document.formulaire.radio[0]

33. Objet Window
 Objet Window : gestion de la fenêtre
 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
 clearTimeout(id) : efface un delai défini par setTimeout()
 setInterval(fct, delai) : appelle la fonction fct chaque delai ms.
 clearInterval(id) : efface un delai défini par setInterval()
 open(url [, nom] [, options]) ouvre une fenêtre chargée avec la
page d'adresse url.
Exemple
myWin = open("contact.html" , "_blank", "menubar=no, status=no,
scrollbars=no, width=200, height=400");
x

34. Objet Location
 Objet Location : gestion de l’URL d’une page
 Forme général d’une URL :
protocol://host[:port]/pathname[?search][#hash]
Exemple :
http://www.animaux.com:8080/felins/search?q=tigre#resultat
 protocol, host, port, hostname, pathname, search, hash et href :
retournent le protocole, le nom d’hôte suivi du port, le port,
nom d’hôte, le chemin relatif, les paramètres (? inclus), le
fragment (# inclus) et l’url entière.
 assign(url) : charge le document d’adresse url
 replace(url) : idem à assign() sauf que la page remplacée ne sera
pas dans l'historique (pas de bouton « Précédent»)
 reload([forceget]): recharge le document (depuis le serveur si
forceget ou true est spécifié)

35. Objet History
 Objet History : gestion des pages déjà visitées
 length : nombre de pages dans l'historique
 back() : force le navigateur à réafficher la page précédente
Exemple :
<a href="javascript:history.back()">Page Précédente</a>
 forward() : force le navigateur à réafficher la page suivante.
 go(indice) : charger une page spécifique, identifiée par sa
position relative par rapport à la page en cours (d'indice 0).
indice est un nombre entier positif ou négatif.
Exemples :
history.go(0); recharge la page courante.
history.go(-2); recule de deux pages
history.go(1); charge la page suivante

36. Objet Document
présentation
 Objet document : gestion du contenu d’une page Web
 .title : titre du document
 .write() : écrire dans un document
 .createElement("nomElement") crée un élément du type spécifié
 .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 tous les éléments
satisfaisant au sélecteur CSS.
36

37. Objet Document
quelques sélecteurs CSS
Expression Retour
Y Tout contenu désigné par l’élément HTML Y.
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 une balise fermante
X).
#nomId Le 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.
37

38. Objet Document
méthodes d’accès (R/W) au contenu
 .appenChild("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 d'un élément38

39. Objet Document
exemple
<body onload="ajouteElement()">
<p> Le texte ci-dessus a été créé dynamiquement.</p>
<script type="text/javascript">
function ajouteElement() {
newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Salutations !</h1>";
para = document.querySelector("p");
document.body.insertBefore(newDiv, para);
}
</script>
</body>
39
x

40. Objet Form
présentation
 Objet Form : gestion d’un formulaire
 name : nom d’accès à tout élément et au formulaire
NB : tous les boutons radio doivent avoir le même nom
 length : nombre d'éléments à l'intérieur du formulaire
 submit() : soumet le formulaire
 value : valeur en cours d’un élément
 autofocus : avoir le focus automatiquement
 disabled : état d’activation d’un élément
 defaultchecked : état du bouton ou de la case cochée par défaut
 checked : état (coché ou non) d’un bouton ou d’une case
 selectedIndex : rang de l’option sélectionnée d’un menu
 defaultselected : option sélectionnée par défaut
 length : nombre d’options dans un menu

41. Objet Form
exemple
<p>
Entrez votre prénom : <input type="text" id="prenom">
</p>
<p>
Votre prénom est : <span class="echo"></span>
</p>
<script>
var prenomIn = document.getElementById("prenom");
var prenomOut = document.querySelector("span.echo");
prenomIn.addEventListener("keyup", function(){
prenomOut.innerHTML = prenomIn.value;
})
</script>
x

42. 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
42