PROGRAMME CODE
DIGISTART JS
2
Déroulé de la séance
Questions et Live Coding (10 mins)
Cours et Applications (40 mins)
Exercices (60 mins)
Révisions (10 minutes)
3
Rappels
Bien souvent, ce paramètre utilise des opérateurs logiques et de comparaison.
Logique booléenne
4
QUIZ
Que vaudra cette instruction ?
vrai ET faux
Logique booléenne
5
QUIZ
Que vaudra cette instruction ?
vrai ET faux
FAUX
Logique booléenne
6
QUIZ
Que vaudra cette instruction ?
vrai OU faux
Logique booléenne
7
QUIZ
Que vaudra cette instruction ?
vrai OU faux
VRAI
Logique booléenne
8
QUIZ
Que vaudra cette instruction ?
PAS faux
Logique booléenne
9
QUIZ
Que vaudra cette instruction ?
PAS faux
VRAI
Opérateurs de Comparaison,
Opérateurs Logiques
10
QUIZ
Que vaudra cette instruction ?
var first = 13;
var second = 3
!(first > second)
Opérateurs de Comparaison,
Opérateurs Logiques
11
QUIZ
Que vaudra cette instruction ?
var first = 13;
var second = 3
!(first > second)
false
true
not
{
Opérateurs de Comparaison,
Opérateurs Logiques
12
QUIZ
Que vaudra solution ?
var solution;
function isNumberGreaterThanThree(number) {
return number > 3;
}
if (isNumberGreaterThanThree(4) && isNumberGreaterThanThree(2)) {
solution = "A";
} else {
solution = "B";
}
Opérateurs de Comparaison,
Opérateurs Logiques
13
QUIZ
Que vaudra solution ?
var solution;
function isNumberGreatherThanThree(number) {
return number > 3;
}
if (isNumberGreatherThanThree(4) && isNumberGreatherThanThree(2)) {
solution = "A";
} else {
solution = "B";
}
true
false
et
false
on ne rentre pas ici
on rentre ici
Correction des exercices
Live coding
14
Opérateurs de Comparaison,
Opérateurs Logiques et Conditions
15
COURS
16
Plan du cours
17
1
Structures de
données
en JavaScript
Exemples
console.log(lesBleus); // undefined
var vainqueur = null; // null
var nombreDeJoueurs = 11; // Number
var message = 'On est les champions !'; // String
var konexioIsCool = true; // Boolean
18
Rappels - Types de données (Primitives)
Comment définir des modèles de données complexes en JavaScript?
En JavaScript on peut utiliser les tableaux et les objets.
19
Structures de données en JavaScript
20
2
Les tableaux
Définition
Dans les mots de tous les jours
Un tableau c’est comme un classeur :
Les tableaux (arrays) servent à représenter une liste de valeurs de n’importe quel type de données : chaînes de caractères, nombres, booléens, tableaux ou objets.
21
Les tableaux - définition
var numbers = [ 1 , 2 , 3 ] ;
22
Les tableaux - syntaxe
1er élément
indice 0
virgule
2ème élément
indice 1
crochet ouvrant
crochet fermant
Exemples
var players = ['Modric', 'Ronaldo', 'Salah'];
Liste des 3 meilleurs joueurs de la Coupe du Monde
var groceries = ['pain', 'Nutella', 'jus'];
Liste de courses pour un super goûter
23
Les tableaux - exemples
Déclaration d’un tableau (array)
Ou créer un tableau qui contient déjà des données
Les éléments d’un tableau sont écrits entre crochets et sont séparés par des virgules.
var elements = ['hello', 'world'];
On peut créer un tableau vide et y ajouter des valeurs plus tard...
var arr = [];
24
Les tableaux - déclaration
Caractéristiques
Les tableaux sont ordonnés, l’ordre de leurs éléments est conservé et ils sont indexés à zéro : le premier élément a l’indice 0.
L’indice c’est l’adresse / la position de l'élément dans le tableau.
var players = ['Modric', 'Ronaldo', 'Salah'];
25
Les tableaux - caractéristiques
1er élément
2ème élément
3ème élément
0
1
2
indice
Caractéristiques
Les tableaux peuvent contenir des types de données mixtes et même des données non uniques.
var arr = ['hello', true, 4, [1, 2]];
Exemple
Un tableau qui contient des types de données différents.
var arr2 = [4, 4, 6];
Exemple
Un tableau qui contient des données non uniques.
26
Les tableaux - caractéristiques
Accéder à un élément d’un tableau
On accède à un élément d’un tableau par son indice.
elements[0];
Avec le tableau ci-dessous,
var elements = ['hello', 'world'];
on accède au premier élément “hello” comme ceci :
27
Les tableaux - accéder à un élément
Longueur d’un tableau
La longueur d’un tableau (en anglais length), c’est le nombre d’éléments qu’il contient.
var elements = ['hello', 'world'];
Pour obtenir la longueur d’un tableau on écrit :
elements.length;
ou
[1, 2, 3].length;
28
Les tableaux - propriétés et méthodes
2
3
Ajouter des éléments à la fin d’un tableau
On utilise la méthode push pour ajouter un ou plusieurs éléments à la fin d’un tableau.
var arr = [1, 2, 3];
Quand on l’appelle la méthode retourne la longueur du nouveau tableau :
arr.push(4, 5, 6); // 6
console.log(arr); // [1,2,3,4,5,6]
29
Les tableaux - propriétés et méthodes
Retirer le dernier élément d’un tableau
On utilise la méthode pop pour retirer le dernier élément d’un tableau.
var arr = [1, 2, 3];
Quand on l’appelle la méthode retourne l’élément supprimé
arr.pop(); // 3
console.log(arr); // [1,2]
30
Les tableaux - propriétés et méthodes
Méthodes courantes sur les arrays:
31
Les tableaux - méthodes notables
Exercices
Introduction au JavaScript
32
ARRAYS MEMO
var colors = ['blue', 'yellow'];
colors[1]; // OUTPUT: yellow
colors[1] = 'red';
console.log(colors);
// OUTPUT: ["blue", "red"]
33
3
Les objets
Définition - Objets
Les objets (objects en anglais) servent à représenter des données complexes sous la forme d’un ensemble de propriétés.
On les utilise pour décrire des choses que les types de données primitifs (String, Number, Boolean…) ne suffisent pas à décrire.
Les objets peuvent décrire absolument n’importe quelle chose de la vie réelle… si on les modélise bien.
34
Les objets - définition
Exemple - Modèle de données
Jane
nom: DOE
prénom: Jane
age: 32
genre: Femme
taille: 175
Personne
35
Les objets - définition
Définition - Propriétés
Si on veut décrire une chose, on fait la liste des caractéristiques qui la définissent.
Ces caractéristiques doivent représenter le groupe auquel la chose décrite appartient.
Exemple
Un humain peut avoir un chien comme animal de compagnie MAIS cela ne décrit pas clairement ce qu’est un humain et cela ne définit pas tous les humains.
36
Les objets - définition
Définition - Propriétés
Film
Les caractéristiques, qui servent à décrire une chose sont appelées les propriétés d’un objet.
Personne
Voiture
Exemples
37
Les objets - définition
Définition - Propriétés
“Ford”
“Mustang”
“rouge”
5
1967
marque
modèle
couleur
portes
année
string
string
string
number
number
Voiture
clés/propriétés
valeurs
Les propriétés (ou clés) ont des valeurs.
On appelle ça un couple clé : valeur
38
Les objets - définition
Définition
Exemple
Un objet c’est donc un ensemble de clés auxquelles on a donné des valeurs, pour représenter un modèle de données (une chose) sophistiquée (complexe).
var movie = {
title: 'The Lion King',
year: 2019,
duration: 118,
cast: [{ character: 'Pumba', actor: 'Seth Rogen' }],
genres: ['Drama']
};
39
Les objets - définition
Exemple
var player1 = {
firstName: 'Thiago',
lastName: 'Emiliano da Silva',
yearOfBirth: 1984,
teams: ['PSG', 'Brazil National Team']
};
var player2 = {
firstName: 'Alex',
lastName: 'Morgan',
yearOfBirth: 1989,
teams: ['OL', 'USA National Team']
};
40
Les objets - définition
var myBook = {
title : 'Salem' ,
author : 'Stephen King' ,
} ;
41
Les objets - syntaxe
valeur
accolade ouvrante
clé
deux points
virgule
accolade fermante
Déclaration d’un objet (object)
Ou créer un objet qui contient déjà des données
Les clés/propriétés d’un objet sont écrites entre accolades et sont séparées par des virgules.
var cat = { name: 'Kitty', age: 12,};
On peut créer un objet vide et y ajouter des clés/valeurs plus tard...
var obj = {};
42
Les objets - déclaration
Déclaration d’un objet (object)
Par défaut une propriété qui n’a pas de valeur, c'est à dire qu'elle n'a pas été définie… est undefined.
et que j'essaie d'afficher dans la console une des propriétés...
console.log(obj.title); // undefined
Si je crée un objet sans propriété...
var obj = {};
43
Les objets - déclaration
Ajout de propriétés
var movie = {};
movie.title = 'Wonderland';
// { title: "Wonderland" }
44
Les objets - ajout de propriétés
valeur
clé
point
signe égal
nom de l’objet
Ajout de propriétés
movie['year'] = 2019;
// { title: "Wonderland", year: 2019 }
45
Les objets - ajout de propriétés
valeur
clé
crochet ouvrant
nom de l’objet
guillemet
crochet fermant
signe égal
Ajout de propriétés
var property = 'language';
movie[property] = 'English';
// { title: "Wonderland", year: 2019, language: "English" }
46
Les objets - ajout de propriétés
valeur
variable contenant la clé
crochet ouvrant
nom de l’objet
crochet fermant
signe
égal
Pour accéder à la valeur d’une propriété d’un objet:
var myBook = { title: 'Salem', author: 'Stephen King'};
console.log(myBook.author); // "Stephen King"
console.log(myBook['title']); // "Salem"
47
Les objets - accéder à la valeur d'une propriété
Pour accéder à la valeur d’une propriété d’un objet:
var myBook = { title: 'Salem', author: 'Stephen King'};
var property = 'title';
console.log(myBook[property]); // "Salem"
48
Les objets - accéder à la valeur d'une propriété
Exemple avancé notation crochets avec variable
var options = ['FR', 'US', 'ES'];
var selected = 'FR'; // le choix de l’utilisateur est dans selected;
var data = {
FR: { name: 'France', greeting: 'Bonjour !' },
US: { name: 'United States', greeting: 'Hello !' },
ES: { name: 'España', greetin: '¡ Ola !' },
};
console.log(data[selected].name); // nom du pays choisi
49
Les objets - accéder à la valeur d'une propriété
Rappel: les propriétés qui n’ont pas de valeur/auxquelles on n’a pas attribué de valeur sont non-définies… en JS elles ont donc le type undefined
Si on essaye d'accéder à la propriété “year”
var myBook = { title: 'Salem', author: 'Stephen King'};
console.log(myBook.year); // undefined
50
Les objets - accéder à la valeur d'une propriété
Caractéristiques
var myBook = {
title: 'Salem',
author: 'Stephen King',
};
Object.keys(myBook); // ['title', 'author'];
Exemple
Les clés d’un objet sont souvent de type String.
Les clés d’un objet sont accessibles via la fonction Object.keys(obj) qui retourne un tableau de clés.
51
Les objets - caractéristiques
Caractéristiques
Les tableaux et les objets sont copiés par leur référence… alors que les primitives sont copiés par leur valeur.
var a = { x: 0 };
var b = a;
b.x = 1;
console.log('a ',a); // a {x: 1}
console.log('b ',b); // b {x: 1}
Exemple avec les objets
L’objet a pointe vers l’objet b, quand on modifie b, l’objet a est modifié aussi, ils pointent vers la même référence.
52
Les objets - caractéristiques
Caractéristiques
var a = 2;
var b = a;
b = b+ 3;
console.log('a ',a); // a 2
console.log('b ',b); // b 5
Exemple avec les primitives (types de données basique)
On a copié la valeur de a dans b, mais les deux variables ne sont pas liées, si on change la valeur de b, a n’est pas changé
53
Les objets - caractéristiques
Définition - Méthodes
Les méthodes sont un peu comme des fonctions, MAIS elles sont liées à un objet. Elles permettent de faire des opérations sur cet objet.
On les a déjà rencontrées et utilisées plusieurs fois…
avec les strings, les tableaux et maintenant avec les objets...
C’est parce qu’en JavaScript “tout est un objet…”
54
Les objets - méthodes
var person = {
name : 'Simon' ,
sayHello : function() {
console.log('Hello');
},
} ;
55
Les objets - méthodes - syntaxe
méthode
accolade ouvrante
nom de la méthode
deux points
accolade fermante
paire
clé/valeur
virgule
Définir une méthode - déclaration de l’objet
Exemple
var myBook = {
title: 'Salem',
author: 'Stephen King',
logType: function() {
console.log('This is a book');
},
};
myBook.logType(); // "This is a book”
Une méthode s’écrit comme une propriété d’un objet, sauf que la valeur de cette propriété est une fonction.
56
Les objets - définir une méthode
Définir une méthode - ajout de propriété
Exemple
var myCar = {
brand: 'Ford',
make: 'Mustang',
};
myCar.drive = function() {
console.log(' Vroom ');
};
On peut ajouter une méthode après la déclaration de l’objet, comme on l’a fait avec les propriétés.
57
Les objets - définir une méthode
Appeler une méthode
Exemple
var human = {
name: 'Yveline',
sayHi: function() {
console.log('Hi !');
},
};
human.sayHi() // "Hi !”
Une méthode est une propriété d’un objet, on y accède avec un point/des cochets et puisque c’est une fonction, on l’appelle avec les parenthèses.
58
Les objets - définir une méthode
Rappel méthode push sur les tableaux
Exemple
var list = [];
list.push(1);
list.push(2);
console.log(list); // [1,2]
Certaines méthodes peuvent prendre des arguments, souvenez-vous la méthode sur les tableaux...
59
Les objets - définir une méthode
Exercices
Introduction au JavaScript
60
OBJECTS MEMO
var computer = {
brand: 'Apple',
color: 'grey'
};
computer.price = 2000;
console.log(computer);
// OUTPUT: {
// brand: 'Apple',
// color: 'grey',
// price: 2000
// };
Récapitulatif
61
var arr = ['hello', true, 4, [1, 2], { age: 31 }];
var myBook = {
title: 'salem ',
author: 'Stephen King',
};
Récapitulatif
62
myBook.title; // “salem ” => GET
myBook.title = 'Salem'; // => SET
myBook.title; // “Salem” => GET
63
ANNEXES
Astuces
Dans un éditeur de code si vous écrivez le nom d’un objet suivi d’un point, l'éditeur vous indiquera les propriétés et les méthodes disponibles sur cet objet ainsi qu’une documentation pour les méthodes.
64
Les objets - documentation des méthodes
Regardez ces liens
Programmation Orientée Objet: https://openclassrooms.com/fr/courses/2984401-apprenez-a-coder-avec-javascript/3196346-trop-classe-la-poo
65
Pour aller plus loin
Ajouter des éléments au début d’un tableau
On utilise la méthode unshift pour ajouter un ou plusieurs éléments au début d’un tableau.
var arr = [1, 2, 3];
Quand on l’appelle la méthode retourne la longueur du nouveau tableau
arr.unshift(0); // 4
console.log(arr); // [0,1,2,3]
66
Les tableaux - propriétés et méthodes
Retirer le 1er élément d’un tableau
On utilise la méthode shift pour retirer le premier élément d’un tableau, celui à l’indice 0.
var arr = [1, 2, 3];
Quand on l’appelle la méthode retourne l’élément supprimé
arr.shift(); // 1
console.log(arr); // [2,3]
67
Les tableaux - propriétés et méthodes
Quand utiliser la “notation crochets” ?
Si le nom de la clé contient des caractères spéciaux
var obj = {};
obj['first-property'] = 1;
obj['second#property'] = 2;
68
Les objets - ajout de propriétés