Chap3 JS

Technologies du web
Partie 3 : JavaScript
2
Plan de la présentation
Introduction à JavaScript
Core JavaScript
Les Objets dans JavaScript

Plan
Client-side JavaScript
3
Introduction
Interagir
Manipuler les avec les
événements éléments Valider les formulaires
HTML web côté client
Introduction
Drag & Drop
Faire un peu de dessin

et des animations, et
bien d'autres choses !
4
Introduction Introduction
Une suggestion lors de la frappe dans un Un système de chat, comme celui de

champ de texte, comme lors d'une Facebook
recherche avec Google ;
Des jeux exploitants la balise <canvas> : Un lecteur de vidéos ou de musiques grâce aux
Torus; Tetris en 3D ; modélisation 3D d’une balises <video> et <audio>
Lamborghini affichée grâce à l'API WebGL et à la
bibliothèque Three.js 5
Introduction à JavaScript Introduction à JavaScript
JavaScript C’est quoi ???!!

Compilé vs Interprété
L’usage de JavaScript
Les particularités de JavaScript
Historique de JavaScript
6
Introduction à JavaScript Un peu d’histoire…
 Netscape Communications a eu besoin d’un langage

coller au HTML afin de rendre les pages un peu
plus dynamique
 Ce langage doit être:
Facile utiliser par les designers et les programmeurs
Capable d’assembler les composants (images, plugins,..)
 Brendan Eich, a développé le premier prototype en

10 jours
Introduction à JavaScript Un peu d’histoire…
Le premier nom de ce langage a été Mocha

Ensuite LiveScript
Il a été renommé « JavaScript » lorsque sa
version Beta 3 a été déployé
Aucun lien avec JAVA
Choix de Marketing
Normalisé par Ecma International en 1996 il a été
batisé ECMAScript
JavaScript C’est quoi ???!!
 JavaScript est un langage de programmation qui sert

principalement à dynamiser et à rendre interactifs les
pages WEB.
 Exécuté sur vos machine donc côté Client.
 L’un des langages WEB les plus utiles et membre du
fameux triplet :
 HTML pour le contenu
 CSS pour la présentation
 JS pour le comportement
 JavaScript est:
 Haut niveau
 Dynamique
 Non typé
 Interprété
Compilé vs Interprété
Compilation
Un compilateur va traduire le programme dans un

code spécifique à la machine cible (l’exécutable).
Etapes :
Le code source est analysé et parsé : C’est la ou on détecte
les erreurs.
Un générateur de code produit l’exécutable.
Le code est ensuite exécuté

Compilé vs Interprété
Interprétation
Le code source n’est pas directement exécuté par la

machine cible.
Un autre programme (i.e. l’interpréteur) lit et exécute

le code source.
Dans l’interprétation le code source est traduit en un

code intermédiaire qui est ensuite traduit en en un
code machine.
Plan Core JS
Les bases du JavaScript

Les variables
Les types de données
Core JavaScript
Operateurs et Expressions
Structures conditionnelles et itératives
Les Fonctions
Les Tableaux
Les Objets
La structure lexicale de JavaScript
 JS est sensible à la casse

 Les tags html et ces attributs doivent être représenté en
minuscule coté JS.
Core JavaScript
 JS ignore les espaces et les retours à la ligne.

 Cependant formater votre code c’est UN DEVOIR
Les commentaires
// : commente le texte jusqu’à la fin de la ligne
/* text */ : Commente un bloc
La structure lexicale de JavaScript
 Identifiants
 Doit commencer par une lettre, par (_) ou par le signe dollar ($)
 Le reste des lettres, chiffres, (_), ou $
Core JavaScript
 Mots clé réservés

 Certain identifiants sont réservés comme mot clé
break delete function return
typeof
case do if switch var
catch else in this void
continue false instanceof throw while
debugger finally new true with
default for null try
 Certains sont moins utilisés mais peuvent l’être plus dans les futurs
versions
class const enum export extends import super
Dates et Times
 Dans JS l’heure et le temps sont gérés par l’objet Date.

 Stocké sous forme de timestamp (nombre de millisecondes
écoulées depuis le 1er Janvier1970).
Core JavaScript
var maDate = new Date(2010, 0, 1); // Premier jour du premier mois

// de 2010
var apres = new Date(2010, 0, 1, // Même jour, à 5:10:30pm, heure
17, 10, 30); locale
var mnt = new Date(); // Date et heure actuelles
var elapsed = now - then; // La valeur de retour représente
la différence en millisecondes
apres.getFullYear() // => 2010
apres.getMonth() // => 0: (0:11)
apres.getDate() // => Jour du mois 1: (1:31)
apres.getDay() // => Jour de la semaine (0:6)
5: zero-based jour
0 représente dimanche.
apres.getHours() // => Heure (0:23) 17
apres.getMinutes() // (0:59)
apres.getSecondes() // (0:59)
apres.getMilliseconds() // (0:999)
apres.getTime() // retourne le timestamp de l’objet
apres.setTime(timestamp) // modifie l’objet selon letimestamp
Dates et Times
 setTimout( execFunction, waitingTime, param1,param2,…,paramN)
est une fonction qui permet d’exécuter la fonction execFunction après
waitingTime milliseconde de son appel. Les paramètres param1,
paramN sont les paramètres que nous voulons passer à execFunction
Core JavaScript
(ne marche pas dans les internet explorer <10). Cette fonction
retourne un id qui identifie la fonction pour pouvoir l’annuler avec la
fonction clearTimout.
 setInterval( execFunction, intervalTime, param1,param2,…,paramN)
est une fonction qui permet d’exécuter la fonction execFunction tout
les intervalTime milliseconde à partir de son appel. Les paramètres
param1, paramN sont les paramètres que nous voulons passer à
execFunction (ne marche pas dans les internet explorer <10).
 Si La version est inférieur à explorer 10 il suffit d’utiliser une fonction
anonyme et dans laquelle on appellera la fonction execFunction. Cette
fonction retourne un id qui identifie la fonction pour pouvoir l’annuler
avec la fonction clearInterval.
Dates et Times
function testTimout() {
setTimeout(function () {
console.log('Je test le Timout');
},2000);
}
Core JavaScript
testTimout();var i=0;
testInterval();
function testInterval() {
var code =setInterval(function () {
if(i<22)
{
console.log(i);
i++
}
else{
clearInterval(code);
}
},100,code);
}
Chaines
 Les chaines en JS peuvent être mises entre ’ ou «

 Il y a deux types de chaines de caractère, le type primitif
et les strings
Core JavaScript
 var primitifChaine = « bjr »; var varString = new

String(« bjr »);
 En ECMAScript 5, les chaines peuvent être représentées
sur plusieurs lignes en terminant chaque ligne par \
 Pour échapper un caractère spécial on utilise \
 \n, \’, \t, \\,…
 La concatenation se fait avec +
 Pour avoir le nombre de caractère on utilise l’attribut
length.
 chaine.length
Chaines
var s = "hello, on déclare une chaine
world"
s.charAt(0) "h": premier caractère
s.charAt(s.length-1) "d": le dernier caractère
Core JavaScript
s.substring(1,4) "ell": les 2éme 3éme et 4éme caractère.

s.slice(1,4) "ell": même résultat
s.slice(-3) "rld": le deuxième paramètre peut être négatif ce qui indique
qu’on commence par la fin.
s.indexOf("l") 2: position de la première occurrence de l, -1 si la chaine ou le
caractère n’existe pas.
s.lastIndexOf("l") 10: position du dernier caractère ou chaine.
s.indexOf("l", 3) 3: position of first "l" at or after 3
s[0] "h"
s[s.length-1] "d"
s.trim() supprime les blanc à gauche et à droite
Les booléens
Deux valeurs true et false

Les valeurs évaluées à false sont :
 undefined, null, 0, -0, NaN, ""
Core JavaScript
Tous le reste est évalué à true

Pour convertir un booléen vers un string on peut
utiliser le toString()
Les opérations sur les booléens
&& : et
|| : ou
! : NOT
La conversion de type
 Deux types de conversion : implicite et explicite
 Conversion implicite
 Lorsque JS s’attend à avoir un type particulier, il le convertit
automatiquement
Core JavaScript
 Pour les numériques, si la conversion n’est pas possible, la

variable est convertit en NaN.
Number("3") // => 3
String(false) // => "false" Or use
false.toString()
Boolean([]) // => true
Object(3) // => new Number(3)
x + "" // Même chose que String(x)
+x // Même chose que Number(x).
 Conversion explicite
 Utilisation de : Boolean(), Number(), String(), Object()
 Utilisation de +
10 + " objets" // => "10 objets". 10 est converti en une chaine
"7" * "4" // => 28: Les chaines sont convertis en un entier
var n = 1 - "x"; // => NaN: x ne peut pas être convertit en un entier
n + " objets" // => "NaN objets": NaN est convertit en la chaine"NaN"
Les variables
Les variables sont déclarées avec le mot clé var.
Si une variable n’est pas initialisée elle aura la

Core JavaScript
valeur undefined.
Une variable déclarée sans utiliser le mot var est

une variable globale.
Les variables sont non typées, le type est associé

lors de l’exécution et il peut changer.
La portée des variables
 La portée (scope) d’une variable est l’emplacement dans lequel elle est
définie.
 Variables globales : ce sont les variables définies dans tout le script JS.
 Variables locales
Core JavaScript
 Déclarées dans le corps d’une fonction

 Définit dans une fonction ou dans n’importe quelle fonction
définie à l’intérieur de celle-ci.
 Vous devez toujours utiliser var pour les variables locales.
 JS (avant la version de ES6) n’a pas de portée de block.
 Avec var si vous définissez la variable dans une fonction, elle sera
visible à l’intérieur de celle-ci.
 Si vous définissez var dans le script, la variable est crée comme une
propriété à l’objet global (window dans un navigateur, global ou
module dans NodeJs).
 La portée (scope) d’une variable est l’emplacement dans lequel

elle est définie.
 Variables globales : ce sont les variables définies dans tout le
Core JavaScript
script JS.
 Variables locales
 Déclarées dans le corps d’une fonction
 Définit dans une fonction ou dans n’importe quelle fonction
functiondéfinie
test(o) { à l’intérieur de celle-ci.
var i = 0; // i est défini dans la fonction
 Vous var jdevez toujours utiliser var pour

if (typeof o == "object") {
= 0; lesdéfini
// j est variables
dans la locales
for (var k=0; k < 10; k++) { // k est défini dans la fonction pas
 JS n’a pas de console.log(k);
portée de block. //que dans la boucle
// Afficher les nombres de 0 à 9
}
console.log(k); // k est toujours défini
}
console.log(j); // j est toujours défini mais elle peut ne pas être initialisé
}
Les variables locales sont visibles dans la fonction

même avant leur déclaration.
Ce processus est appelé le hoisting
Core JavaScript
Toutes les déclarations de variables sont « hoisté »

(mis en haut). Ce n’est pas le cas des initialisations.
var scope = "globale";

function f() {
console.log(scope); // "undefined"
var scope = "locale"; // Variable initialisée ici, mais
définie en haut dû au hoisting
console.log(scope); // affiche "locale"
}
Les variables locales sont visibles dans la fonction

même avant leur déclaration.
Ce processus est appelé le hoisting
Core JavaScript
Toutes les déclarations de variables sont « hoisté »

(mis en haut). Ce n’est pas le cas des initialisations.
var scope = "globale";

function f() {
console.log(scope); // "undefined"
var scope = "locale"; // Variable initialisée ici, mais
définie en haut dû au hoisting
console.log(scope); // affiche "locale"
}
La portée des variables let
 A partir de ES6 deux nouvelles portées ont été introduites :
 let
 const
 let vous permet de déclarer la variable dans le bloc courant.
Core JavaScript ES6
 Dans le cadre d'une déclaration hors d'un bloc, c’est-à-dire

dans le contexte global, let crée une vraie variable globale (là ou
var créait une propriété de l'objet global)
 Avec let on ne parle plus de Hoisting.
 Si vous définissez donc une variable dans une boucle elle n’est
visible que dans la boucle.
La portée des variables const
 Pour définir une constante, il faut utiliser la nouvelle portée const.
 Une fois déclarée, cette variable n’est accessible qu’en lecture.
 const a les mêmes règles de portés que let
Core JavaScript ES6
 Lorsque vous définissez une variable en tant qu’objet vous obtenez la référence.
Ceci implique que si c’est une constante c’est la référence qui doit rester
constante et non l’objet sur laquelle elle réfère.
Les tableaux
Un tableau est une suite de valeurs de différents

types.
Pour initialiser un tableau on a plusieurs méthodes :
Core JavaScript
monArray = [val1, val2, ,valN];

monArray = new Array();
monArray =[ ];
monArray =[1+2,3+4]; // 3, 7
var matrice = [[1,2,3], [4,5,6], [7,8,9]];
var eparseArray = [1,,,,5]; // eparseArray[1]==undefined;
var t = new Array(1,2,3)  var t=[1,2,3]
Les tableaux
 Lire un élément du tableau

var a = ["world"];
 Avec l’opérateur [] var value = a[0];
 Un tableau peut être tronqué a[1] = 3.14;
i = 2;
en modifiant l’attribut length a[i] = 3;
Core JavaScript
 Ajout et suppression a[i + 1] = "hello";

a[a[i]] = a[0];
d’éléments a.length // => 4
a.length = 2 // a devient ["world",3.14]
 push(): ajoute une valeur à la // Ajout
fin du tableau a.push("zero"); //a[2]=="zero"
 unshift(): ajoute une valeur a.push(1,3); //a[3]==1, a[4]==3
//Suppression
au début du tableau a = [1,2,3];
 delete: supprime un élément delete a[1]; // a n’a plus d’élément l’indice 1
1 in a // => false: pas d’indice 1
• Itérer sur un tableau a.length // => 3: delete n’affecte pas la taille du tableau
// Itération
– for ou for/in for (var indice in a) {
var value = a[indice];
// Faites ce que vous voulez
}
Les tableaux
 Les méthodes sur les tableaux :

 la méthode concat permet de concaténer 2 tableaux et de
retourner le tableau résultat.
Core JavaScript
 la méthode forEach permet de parcourir le tableau. Elle prend

en paramètre la fonction à exécuter à qui elle fourni la valeur
actuelle du tableau son indice et le tableau en question.
 Les méthodes de recherche sont les mêmes que les chaines mais
d’une façon générique vu que le tableau contient des éléments
de différents types. Pour rappel les méthodes sont indexof( ) et
lastIndexOf( ).
var tab1=[1,2,3];
var tab2 = [4,5,6];
var tab3 = tab1.concat(tab2);
tab3.forEach(function(val,ind,monTab){
console.log("tab["+ind+"]="+val);
});
Les tableaux
 Afin de trier un tableau nous utilisons la méthode sort( ) qui
transforme les éléments du tableau en chaine de caractère et effectue
le trie par ordre alphabétique.
 La fonction sort prend un paramètre facultatif qui est une fonction
qui spécifie l’ordre de trie. Cette fonction devra retourner un entier
Core JavaScript
(-1 si le 1er est inférieur au second, 0 si égaux et 1 sinon).

 Pour extraire une portion d’un tableau on utilise la même
fonction que les chaines slice.
 Afin de modifier une partie du tableau on utilise la
méthode splice(indice, nbElement, var1, var2,…, varN)
qui extrait les nbElement à partir de l’indice indice et les
remplace par les variables varn). Seul les deux premiers
paramètres sont obligatoires.
Les tableaux
// Ceci marche du à la conversion implicite de JS
(mais ca ne marche pas en cas de undefined et de
NAN)
function comparerDesNombres(a, b) {
return a - b;
Core JavaScript
}
function comparerDesNombres(a,b){
var x=parseInt(a,10);var y=parseInt(b,10);
if(x>y){
return 1;
}else if(y>x){
return -1;
}return 0;
}
var t=[1,2,3,11,22,33];
t.sort(comparerDesNombres);
Les tableaux
Plusieurs méthodes sont offertes avec les tableaux afin de faciliter leur
utilisation.
 concat() cette méthode renvoie un nouveau tableau constitué de ce

tableau concaténé avec un ou plusieurs autre(s) tableau(x) et/ou valeur(s).
Core JavaScript
 includes() cette méthode détermine si le tableau contient ou non un

certain élément à partir d’une position (optionnelle). Elle renvoie true ou
false selon le cas de figure.
 indexOf() cette méthode retourne le premier (plus petit) index d'un
élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1
si aucun n'a été trouvé.
 join() cette méthode concatène tous les éléments d'un tableau en une
chaîne de caractères.
 lastIndexOf() cette méthode retourne le dernier (plus grand) index d'un
élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1
si aucun n'a été trouvé.
 slice(start, end) cette méthode extrait une portion d'un tableau pour
retourner un nouveau tableau constitué de ces éléments.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#m%C3%A9thodes
Les tableaux
La méthode Array.from() permet de créer une

nouvelle instance d'Array (une copie superficielle) à
partir d'un objet itérable ou semblable à un tableau.
Core JavaScript
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));

// expected output: Array [2, 4, 6]
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/from
Les tableaux
 La méthode every() permet de tester si tous les
éléments d'un tableau vérifient une condition donnée
par une fonction en argument. Cette méthode renvoie
Core JavaScript
un booléen pour le résultat du test..

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/every
Les tableaux
La méthode filter() crée et retourne un nouveau

tableau contenant tous les éléments du tableau
d'origine qui remplissent une condition déterminée
Core JavaScript
par la fonction callback.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction',
'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "presen
t"]
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter
Les tableaux
La méthode find() renvoie la valeur du premier

élément trouvé dans le tableau qui respecte la
condition donnée par la fonction de test passée en
Core JavaScript
argument. Sinon, la valeur undefined est renvoyée.

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/find
Les tableaux
La méthode map() crée un nouveau tableau avec

les résultats de l'appel d'une fonction fournie sur
chaque élément du tableau appelant.
Core JavaScript
const array1 = [1, 4, 9, 16];
// pass a function to map

const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map
Les tableaux
 La méthode reduce() et reduceRight() applique une
fonction sur un accumulateur et sur chaque valeur du
tableau (de gauche à droite et de droite à gauche) de
Core JavaScript
façon à obtenir une unique valeur à la fin.
const array1 = [1, 30, 39, 29, 10, 13];
console.log(
array1.reduce(
(accumulateur, currentVal) => accumulateur + currentVal
)
);
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map
Les objets : Valeurs primitives vs Objets
 Primitives:
undefined, null, boolean, numériques, et strings
Immutable : leur allocation de mémoire initiale ne
Core JavaScript
change jamais
Sont comparées par valeur
 Objets :
Tout le reste: objets, tableaux et fonctions
Mutable: leur mémoire peut changer dynamiquement
Sont comparés par référence
Les objets
 Un objet est une valeur composite
 C’est une collection de propriétés désordonnée, chacune
avec un nom et une valeur et qui peuvent être:
 Des Attributs
Core JavaScript
 Des Méthodes
 Les propriétés peuvent être ajoutés dynamiquement
 Trois types d’objets :
 Objet Native: défini par la spécification ECMAScript (Arrays,
fonctions, dates)
 Objet Hôte: défini par l’environnement hôte (e.g. navigateur)
dans lequel l’interpréteur est embarqué, i.e. HTMLElement dans
le JS coté client.
 Object défini par l’utilisateur : objet crée par l’exécution du
code JS.
Le modèle objet JS : Les prototypes
 Un langage basée sur les prototypes ne possède (généralement) que
des objets.
 Parmi ces objets il peut y avoir des objets prototypes agissant
comme un modèle permettant ainsi s’avoir des propriétés et des
Core JavaScript
méthodes initiales (jouant le rôle de la classe mais sans en être une).

 Tout objet peut définir ces propres propriétés dynamiquement et à
n’importe quel moment.
 Si une propriété est ajoutée à un objet utilisé comme prototype, tous
les objets qui l’utilisent comme prototype bénéficieront de cette
propriété.
Le modèle objet JS : Les prototypes
Langage de classe (Java) Langage de prototype (JavaScript)
classes et instances sont deux entités distinctes. Tous les objets sont des instances.
Une classe est définie avec une définition de On définit et on crée un ensemble d’objets
classe. On instancie une classe avec des avec des fonctions qui sont des
Core JavaScript
méthodes appelées constructeurs constructeurs.

On crée un seul objet grâce à l’opérateur new. Même chose
hiérarchie d’objets construite en utilisant les Hiérarchie d’objets en assignant un
définitions des classes. prototype à un objet dans le constructeur.
Les objets héritent des propriétés
Les objets héritent des propriétés appartenant à
appartenant à la chaîne des prototypes de la
la chaîne des classes de la hiérarchie.
hiérarchie.
Le constructeur ou le prototype définit un

La définition de la classe définit exactement
ensemble de propriétés initiales. Possibilité
toutes les propriétés de toutes les instances
de retirer des propriétés dynamiquement,
d’une classe. Il est impossible d’ajouter des
pour certains objets en particuliers ou bien
propriétés dynamiquement pendant l’exécution.
pour l’ensemble des objets.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails
Les objets : Création
 Avec les objets littéraux // Avec les objets littéraux
var book = {
 Une paire de clef valeur "main title": "JavaScript",
séparée par des ‘;’ 'sub-title': "The Guide",
"for": "all audiences",
 Le nom d’une propriété doit author: {
être défini en tant que chaine firstname: "David",
Core JavaScript
si : }
surname: "Flanagan"
 Il inclut un espace };
 C’est un mot réservé // Avec l’opérateur new
var o = new Object();
 Avec l’opérateur new var a = new Array();
var d = new Date();
 new doit être suivi du var r = new RegExp("js");
constructeur // Avec Object.create()
 Avec Object.create() var o1 = Object.create({x:1, y:2});
var o2 = Object.create(null);
 Crée un nouvel objet en var o3 = Object.create(Object.prototype);
utilisant le premier argument var o4 = Object.create(o1);
//Exemple constructeur
comme prototype de l’objet function Personne(nom,prenom){
this.nom=nom;
this.prenom=prenom;
this.affiche =function() {
console.log(this.nom+this.prenom);
}
}
// ES5
const monObjetES5 = {
maMethode1: function () {
console.log("hello");
},
maMethode2: function (arg1, arg2) {
Core JavaScript
console.log(arg2);
},
};
// Equivalent ES6
const monObjet = {
maMethode1() {
console.log("hello");
},
maMethode2(arg1, arg2) {
console.log(arg2);
},
};
monObjet.maMethode1();
// => "hello"
monObjet.maMethode2("banana", true);
 Les valeurs implicites par
homonyme
 Lorsque le nom de la variable
est le même que le nom de la
propriété de votre objet, il
Core JavaScript
n’est pas nécessaire de

spécifier le nom et la valeur
de la propriété.
 Nom de propriété const nom = 'aymen';

dynamique. function getAge() {
 Avec ES6 vous pouvez return 38;
dorénavant définir des noms }
dynamique de vos variables const monObjet = {
lors de la définition. [nom + getAge()]: "Computer Science",
};
console.log(monObjet);
//{ aymen38: 'Computer Science' }
 Ajout et modification des
propriétés // Ajout et modification des propriétés
var author = book.author;
 Avec ‘.’ ou ‘[ ]’ var name = author.surname;
var title = book["main title"];
 Suppression des propriétés

Core JavaScript
// Suppression des propriétés

delete book.author;
 Avec la fonction delete suivie delete book["main title"];
de la propriété à supprimer delete Object.prototype; //on ne peut
pas la supprimer
//Tester et énumérer des propriétés
 Tester et énumérer des var o = { x: 10}
"x" in o // true
propriétés "y" in o // false
 Avec l’opérateur in for (p in o) {
 Pour accéder à la valeur, on console.log(p);
utilise o[indice], et non //=> x
o.indice console.log(o[p]);
//=> 10
console.log(o.p);
//=> undefined
}
Les objets
Sérialisation d’Object
C’est le processus de transformation d’un objet en une
chaine de caractère et qui peut être récupérée
Core JavaScript
ultérieurement.
2 fonctions :
JSON.stringify(objet) : retourne une chaine
JSON.parse(objet) : restore l’objet partir de la chaine JSON
o = {x:1, y:{z:[false,null,""]}};
s = JSON.stringify(o); // s : '{"x":1,"y":{"z":[false,null,""]}}'
p = JSON.parse(s); // p est une copie de o
Les Fonctions
 C’est un objet « spécial »
 Vous pouvez lui ajouter des propriétés et invoquer des méthodes.
 C’est un bloc JS défini une fois mais qui peut être exécuté à volonté.
 Paramétrable :
Core JavaScript
 Inclut un ensemble d’identifiant, paramètres travaillant comme des

variables locales.
 L’invocation de la fonction nécessite de lui passer les arguments.
 Peut retourner une valeur
 Possède un contexte d’invocation
 Le mot clé this
 Peut être assigné à la propriété d’un objet qui devient une méthode
 Quand une fonction est invoqué à travers un objet, cet objet devient son
contexte d’invocation.
 Peut être utilisé pour initialiser un objet. C’est le constructeur de l’objet.
Les Fonctions
Une fonction est déclaré en utilisant le mot clé

function
Une fonction littérale est déclarée
Core JavaScript
var carre=function(x){return x*x;}

Dans ce cas, seul la déclaration va être hoistée.
Déclaration standard
function square(x) { return x*x; }
Dans ce cas c’est toute la fonction qui va être
hoisté.
Les Fonctions
function foo(){ alert(foo());

function bar() { function foo(){
return 3; var bar = function() {
} return 3;
return bar(); };
function bar() { return bar();
Core JavaScript

} return 8;
} };
alert(foo()); }
// return 8 // return 3
/************************************/ /************************************/
function foo(){ function foo(){

var bar = function() { return bar();
}; return 3;
return bar(); };
var bar = function() { var bar = function() {
return 8; return 8;
}; };
} }
alert(foo()); alert(foo());
// return 3 //[Type Error: bar is not a function]
Les Fonctions
Comme toute fonction, elle ne sera évoqué que si

on fait appel à elle.
Core JavaScript
Les fonctions JavaScript peuvent être invoqué de

plusieurs façons :
En tant que fonction
En tant que méthode
En tant que constructeur
Indirectement avec les méthodes call() et apply()
Les Fonctions
Invocation d’une méthode

o["m"](x,y);
a[0](z) // En supposant que a[0] soit une fonction.
Core JavaScript
f().m(); // Invoque la méthode m() de la valeur de retour

de f()
var calculator = { // un objet littéral

operand1: 1,
operand2: 1,
add: function() {
// Ici on utilise le this pour faire référence à l’objet
// (le context d’exécution)
this.result = this.operand1 + this.operand2;
}
};
calculator.add();
calculator.result // => 2
Les Fonctions
Invocation indirecte
Les fonctions JS sont des objets, ils peuvent donc avoir
des méthodes.
Core JavaScript
Deux méthodes prédéfinies permettent d’invoquer

indirectement la fonction : call() et apply()
Elles permettent toutes les deux d’invoquer une méthode
temporaire d’un objet sans l’ajouter à son prototype.
Le premier arguments des deux méthodes est l’objet
auquel on applique la méthode.
call(): utilises sa liste d’arguments comme arguments de la
méthode invoquer.
apply(): Ne connaissant pas le nombre des arguments on passe
un tableau.
Les Fonctions
Invocation indirecte
Les fonctions JS sont des objets, ils peuvent donc avoir
des méthodes.
Core JavaScript
Deux méthodes prédéfinies permettent d’invoquer

indirectement la fonction : call() et apply()
Elles permettent toutes les deux d’invoquer une méthode
temporaire d’un objet sans l’ajouter à son prototype.
Le premier arguments des deux méthodes est l’objet
auquel on applique la méthode.
f.call(o,1,2); // Associe l’objet o à la méthode f avec les arguments 1 et 2
f.apply(o,[1,2]); // Associe l’objet o la méthode f avec le tableau d’arguments
call(): utilises sa liste d’arguments comme arguments de la
o.m = f;
méthode
// Les deux invoquer.
sont équivalentes à :
// Crée une méthode temporaire de o.
apply():
o.m(1,2);
delete o.m;
Ne connaissant pas
// L’invoquer enlelui
nombre
passantdes
// Supprimer la méthode.
arguments on passe
2 paramètres.
un tableau.
Les Fonctions
S’il y a plus de paramètres, il n’y a aucune façon

d’accéder directement à ces derniers
On peut utiliser l’objet arguments
Core JavaScript
Tableau contenant l’ensemble des paramètres transmises

Permet de définir des fonctions avec un nombre
quelconque de paramètres
function max(/* ... */) {
// On initialise à – l’infini :D
var max = Number.NEGATIVE_INFINITY;
// On boucle sur les arguments pour chercher le plus grand.
for (var i = 0; i < arguments.length; i++)
if (arguments[i] > max) max = arguments[i];
return max;
}
//Appeler avec autant de paramètres que vous voulez

var largest = max(1, 10, 2, 20, 3, 30, 4, 400, 500, 6); // => 500
Les Fonctions auto exécutées
Vous pouvez déclencher l’appel de votre fonction

en même temps que sa définition.
Syntaxe:
Core JavaScript
(function(param1, ..., paramN){

// traitement
})(p1, ..., pN);
Synthétise la déclaration et l’appel en une
seule syntaxe
ES6 : Les Fonctions fléchées
 La notation des fonctions fléchées (arrow functions) est
l’exemple typique de syntaxe visant à optimiser la
compacité du code.
 Cette notation astucieuse, utilisant les caractères =>, est
Core JavaScript
même finalement assez lisible.

 Si la fonction attend un seul paramètre, la syntaxe générique
est : p => { /* Instructions */ };
 Si la fonction attend plusieurs paramètres, les
parenthèses sont obligatoires :
(p1, …, pN) => { /* Instructions */ };
 Nous pouvons réécrire notre fonction de mise à jour du

titre avec :
const saySomething = message => { console.log(message); };
Core JavaScript ES6 : Les Fonctions fléchées
Si la fonction n’a pas de paramètre, on utilise les parenthèses vides :
() => { /* Instructions */ };
Si l’instruction de la fonction retourne une expression, on écrit :
(p1, …, pN) => { return expression };
La syntaxe peut être encore réduite à :
(p1, …, pN) => expression;

ES6 : Les Fonctions fléchées Avantages
 L’un des avantages majeurs de l’utilisation des fonctions
fléchés est la notion de this lexical et non local.
function Voiture() {
this.kilometres = 100;
Core JavaScript
console.log(this.kilometres);
setTimeout(function () {
console.log(this);
this.kilometres += 10;
}, 1000);
}
new Voiture();
 L’un des avantages majeurs de l’utilisation des fonctions
fléchés est la notion de this lexical et non local.
function Voiture() { function Voiture() {
var self = this; this.kilometres = 100;
Core JavaScript
self.kilometres = 100; console.log(this.kilometres);

console.log(self.kilometres); setTimeout(
setTimeout(function() { function () {
console.log(“this”, self); console.log(“this”, this);
self.kilometres += 10; this.kilometres += 10;
console.log(self.kilometres); console.log(this.kilometres);
}, 2000); }.bind(this),
} 2000
new Voiture(); );
}
new Voiture();
 Les fonctions fléchées en es6 utilise un this lexical (celui du
contexte ou elles sont définies).
function Voiture() {
this.kilometres = 100;
Core JavaScript
setTimeout(() => {
console.log("this", this);
this.kilometres += 10;
}, 1000);
}
new Voiture();
Les Fonctions (callback function)
Une fonction de rappel callback function est une

fonction passée en paramètre d’une autre fonction.
Pour JavaScript, c’est le cas par exemple
Core JavaScript
de setTimeout(), setInterval() ou encore des fonctions

appelées par un gestionnaire d’événement (client
side).
Permettent la généricité de traitement.
Les Fonctions (callback function)
Une fonction de rappel callback function est une

fonction passée en paramètre d’une autre fonction.
Pour JavaScript, c’est le cas par exemple
Core JavaScript
de setTimeout(), setInterval() ou encore des fonctions

appelées par un gestionnaire d’événement (client
side).
// Retourne une fonction qui calcule f(g)
// La fonction retournée g passe tous ces arguments à f, puis retourne la valeur
de retour de f. (c’est le principe de f°g).
Permettent la généricité de traitement.
// f et g sont appelées avec le même this.
function compose(f,g) {
return function() {
// Nous avons utilisé call pour f parce qu’on lui transmet une seule
valeur
// Nous avons utilisé apply pour g parce qu’on lui transmet un tableau
de paramètres
return f.call(this, g.apply(this, arguments));
};
}
var square = function(x) { return x*x; };
var sum = function(x,y) { return x+y; };
var squareofsum = compose(square, sum);
squareofsum(2,3) // => 25
Les Fonctions
function add(x,y) { return x + y; }

function subtract(x,y) { return x - y; }
function multiply(x,y) { return x * y; }
function divide(x,y) { return x / y; }
// Cette fonction prend le nom de l’opération,
Core JavaScript
vérifie que c’est une fonction de l’objet

// Voici une fonction qui prend en
operators et ensuite l’exécute
paramètre la fonction ainsi que les deux
opérandes.
function operate2(operation, operand1,
function operate(operator, operand1,
operand2) {
operand2) {
if (typeof operators[operation] ===
return operator(operand1,
"function")
operand2);
return operators[operation](operand1,
}
operand2);
// Que représente cet exemple
else throw "unknown operator";
var i = operate(add, operate(add, 2, 3),
}
operate(multiply, 4,
// Permet de retourner la chaine "hello world "
5));
// On regroupe tout ca dans un objet
var j = operate2("add", "hello",
var operators = {
operate2("add",
add: function(x,y) { return x+y; },
" ", "world"));
subtract: function(x,y) { return x-y;
},
// utilise pow:
multiply: function(x,y) { return x*y;
var k = operate2("pow", 10, 2);
},
divide: function(x,y) { return x/y; },
pow: Math.pow
};
Les Classes (ES6)
En JS vanilla la définition de classes se faisait à

travers des fonctions.
function creerPersonne(nom, age) {
Core JavaScript
// propriétés
this.nom = nom;
this.age = age;
// méthode
this.log = function () {
console.log(this.nom + " a " + this.age + " ans.");
};
}
var aymenSellaouti = new creerPersonne("Aymen Sellaouti", 38);
aymenSellaouti.log();
Depuis ES6, vous pouvez définir des classes.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes
Les Classes (ES6)
Syntaxe
class Personne {
constructor(nom, age) {
Core JavaScript
// propriétés
this.nom = nom;
this.age = age;
// méthode
this.log = function () {
console.log(this.nom + " a " + this.age + " ans.");
};
}
}
const aymen = new Personne("aymen", 38);
aymen.log();
Les Classes : Héritage (ES6)
class Admin extends Personne {
Pour faire de constructor(nom, age, email, password) {
super(nom, age);
l’héritage, utiliser le this.email = email;
this.password = password;
mot clé extends. }
Core JavaScript
log() {
Pour référencer le super.log();
console.log("cc");
parent utiliser le mot }
console.log(`mon email est : ${this.email}`);
clé super }
const admin = new Admin(
"aymen sellaouti",
38,
"[email protected]",
"123456"
);
admin.log();
Les Classes : getter et setter (ES6)
class Admin extends Personne {
 Pour les getter et setter ajouter les constructor(nom, age, email, password) {
super(nom, age);
mot clé get et set devant la this._email = email;
méthode au nom de la propriété. this.password = password;
}
 Attention, si vous écrivez set get email() {
return `L'email est : ${this._email}`;
email(email){this.email = email }, }
Core JavaScript
set email(email) {
vous allez déclencher une boucle if (email.includes("@")) {
infinie this._email = email;
} else {
 En effet, puisque vous déclenchez }
console.log("email must contain @");
un nouveau set. Il faut donc }

log() {
modifier le nom de la variable super.log();
interne pour qu'il soit différent du console.log("cc");
console.log(`mon email est : ${this._email}`);
nom de la méthode set. }
}
 La convention est d’utiliser un tiret const admin = new Admin(
"aymen sellaouti",
bas pour différencier la variable de 38,
classe de son setter/getter "[email protected]",
"123456"
(this._email et set email). );
admin.log();
admin.email = "newEmail";
admin.log();
Les Classes : méthodes static (ES6)
 Comme dans tout les langages, une class Admin extends Personne {
constructor(nom, age, email, password) {
méthode statique est une méthode super(nom, age);
de classe indépendante de toute this._email = email;
instance. this.password = password;
Admin.status++;
 Pour accéder à une propriété static,
Core JavaScript
}
vous devez passer par la classe. static status = 1;
static whoIAm()
console.log("I am an admin");
}
}
const admin = new Admin(
"aymen sellaouti",
38,
"[email protected]",
"123456"
);
admin.log();
admin.email = "newEmail";
admin.log();
Admin.whoIAm();
console.log(Admin.status);
ES6 déstructuration (destructuring)
 La déstructuration permet de définir des variables depuis
un tableau ou un objet en utilisant de la mise en
correspondance (matching) et plus particulièrement de la
correspondance de motifs ( pattern matching)
Core JavaScript
var array = ["un", "deux", "trois", "quatre"];

var [a, b, c, d] = array;
console.log(a, b, c, d);
// => un, deux, trois, quatre
// => Il est possible d'ignorer un élément

var [un, , trois, quatre] = ["α", "β", "γ", "δ"];
console.log(un, trois, quatre);

// => α, γ, δ
ES6 déstructuration (destructuring)
 Pour les objets on accède via les noms des propriétés.
 Ces noms peuvent être renommés.
//Pour les objets on accéde avec les noms de propriétés
var newObject = { a: 1, b: 2, c: 3};
Core JavaScript
var { a, b, c} = newObject;
console.log(a, b, c);
// On peut nommer les paramètres récupérés

var newObject = { a: 1, b: 2, c: 3};
var { a: un, b: deux, c: trois} = newObject;
console.log(un, deux, trois);
 En cas d’erreur la variable aura comme valeur undefined

var [a, b, c] = [1, 2];
console.log(a, b, c);
// => 1, 2, undefined
var [a] = [];
console.log(a);
// => undefined
ES6 décomposition (spread)
 La syntaxe de décomposition permet d'étendre un itérable
(tableau, chaîne de caractères ou objet) en lieu et place de
plusieurs arguments (pour les appels de fonctions) ou de plusieurs
éléments (pour les littéraux de tableaux) ou de paires clés-valeurs
Core JavaScript
(pour les littéraux d'objets).

 Pour l'utilisation de la décomposition dans les appels de fonction :
f(...objetIterable);
 Pour les littéraux de tableaux :
[...objetIterable, 4, 5, 6]
 Pour les littéraux objets (nouvelle fonctionnalité pour
ECMAScript, actuellement en proposition de niveau 4, finalisée) :
let objClone = { ...obj };
ES6 décomposition (spread)
 La syntaxe de décomposition permet d'étendre un itérable
(tableau, chaîne de caractères ou objet) en lieu et place de
plusieurs arguments (pour les appels de fonctions) ou de plusieurs
éléments (pour les littéraux de tableaux) ou de paires clés-valeurs
Core JavaScript
(pour les littéraux d'objets).

 Pour l'utilisation de la décomposition dans les appels de fonction :
f(...objetIterable);
 Pour les littéraux de tableaux :
[...objetIterable, 4, 5, 6]
 Pour les littéraux objets (nouvelle fonctionnalité pour
ECMAScript, actuellement en proposition de niveau 4, finalisée) :
let objClone = { ...obj };
ES6 fonctions : les valeurs par défaut
 Vous pouvez dorénavant associer des valeurs par défaut à vos
paramètres de fonctions.
Core JavaScript
ES6 fonctions : paramètres de nombre variables
 Vous pouvez avoir un nombre variables de paramètres.
 Vous pouvez aussi récupérer ces paramètres comme vous le
souhaitez.
Core JavaScript
ES6 fonctions : paramètres de nombre variables
 Vous pouvez aussi utiliser le spread operator afin de décomposer
les paramètres que vous passez à votre fonction.
Core JavaScript
ES6 Les collections et les dictionnaires
 Avant pour gérer une collection on utilisait un tableau et pour
gérer un dictionnaire, on utilisait les objets.
 Afin de gérer ses deux structures d’une façon plus fluide deux
Core JavaScript
nouvelles structures ont été ajoutées :
 Set
 Map
ES6 Les collections (Set)
 Un Set est un objet permettant de stocker un ensemble de
valeurs, quelle qu'elle soit comme un tableau.
 La différence est que le Set va garantir l’unicité des éléments.
 Si vous ajouter un élément déjà existant dans le Set, celle-ci ne
Core JavaScript
sera stockée qu'une seule fois.

 Set conserve les valeurs dans l’ordre ou elles ont été insérées.
 Pour définir un Set instancier un objet de la Set;
 Pour ajouter un élément utiliser la méthode add.
 Pour supprimer un élément utiliser la méthode delete.
 Pour vérifier l’existence d’un élément utiliser la méthode has.
 Pour récupérer la taille d’un Set utiliser l’attribut size.
ES6 Les collections (Set)
const maCollection = new Set();
console.log('Taille initiale de ma collection',maCollection.size);
maCollection.add('aymen');
maCollection.add(38);
console.log('Taille de ma collection',maCollection.size);
Core JavaScript
maCollection.add(38);
maCollection.delete(38);
console.log('est ce que maCollection a la valeur 38', maCollection.
has(38));
ES6 Les dictionnaires (Map)
 Le paramètre valeurs passé peut être tout objet itérable.
 Un Map est un objet permettant destocker des valeurs indexées
par un clé unique, on peut le considérer comme un dictionnaire.
 Contrairement à un Objet où les noms de propriétés doivent être
Core JavaScript
des chaînes, les clé et les valeurs d'un Map peuvent être de
n’importe quel type.
 Pour créer un map instancier l’objet Map.
 Pour ajouter un élément utiliser la méthode set.
 Pour récupérer un élément utiliser la méthode get.
 Pour supprimer un élément utiliser la méthode delete.
 Pour vérifier l’existence d’un élément utiliser la méthode has.
 Pour récupérer la taille d’un Set utiliser l’attribut size.
Core JavaScript ES6 Les dictionnaires (Map)
ES6 Les promesses (Promise)
 Une promesse est un objet (Promise) qui représente la complétion
ou l'échec d'une opération asynchrone.
 Le fonctionnement des promesses est le suivant :
 On crée une promesse en instanciant un objet de
Core JavaScript
Promise.
 Le constructeur prend en paramètre deux callbacks
qui sont resolve et reject.
 La promesse va toujours retourner deux résultats :
 resolve en cas de succès
 reject en cas d’erreur
 Vous devrez donc gérer les deux cas afin de créer
votre traitement
 Pour consommer la promesse, vous avez deux méthodes à gérer :
 then en cas de succès et qui prend en paramètre les données passée à la
méthode resolve.
 catch en cas d’erreur et qui récupère un objet error.
Core JavaScript
const promise = new Promise((resolve, reject) => {

setTimeout(() => {
resolve(3);
}, 2000);
});
promise
.then((x) => {
console.log("resolved with value :", x);
})
.catch((error) => console.log("catched error", error));
https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Using_promises
 La méthode then retourne à son tour une Promise.
 Ceci nous permet de chainer les fonctions dépendantes les une
des autres.
Core JavaScript
faireQqc().then(function(result) {
return faireAutreChose(result);
})
.then(function(newResult) {
return faireUnTroisiemeTruc(newResult);
})
.then(function(finalResult) {
console.log('Résultat final : ' + finalResult);
})
.catch(failureCallback);
https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Using_promises
ES6 await async
 Afin d’éviter les successions de then des promesses pour gérer les fonctions
asynchrones, vous pouvez utiliser les mots clés async et await.
 En précédent une fonction avec le mot clé async, vous spécifier que votre
méthode est asynchrone.
 Si vous souhaiter que dans cette fonction il y a un traitement asynchrone et que
Core JavaScript
vous souhaiter attendre sa complétion pour continuer le traitement, il vous

suffit de le précéder de await.
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
}
asyncCall();
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/async_function
Intégrer le Js avec votre page HTML
 Afin d’intégrer votre code JS avec votre page HTML, deux méthodes peuvent être
appliquées :
 L’intégrer directement à travers une balise <script></script> au sein de votre

page HTML et y mettre votre code JS.
Client Side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log('Bonjour je suis un
script non portable je ne sert qu\'ici
:(');
</script>
</head>
<body>
</body>
</html>
 Ca assassine le concept de portabilité du code.

 Anti séparation des rôles. 88
Intégrer le Js avec votre page HTML
 insertion d’un fichier externe (usuellement ’.js’)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
Client Side
</head>
<body> console.log('Bonjour je suis un script
<script src=‘app.js’></script> libre liiiiiiiiibre vous avez besoin de
</body> moi il suffit de m’appeler :D');
</html>
first.html app.js
89
Le DOM
 Le Document Object Model (DOM) représente une API pour les documents
HTML et XML permettant leur manipulation.
 En tant que recommandation du W3C, l’objectif du DOM est de fournir une

interface de programmation standard pour être utilisée par tous (applications, OS)
Client Side
 Permet de construire une arborescence de la structure d’un document et de ses

éléments.
 Modélisé sous forme d’arbre.
 Chaque élément du DOM est représenté par un objet en JavaScript.
 La tête de l’arbre est l’objet window qui représente la fenêtre du navigateur.
 L’objet document est un sous-objet de window c’est son fils. Il représente la page
Web et permet de pointer ou d’accéder à la balise HTMl.
90
Le DOM
html est le parent direct
title est l'unique enfant de head et de body, ses
de head deux enfants
<html>
Client Side
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Titre</h1>
<p>Un peu de texte</p>
</body>
</html>
h1 est le premier
enfant de body
p est le deuxième, il est frère

de h1 91
Le DOM
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
Client Side
<title>Le titre de la page</title>

</head>
<body>
<div>
<p>Un peu de texte
<a>et un lien</a>
</p>
</div>
</body>
</html>
92
Les différents types des objets du DOM
 Node : C’est le type le plus générique, tous les éléments du DOM sont des Nodes.
 Element : Représente un élément HTML ou XML
 HTMLElement : Dans le DOM HTML, un Element est un HTMLElement. Ca

représente les éléments HTML du documents , e.g : les balises.
Client Side
 NodeAttribute : Les attributs des

balises
 TextAttribute : Les attributs textuelles
 Les nœuds commentaires
93
Quelques fonctions de Window
 alert() : affiche une alerte et bloque le script lors de son appel.

Client Side
 prompt() : permet d’avoir un champ input permettant de récupérer une valeur

de l’utilisateur.
 Confirm() : affiche un message contenant deux boutons afin de confirmer ou

non.
94
Héritage dans le DOM
 Tous les éléments du DOM sont des objets ce qui implique qu’ils contiennent
tous leurs propres méthodes et des attributs.
 Ils existent des méthodes et attributs communs à l’ensemble des objets. Ceci est
dû au fait que l’ensemble des éléments sont tous du même type : les nœuds
(Node).
 L’aspect d’héritage entre les différents types d’éléments permet d’avoir les
éléments en commun.
Client Side
Node
Element
HTMLElement
HTMLDivElement
95
Manipulation des éléments
 Pour accéder aux éléments HTML en utilisant le DOM, l’objet document offre
plusieurs méthodes :
 getElementById() qui, comme son nom l’indique, permet d’accéder à un

élément par son id.
Client Side
 getElementsByTagName() permet de récupérer sous forme d’un tableau

d’objets tous les éléments du tag passé en paramètre.
 getElementsByName() permet de récupérer sous forme d’un tableau

d’objets tous les éléments dont l’attribut name est égale au nom passé en
paramètre.
 querySelector() cette fonction prend en paramètre une chaine de caractère

représentant un sélecteur CSS. Elle retourne le premier élément qui y
correspond.
 querySelectorAll() cette fonction prend en paramètre une chaine de

caractère représentant un sélecteur CSS. Elle retourne un tableau d’objets
contenant TOUS les éléments qui correspondent à ce sélecteur.
96
Manipulation des éléments : Exemple
<!doctype html>
<html>
<head>
<title>Ma page de Test </title>
</head>
<body>
<div id="monMenu"> var getByid=
<div class="item"> document.getElementById('monMenu');
<span>menu 1</span> var getElementByTagName =
<span>menu 2</span> document.getElementsByTagName("div");
Client Side
</div> var getElementByName =

<div class="Pub"> document.getElementsByName("monNom");
<span>Pub 1</span> console.log('ce que me donne
<span>Pub 2</span> getElementById : '+ getByid.textContent);
</div> console.log('Ce que donne le
</div> getElementByTagName : ');
<div id="content">
<span>Ici je vais mettre mon for(var
contenu</span> i=0;i<getElementByTagName.length;i++){
</div> console.log(getElementByTagName[i]);
Un formulaire bizar pour tester }
getElementsByName() :
<form name="monNom"> console.log('Ce que donne le
<input type="password" name="monNom"> getElementByName : ');
<input> for(var
<button name="monNom"></button> i=0;i<getElementByName.length;i++){
</form> console.log(getElementByName[i]);
<script src="test.js"></script> }
</body>
</html>
test.js 97
test.html
Client Side Manipulation des éléments : Exemple
Résultat dans la console 98

Manipulation des éléments : Exemple
<!doctype html>
<html>
<head>
</head>
<body> var queryselector=
<div id="monMenu"> document.querySelector("head title");
<div class="item"> var queryselectorAll=
<span>menu 1</span> document.querySelectorAll("#monMenu .item
<span>menu 2</span> span");
Client Side
</div>
<div class="Pub"> console.log('ce que me donne querySelector
<span>Pub 1</span> : '+ queryselector.textContent);
<span>Pub 2</span> console.log('Ce que donne le
</div> querySelectorAll : ');
</div> for(var
<div id="content"> i=0;i<queryselectorAll.length;i++){
<span>Ici je vais mettre mon
contenu</span> console.log(queryselectorAll[i].textConten
</div> t);
Un formulaire bizar pour tester }
getElementsByName() :
<form name="monNom"> test1.js
<input type="password" name="monNom">
<input>
<button name="monNom"></button>
</form>
<script src="test1.js"></script>
</body>
</html>
test.html 99
Client Side Manipulation des éléments : Exemple
Résultat dans la console
100
 Pour accéder à la liste des classes CSS définies dans l'attribut class d'un élément
nous utilisons className qui retourne la liste des classes associées à l’élément
en question dans une chaine de caractère ou les classes sont séparées par des
Client Side
espaces.
 La méthode classList quant à elle retourne un tableau contenant les classes

associées à un élément. Elle offre aussi les méthodes suivantes :
 add() qui ajoute une classe au tableau.
 remove() qui supprime une classe.
 contains() qui vérifie si une classe existe ou non.
 toggle() ajoute la classe si elle n’existe pas et l’enlève si elle existe
101
 Afin de lire, de créer ou de modifier un attribut d’un « Element » du DOM,
l’objet Element met votre disposition deux méthodes
 getAttribute() qui comme son nom l’indique permet de récupérer la valeur
d’un attribut.
 setAttribute() qui permet de la modifier
Exemple :
Client Side
<!doctype html> var

<html> leLien=document.getElementById("lelien");
<head> var dest=lelien.getAttribute("href");
<meta charset="utf-8" /> console.log("Voici l'url du lien avant la
<title>Ma page de Test </title> modification : "+dest);
</head> var nouveauCvLien=prompt();
<body> leLien.setAttribute("href",nouveauCvLien)
vous allez trouvez mon Cv <a id="lelien" ;
href="www.monCv.tn">ici</a>. dest=lelien.getAttribute("href");
<script src="test2.js"></script> console.log("Voici l'url du lien après la
</body> modification : "+dest);
</html>
Element.html test2.js
102
Client Side Manipulation des éléments
103
Console
 La deuxième méthode mais qui n’est pas appliquée sur la totalité des
navigateurs est d’accéder directement en utilisant le nom de l’attribut
 Dans notre exemple le getAttribut(«href») est remplacé par.href. Le
setAttribut est lui remplacé par lautreLien.href="newLien.tn"
Client Side
var lautreLien=document.getElementById("lautrelien");
alert(lautreLien.href);
lautreLien.href="newLien.tn"
test2.js
104
Manipulation le texte des balises
 innerHTML : permet de récupérer du code html enfant d’une balise.
 Elle permet aussi d’ajouter directement du contenu HTML
 textContent (dans sa version standard et innerText qui n’est pas supporté par
tous les navigateurs) permet de faire le même travail que innerHTML sauf qu’elle
Client Side
supprime les balises HTML) var monDiv=document.getElementById("div");

var monDiv1=document.getElementById("div1");
<!doctype html> console.log("Je suis innerHTML voila ce que
<html> j'affiche "+monDiv.innerHTML);
<head>
<meta charset="utf-8" /> console.log("Je suis textContentt voila ce
<title>Ma page de Test </title> que j'affiche "+monDiv1.textContent);
</head>
monDiv1.textContent="I delete every thing in
<body> my road <b>i'm a monster 3:)</b> ";
<div id="div">
<p>Je suis dans la div d'id div</p> monDiv.innerHTML="I delete every thing in my
</div> road <b>i'm a monster too 3:)</b> ";
<div id="div1">
<p>Je suis dans la div d'id div1</p> console.log("Je suis innerHTML voila ce que
</div> j'affiche apres modification
<script src="test4.js"></script> "+monDiv.innerHTML);
</body>
console.log("Je suis textContent voila ce
</html> que j'affiche apres modification
"+monDiv1.textContent);
Element.html test4.js
105
Client Side Manipulation le texte des balises
console
106
Quelques méthodes utiles
 Il existe quelques méthodes très utiles qui renseigne sur les éléments du DOM
 nodeType permet de récupérer le type d’un nœud du DOM. Elle retourne un

numéro qui correspond au type du nœud. Les types les plus courants sont :
 1 Element
 2 attribut
 3 texte
Client Side
 8 commentaire
 nodeName permet de récupérer le nom du nœud en MAJISCULE.
107
Se déplacer dans le DOM
 childNodes permet de retourner un tableau contenant l’ensemble des nœuds

fils.
Client Side
 nextSibling permet d’accéder au nœud suivant donc au frère suivant d’un nœud
 previousSibling permet d’accéder au nœud précédent donc au frère précédent

d’un nœud
 nextElementSibling permet d’accéder à l’élément HTML suivant donc au frère

suivant d’un nœud
 previousElementSibling permet d’accéder à l’élément HTML précédent donc au

frère précédent d’un nœud
108
<!doctype html> var nod=document.getElementById("para");
<html> console.log("Bonjour je suis le noeud
<head> "+nod.nodeName) ;
<meta charset="utf-8" /> console.log("Pour visualiser la différence
<title>Ma page de Test </title> entre firstChild et firstElementChild ");
</head> console.log("bonjour je suis le first child
<body> : "+nod.firstChild);
console.log("bonjour je suis le first
<p id="para">vous allez trouvez mon Cv <a Elementchild : "+nod.firstElementChild);
Client Side
id="lelien" href="www.monCv.tn">ici</a>.
Veuillez le consulter et appeler moi au
<i>222222</i> pour plus de détails</p> test6.js
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
<script src="test6.js">
</script>
</body>
</html>
console
Element.html 109
 Plusieurs propriétés sont offertes permettant le déplacement dans le DOM.
 Ces propriétés permettent à partir d’un nœud d’accéder à son père, ou à ses
enfants.
 parentNode permet à partir d’un élément d’accéder à son élément père.

Client Side
 firstChild permet, comme son nom l’indique, à partir d’un élément, d’accéder au
premier enfant d’un noeud.
 lastChild permet, comme son nom l’indique, à partir d’un élément, d’accéder au
dernier enfant d’un noeud.
 firstElementChild permet, comme son nom l’indique, à partir d’un élément,

d’accéder au premier Element enfant d’un noeud.
 lastElementChild permet, comme son nom l’indique, à partir d’un élément,

d’accéder au dernier Element enfant d’un noeud.
 childNodes permet de retourner un tableau contenant l’ensemble des nœuds

fils. 110
<html> console.log("Bonjour je suis le noeud
<head> "+nod.nodeName) ;
<meta charset="utf-8" /> console.log("Je vous présente mes fils : ");
<title>Ma page de Test </title> var fils=nod.childNodes;
</head> for (var i=0;i<fils.length;i++){
<body> console.log("bonjour je suis le fils numéro
:"+ (i+1)+" je m'appelle"
<p id="para">vous allez trouvez mon Cv <a +fils[i].nodeName+" Et mon contenu text est :");
Client Side
id="lelien" href="www.monCv.tn">ici</a>. if(fils[i].nodeType==Node.ELEMENT_NODE){

Veuillez le consulter et appeler moi au console.log(fils[i].firstChild.data);
<i>222222</i> pour plus de détails</p> }else{
console.log(fils[i].data);
<div id="monMenu"> }
}
<div id="item"> test7.js
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body>
</html>
Element.html console 111
Mise à jour du DOM : Ajout d’un élément
 Afin d’ajouter un nœud dans le DOM il faut généralement suivre les étapes
suivantes :
 Récupérer ou créer l’élément à ajouter. Pour le créer, on utilise la méthode de
l’objet document createElement() qui prend en paramètre une chaine
contenant le nom de l’élément à créer.
 Décorer l’élément avec les attributs nécessaires en utilisant l’une des deux
Client Side
méthodes précédemment mentionnées.

 En utilisant la méthode setAttribute(nomAttrib,val)
 En accédant directement à la propriété de l’objet : objet.attribut=valeur
 Insérer l’élément dans le DOM en utilisant la méthode appendChild() qui prend

en paramètre l’élément à insérer et elle ajoute cet élément comme dernier fils
de l’objet qui a appelé la méthode.
 Pour les textNode on utilise la méthode createTextNode() qui prend en paramètre le

texte en question.
 Il existe aussi la méthode qui permet d’insérer un nœud avant un autre c’est la
méthode insertBefore() qui prend en paramètres le nœud à insérer et le nœud fils
avant lequel on va insérer. Si ce nœud n’est pas spécifié le nouveau nœud sera
insérer en dernier.
Mise à jour du DOM : exemple ajout
<html> var newNode=document.createElement("img");
<head> newNode.id="asimg";
<meta charset="utf-8" /> newNode.src="as.jpg";
<title>Ma page de Test </title> newNode.alt="Je suis l'image de aymen";
</head> newNode.width="50";
<body> newNode.height="50";
nod.appendChild(newNode);
<p id="para">vous allez trouvez mon Cv <a
id="lelien" href="www.monCv.tn">ici</a>. test8.js
Client Side
<i>222222</i> pour plus de détails</p>
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body>
</html>
Element.html console
113
Mise à jour du DOM : Cloner un élément
 Afin de cloner un nœud dans le DOM il suffit d’appeler la méthode cloneNode().

Client Side
 Cette méthode prend en paramètre un booléen.
 True : Le nœud sera cloner avec ces fils et ses attributs
 False : Le nœud sera cloner sans ces fils et ses attributs

Mise à jour du DOM : exemple clone
var nod=document.getElementById("para");
<!doctype html> var newNode=document.createElement("img");
<html> newNode.id="asimg";
<head> newNode.src="as.jpg";
<meta charset="utf-8" /> newNode.alt="Je suis l'image de aymen";
<title>Ma page de Test </title> newNode.width="50";
</head> newNode.height="50";
<body> nod.appendChild(newNode);
var trueClonedNode = nod.cloneNode(true);
<p id="para">vous allez trouvez mon Cv <a var falseClonedNode = nod.cloneNode(false);
id="lelien" href="www.monCv.tn">ici</a>. document.body.appendChild(trueClonedNode);
Client Side
document.body.appendChild(falseClonedNode);
test9.js
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body>
</html>
Element.html 115
Mise à jour du DOM : exemple clone
var nod=document.getElementById("para");
<!doctype html> var newNode=document.createElement("img");
<html> newNode.id="asimg";
<head> newNode.src="as.jpg";
<meta charset="utf-8" /> newNode.alt="Je suis l'image de aymen";
<title>Ma page de Test </title> newNode.width="50";
</head> newNode.height="50";
<body> nod.appendChild(newNode);
var trueClonedNode = nod.cloneNode(true);
<p id="para">vous allez trouvez mon Cv <a var falseClonedNode = nod.cloneNode(false);
id="lelien" href="www.monCv.tn">ici</a>. document.body.appendChild(trueClonedNode);
Client Side
document.body.appendChild(falseClonedNode);
test9.js
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body>
</html>
Element.html console
116
Mise à jour du DOM : Supprimer un élément
 Afin de supprimer un nœud dans le DOM il suffit d’appeler la méthode

Client Side
removeChild() à partir du nœud pére.
 Cette méthode prend en paramètre le nœud à supprimer.
 La valeur de retour est une référence sur le nœud supprimé.
 Comment faire pour supprimer le premier span d’un menu d’un div d’id item ?
Mise à jour du DOM : exemple remove
<!doctype html> var nod=document.getElementById("item");
<html> nod.removeChild(nod.firstElementChild);
<head>
<meta charset="utf-8" /> test10.js
<title>Ma page de Test
</title>
</head>
<body>
<p id="para">vous allez trouvez mon Cv

<a id="lelien"
Client Side
href="www.monCv.tn">ici</a>. Veuillez le
consulter et appeler moi au
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
<script src="test10.js"> console
</script>
</body>
</html> Element.html 118
Mise à jour du DOM : remplacer un élément
 Afin de remplacer un nœud dans le DOM par un autre il suffit d’appeler la méthode
replaceChild() partir du nœud pére.
 Cette méthode prend en paramètre le nouveau nœud suivi de l’ancien nœud.

 Comment faire pour remplacer le second span par la div pub?
<!doctype html>
<html>
Client Side
<head>
</head>
<body>
<p id="para">vous allez trouvez mon Cv <a id="lelien" href="www.monCv.tn">ici</a>. Veuillez le consulter
et appeler moi au <i>222222</i> pour plus de détails</p>
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body>
</html>
Mise à jour du DOM : exemple replace
<html> var
<head> newnod=document.getElementsByClassName("Pub")[0].cloneN
<meta charset="utf-8" /> ode(true);
<title>Ma page de Test nod.replaceChild(newnod,nod.lastElementChild);
</title>
</head> test11.js
<body>

<a id="lelien"
Client Side
href="www.monCv.tn">ici</a>. Veuillez le
consulter et appeler moi au
<div id="monMenu">
<div id="item">
<span>menu 1</span>
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body> console 120
</html> Element.html
Manipulation du CSS
 JavaScript permet aussi de manipuler et de gérer l’apparence des éléments HTML.
 Pour ce faire, il offre une panoplie d’outils permettant de modifier le CSS.
 La base de la manipulation des CSS par JavaScript est l’aspect CASCADE qui indique
Client Side
que les règles de styles qui sont appliquées à un élément du document HTML
peuvent venir d’une cascade de différentes sources dont la plus prioritaire est
l’attribut style d’un élément HTML individuel.
 Style étant la propriété la plus prioritaire, c’est elle qui sera la plus utilisée.
Manipulation du CSS : La propriété style
 Pour accéder à la propriété style :
 NotreElement.style
 Pour ajouter ou modifier une des propriétés de style
 NotreElement.style.propriété
var nod=document.getElementById("item");
…Exemple : nod.style.backgroundColor="blue";
<div id="monMenu">
<div id="item"> test12.js
Client Side
<span>
menu 1
</span>
<span>
menu 2
</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
</script>
</body>
</html>
Element.html
 Pour afficher une propriété ?
Manipulation du CSS : getComputedStyle
 Pour accéder à une des propriétés des feuilles de styles il faut utiliser la méthode
getComputedStyle()
Client Side
 Cette méthode récupère les style CSS associés à un Element HTML qu’elle soient
dans l’attribut style, dans un bloc style ou dans une feuille de style.
 La valeur de retour est un objet contenant l’ensemble des styles, donc pour accéder
à un style en particulier il faut utiliser le nom de cette propriété.
Manipulation du CSS : getComputedStyle
<html> console.log("je suis l'objet "+ nod.nodeName + "voila
<head>
mes attributs : ");
<title>Ma page de Test </title> var mesStyles=getComputedStyle(nod);
<link href="css/test.css" console.log("ma taille est : "+mesStyles.width+" et "+
rel="stylesheet" type="text/css"> mesStyles.height);
</head> console.log("La couleur de mon arrière plan est :
<body>
"+mesStyles.backgroundColor+" et la couleur de
<a id="lelien" l'écriture est "+ mesStyles.color);
href="www.monCv.tn">ici</a>. Veuillez le for(myStyle in mesStyles){
consulter et appeler moi au console.log(myStyle);
Client Side
<i>222222</i> pour plus de détails</p> console.log(mesStyles[myStyle]);

<div id="monMenu">
<div id="item">
}
<span>menu 1</span> test13.js
<span>menu 2</span>
</div>
<div class="Pub">
<span>Pub 1</span>
<span>Pub 2</span>
</div>
</div>
<input id="input" type="text" size="50" #item{
value="Cliquez ici !" background-color: yellow;
onfocus="this.value='Appuyez maintenant color: red;
sur votre touche de tabulation.';" width: 200px;
onblur="this.value='Cliquez ici !';"/>
height: 200px;
<br /><br/>
<a href="#" }
onfocus="document.getElementById('input'
).value = 'Vous avez maintenant le focus
Test.css
sur le lien, bravo !';">Un lien
bidon</a>
<script src="test13.js"></script>
</body> 124
</html> Element.html
Client Side Manipulation du CSS : getComputedStyle
Gestion des événements
 Un événement dans notre contexte est un changement d’état d’un des éléments du
DOM :
 Lorsqu’on click sur un élément, qu’on le survole ou qu’on écrit quelque chose
dedans
 Lorsqu’on on submit un formulaire
 …
Client Side
 L’utilisation des événements consiste à déclencher un traitement particulier lors de

la détection d’un événement.
 Le navigateur intercepte les événements (interruptions) et agit en conséquence
 Une fois l’événement crée, il se propage dans le DOM (l’arbre) en se dirigeant de la

racine vers le nœud cible puis en effectuant le sens inverse. Les trois étape par
lequel passe l’événement sont :
 Phase de capture
 Phase de ciblage (l’événement atteint la cible)
 Phase de bouillonnement (bubbling)
126
 Lors de l’activation du lien, un <html>
<body>
événement click va être crée. <p>
<a href="http://www.JS.com/">
 L’événement entame sa L’ Evenement
</a> de l’année
propagation (phase de capture)
</p>
du document vers le nœud qui </body>
précède la cible qui est ici le </html>
Client Side
nœud a.
Document
 L’événement atteint sa cible (le
nœud a) <html>
 L’événement entame sa 1 Capture 3 Bouillonnement
propagation vers le document <body>

(phase de bouillonnement)
<p>
2 Cible <a> <p>
L’Evenement De l’année 127

Liste non exhaustive des événements les plus utilisées :
 click : un clic du bouton gauche de la souris sur une cible
 dblclick : undouble clic du bouton gauche de la souris sur une cible
 mouseover : passage du pointeur de la souris sur une cible
 mouseout : sortie du pointeur de la souris d’une cible
Client Side
 focus : une activation d’une cible

 blur : une perte de focus d’une cible
 select : sélection d’une cible
 change : une modification du contenue d’une cible
 Input : Saisir du texte dans un champ texte
 submit : une soumission d’un formulaire
 reset : réinitialiser les éléments du formulaire
 load : à la fin du chargement d’un élément
https://developer.mozilla.org/fr/docs/Web/Events 128
Gestion des évènements : Utilisation
L’interception des événement et l’actionnement d’une action suite à
cette interception se fait de deux manière :
 Associer à un élément html un attribut onevent et y affecter le code
JavaScript à exécuter.
 Exemple onclick, onblur, onchange.
 <span onclick ="alert(‘Salut, tu as clické sur ce span et moi j ai intercépté ton
Client Side
click :D');">Cliquez-moi !</span>
 En utilisant le DOM
 En utilisant l’ancienne méthode (DOM-0), ceci est fait en affectant à l’attribut
onevent de l’élément à traiter la fonction à exécuter.
 En utilisant le DOM-2 et la méthode addEventListner()
129
Gestion des évènements : DOM-2
 La détection des événement sera réalisée à travers la méthode
addEventListner()
 Cette méthode prend 2 paramètres obligatoires et un optionnel.
 Nom de l’événément (click, blur, …)

Client Side
 La fonction qui s’executera
 Un booléen (False par défaut) qui permet de spécifier quelle phase utiliser
 False : Phase de bouillonnement y inclut la cible
 True : Phase de capture
 Dans le cas d’une Phase de bouillonnement l’élément le plus profond est le

premier à s’exécuter. C’est la phase la plus utilisé.
 Dans le cas d’une Phase de capture l’élément le plus profond est le dernier à
s’exécuter.
130
Gestion des évènements : L’objet Event
 L’objet Event permet de récupérer des information sur l’événement
déclenché
 N’est récupérable que dans une fonction associé à un événement
 Nod.addEventListner(‘click’,f(e){alert( e );})
 Tester ce code et vérifier le contenu de l’objet event dans la console
Client Side
var nod=document.getElementById("item");
nod.addEventListener('click',function (e) {
console.log(e);
console.log('Bonjour je suis l\'objet'+
this.nodeName+'et mon contenu est : '+this.innerHTML);
});
 L’une des méthodes la plus utilisée est preventDefault()qui permet
d’annuler l’événement par exemple bloquer l’envoi d’un formulaire
 Maintenant et selon votre besoin utiliser et étudier ces propriétés.
131
Introduction
 Sortie en 2015
 Noms : ES6 – ECMAScript6 – ECMAScript2015 – Harmony
 Plusieurs nouveautés :
 Arrow Functions
ES6
132
Les fonctions fléchées ( Arrow Functions)
 Sortie en 2015
 Noms : ES6 – ECMAScript6 – ECMAScript2015 – Harmony
 Plusieurs nouveautés :
 Arrow Functions
ES6
133
Références
M. Haverbeke, Eloquent JavaScript: A modern

introduction to programming, 2014
D. Flanagan, JavaScript: The Definitive Guide, 6th
edition, O’reilly, 2011
Julien CROUZET, EcmaScript 6
Olivier Hondermarck, Tout JavaScript
134

Chap3 JS

Transféré par

Chap3 JS

Transféré par

Technologies du web

Les Objets dans JavaScript

Drag & Drop

Faire un peu de dessin

Une suggestion lors de la frappe dans un Un système de chat, comme celui de

JavaScript C’est quoi ???!!

 Netscape Communications a eu besoin d’un langage

 Brendan Eich, a développé le premier prototype en

Le premier nom de ce langage a été Mocha

 JavaScript est un langage de programmation qui sert

Un compilateur va traduire le programme dans un

Un générateur de code produit l’exécutable.

Le code est ensuite exécuté

Le code source n’est pas directement exécuté par la

Un autre programme (i.e. l’interpréteur) lit et exécute

Dans l’interprétation le code source est traduit en un

Les bases du JavaScript

 JS est sensible à la casse

 JS ignore les espaces et les retours à la ligne.

 Mots clé réservés

 Dans JS l’heure et le temps sont gérés par l’objet Date.

var maDate = new Date(2010, 0, 1); // Premier jour du premier mois

 Les chaines en JS peuvent être mises entre ’ ou «

 var primitifChaine = « bjr »; var varString = new

s.substring(1,4) "ell": les 2éme 3éme et 4éme caractère.

Deux valeurs true et false

Tous le reste est évalué à true

 Pour les numériques, si la conversion n’est pas possible, la

Les variables sont déclarées avec le mot clé var.

Si une variable n’est pas initialisée elle aura la

Une variable déclarée sans utiliser le mot var est

Les variables sont non typées, le type est associé

 Déclarées dans le corps d’une fonction

 La portée (scope) d’une variable est l’emplacement dans lequel

 Vous var jdevez toujours utiliser var pour

Les variables locales sont visibles dans la fonction

Toutes les déclarations de variables sont « hoisté »

var scope = "globale";

Les variables locales sont visibles dans la fonction

Toutes les déclarations de variables sont « hoisté »

var scope = "globale";

 Dans le cadre d'une déclaration hors d'un bloc, c’est-à-dire

Un tableau est une suite de valeurs de différents

monArray = [val1, val2, ,valN];

 Lire un élément du tableau

 Ajout et suppression a[i + 1] = "hello";

 Les méthodes sur les tableaux :

 la méthode forEach permet de parcourir le tableau. Elle prend

(-1 si le 1er est inférieur au second, 0 si égaux et 1 sinon).

 concat() cette méthode renvoie un nouveau tableau constitué de ce

 includes() cette méthode détermine si le tableau contient ou non un

La méthode Array.from() permet de créer une

console.log(Array.from([1, 2, 3], x => x + x));

un booléen pour le résultat du test..

const array1 = [1, 30, 39, 29, 10, 13];

La méthode filter() crée et retourne un nouveau

par la fonction callback.

const result = words.filter(word => word.length > 6);

La méthode find() renvoie la valeur du premier

argument. Sinon, la valeur undefined est renvoyée.

const found = array1.find(element => element > 10);

La méthode map() crée un nouveau tableau avec

const array1 = [1, 4, 9, 16];

// pass a function to map

façon à obtenir une unique valeur à la fin.

const array1 = [1, 30, 39, 29, 10, 13];

méthodes initiales (jouant le rôle de la classe mais sans en être une).

méthodes appelées constructeurs constructeurs.

Le constructeur ou le prototype définit un

n’est pas nécessaire de

 Nom de propriété const nom = 'aymen';

 Suppression des propriétés

// Suppression des propriétés

 Inclut un ensemble d’identifiant, paramètres travaillant comme des

Une fonction est déclaré en utilisant le mot clé

var carre=function(x){return x*x;}