PROGRAMME CODE
DIGISTART JS
2
Déroulé de la séance
Questions et Récap du cours précédent (5 mins)
Cours (15 mins x 3)
Exercices (20 mins x 3)
Révisions (10 minutes)
var message = 'On est les champions !!!' ;
3
Rappel: Variables - syntaxe
mot clé var
valeur
nom de variable
signe égal
point virgule
Introduction à JavaScript
4
QUIZ
Comment lier un fichier JS
à un fichier HTML ?
Introduction à JavaScript
5
QUIZ
Comment lier un fichier JS
à un fichier HTML ?
<script src="leCheminDeMonFichier">
Introduction à JavaScript
6
QUIZ
Dans quelle balise HTML allons-nous mettre la balise
<script> ?
Introduction à JavaScript
7
QUIZ
Dans quelle balise HTML allons-nous mettre la balise
<script> ?
<html>
<head>
<title>Konexio</title>
<script src="./main.js">
</script>
</head>
</html>
Introduction à JavaScript
8
QUIZ
Que fait-on ici ?
var myAge;
myAge = 26;
myAge = 27;
var myAge; // déclaration
myAge = 26; // assignation
myAge = 27; // réassignation
Introduction à JavaScript
9
QUIZ
Que fait-on ici ?
var myAge;
myAge = 26;
myAge = 27;
Correction des exercices
Live coding
10
Introduction à JavaScript
11
COURS
12
Plan du cours
13
1
Types de données
Définition
Les types de données en JavaScript, servent à décrire/représenter les types d'informations (qu'on stocke dans des variables).
Chaque type de données a des opérations et des comportements qui leurs sont propres.
Cela permet de les manipuler et de faire des opérations avec.
14
Types de données en JavaScript - définition
Définition
En clair on peut utiliser JavaScript pour décrire des concepts de la vie courante en code…
Par exemple:
15
Types de données en JavaScript - définition
Définition
Le type de données permet à l'ordinateur, qui interprète le code de savoir quoi faire avec ce code.
var x = 42 + "bonjour" ;
16
Types de données en JavaScript - définition
Les types dont on va parler:
On ne parlera pas du type Object qui sera utilisé plus tard dans le cours de Structures de Données.
17
Types de données en JavaScript - définition
Exemples
console.log(lesBleus); // undefined (Reference Error)
var vainqueur = null; // null
var nombreDeJoueurs = 11; // Number
var message = 'On est les champions !!!'; // String
var konexioIsCool = true; // Boolean
18
Types de données en JavaScript - exemples
undefined
undefined est le type d'une variable non définie, ou qui n'a pas de valeur définie.
var message; // undefined
var coucou = undefined;
19
Types de données en JavaScript - undefined
null
null est le type d'une variable de valeur nulle. Par exemple, au début d'un jeu il n'y a pas de vainqueur, on peut initialiser la variable winner avec null.
Elle est définie, mais n'a pas de valeur pour le moment.
var winner = null;
var name = null;
20
Types de données en JavaScript - null
String
Une string ou chaîne de caractères sert à contenir du texte pour par exemple l'afficher à un utilisateur.
var message = "On est les champions ! " ;
var name = "Simon" ;
21
Types de données en JavaScript - String
Concaténation - caractéristique des String
var greeting = "Bonjour ";
var teacher = "Simon";
greeting + teacher;
// "Bonjour Simon"
"salut " + 'les gens'
// "salut les gens"
Concaténer veut dire mettre ensemble pour former un tout, joindre, assembler.
22
Types de données en JavaScript - String
Number
var sum = 2 + 2; // 4
var total = 8 - 1; // 7
var product = 3 * 2; // 6
var power = 2 ** 3; // 8
var divide = 9 / 3; // 3
var modulo = 7 % 2; // 1
var num1 = 30;
var num2 = 12;
num1 + num2 // Outputs: 42
En JavaScript, on peut faire toutes les opérations courantes de mathématiques avec les nombres :
Addition
Soustraction
Multiplication
Puissances
Division
Modulo* (reste de division)
*explication modulo: 7 = 2*3 + 1 donc 7%2 = 1
23
Types de données en JavaScript - Number
Number
On peut aussi incrémenter et décrémenter des variables qui contiennent des nombres.
var i = 1;
i++ // output: 2
// est equivalent a
i = i + 1; // output: 3
i-- // output: 2
// est equivalent
i = i - 1; // output: 1
24
Types de données en JavaScript - Number
incrémenter (ajouter 1)
décrémenter (retirer 1)
Boolean
var konexioIsCool = true;
var learningCodeIsBoring = false;
Les booléens sont des opérateurs logiques qui servent à décrire une chose par un état: vrai (true) ou faux (false).
25
Types de données en JavaScript - Boolean
Boolean - Exemple
Savoir si quelque chose est �vrai ou faux va nous permettre �de mettre des conditions dans �notre code.
Imaginez un jeu où scoreA et scoreB sont les scores du joueur A et du joueur B.
Le scoreA est-il plus grand que scoreB ?
Si oui (si l’affirmation est true), alors A a gagné.�Sinon...
var scoreA = 7;
var scoreB = 8;
26
Types de données en JavaScript - Boolean
typeof
Pour savoir à quel type de données appartient une variable, vous pouvez utiliser l'opérateur typeof.
var message = "coucou";
console.log(typeof message); // "string"
27
Types de données en JavaScript - typeof
console.log('Hello');
var vainqueur = null; // null
var nombreDeJoueurs = 11;
// Number
var message = 'On est les champions !!!'; // String
var konexioIsCool = true;
// Boolean
typeof message; // String
Exercices
Types de données en JavaScript
28
EXERCICE MEMO
29
2
Les fonctions
Définition
Les fonctions sont un concept en JavaScript et dans de nombreux langages de programmation.
Elles servent à écrire du code de manière à pouvoir le réutiliser à plusieurs endroits.
Exemple:
Je dois écrire du code pour afficher dans la console "Hello" suivi du nom de la personne pour chaque personne dans la pièce...
30
Les fonctions - définition
Solution 1 (WET)
Write Everything
Twice
J'écris 4 lignes de code avec chacun des prénoms des personnes dans la pièce...
OU...
console.log("Hello Simon");
console.log("Hello Yveline");
console.log("Hello Dara");
console.log("Hello Guillaume");
31
Les fonctions - exemple simple
Solution 2 (DRY)
Don't Repeat
Yourself
J'écris une fonction qui fait le travail à ma place et je l'appelle pour chacune des personnes ?
function sayHello(name) {
console.log("Hello ", name);
}sayHello("Simon");
sayHello("Yveline");
...
32
Les fonctions - exemple simple
Calculer en utilisant l'identité remarquable (a+b)2 pour les cas suivants 2 et 9, 98 et 2032, 987 et 433.
var result1 = 2*2 + 2*2*9 + 98*98;
var result2 = 98*98 + 2*98*2032 + 2032*2032;
var result3 = 98*987 + 2*987*433 + 433*433;
ou
function sumSquare(a, b) {
return a * a + 2 * a * b + b * b;
}
var result1 = sumSquare(2,9);
33
Les fonctions - exemple complexe
function sayHello ( name ) {
console.log("Hello ", name);
}
34
Les fonctions - déclaration - syntaxe
mot clé function
paramètre
nom de
la fonction
parenthèses
accolades
corps de
la fonction
Appel d'une fonction
Pour exécuter une fonction et obtenir son résultat ou produire son effet, il faut l'appeler. Si cette fonction a des paramètres il faudra l'appeler en lui passant des arguments.
function sayHello(name) {
console.log("Hello ", name);
}
sayHello("Simon");
35
Les fonctions - appel d'une fonction
function sayHello ( name ) {
console.log("Hello ", name);
}
sayHello ( "Simon" );
36
Les fonctions - déclaration et appel - syntaxe
paramètre
nom de
la fonction
Déclaration
Appel
nom de
la fonction
argument
Paramètres d'une fonction
Une fonction peut avoir plusieurs paramètres.
Ils sont séparés par des virgules dans la déclaration de la fonction.
Lorsqu'on appelle la fonction on sépare les arguments par une virgule.
function sumNumbers(a, b) {
return a + b;
}
sumNumbers(1, 2); // 3
37
Les fonctions - paramètres d'une fonction
Mot clé "return"
Le mot clé return sert à retourner le résultat de la fonction pour le rendre disponible à l'extérieur de celle-ci.
return fait sortir de l'exécution de la fonction.
function sumNumbers(a, b) {
return a + b;
console.log("a est ", a, "b est ", b);
}
sumNumbers(1, 2); // 3
38
Les fonctions - mot clé return
Ce morceau de code n'est pas exécuté, on sort de la fonction avant
Mot clé "return"
var total = sumNumbers(2, 3);
console.log(total + 3); // log: 8
function logSumNumber(a, b) {
console.log(a + b);
}
logSumNumber(1, 2); // log: 3
function sumNumbers(a, b) {
return a + b;
}
sumNumbers(1, 2); // 3
39
Les fonctions - mot clé return
cette fonction a un retour
on peut le stocker dans une variable et le ré-utiliser
cette fonction n'a pas de retour, mais elle affiche la somme
function addOne(a) {
return a + 1;
} // déclaration
addOne(3); // appel
// output: 4
Exercices
Les fonctions
40
EXERCICE MEMO
41
3
Propriétés et
méthodes
Définitions
Les valeurs ont des propriétés et des méthodes selon leur type de données.
Les propriétés sont des caractéristiques qui définissent ces valeurs, et les méthodes ce sont des outils (comme des fonctions) qu'on peut utiliser dessus.
Nous verrons tout cela à travers quelques exemples
42
Propriétés et méthodes - propriétés
Accéder à une propriété
Pour accéder à une �propriété d'une valeur, �on peut :
- mettre un point derrière le nom de la variable
- mettre un point directement après la donnée.
var message = "lol";
message.length
43
Propriétés et méthodes - propriétés
Exemple de propriété - String
Une valeur de type String a une propriété length ("longueur"), qui renvoie la longueur de la chaîne de caractères.
var myString = "Hello !";
myString.length; // output: 7
44
clé
valeur
length:
Propriétés et méthodes - propriétés
7
Appeler une méthode
var myString = "HELLO";
myString.toLowerCase();
Pour appeler une �méthode sur une variable,
il faut mettre :
45
Propriétés et méthodes - méthodes
Exemple de méthode - String
Le type de données String a une méthode toLowerCase qui veut dire "vers la casse inférieure" et qui renvoie la chaîne de caractères convertie dans la casse inférieure.
var myString = "HELLO";
console.log(myString.toLowerCase()); // log: "hello"
46
Propriétés et méthodes - propriétés
var myString = "HELLO";
console.log(myString.length); // affiche 5 dans la console
console.log(myString.toLowerCase()); // affiche "hello" dans la console
Exercices
Les fonctions
47
EXERCICE MEMO
Récapitulatif
48
Récapitulatif
49
50
ANNEXES
Contraintes de nommage
Les noms de variables en JavaScript ne peuvent pas contenir de caractères spéciaux, ni d'espace et doivent toujours démarrer par une lettre.
var 9m%e$$age = "bonjour";
var message = "bonjour";
51
Variables - contraintes de nommage
✓
✘
Conventions - nommage descriptif
Les noms de variables décrivent ce que contient la variable, afin que le code soit plus facile à comprendre.
var cheval = "bonjour";
var message = "bonjour";
52
Variables - conventions
✓
✘
Conventions - camelCase
En JavaScript les noms de variables s'écrivent en camelCase.
C'est une convention d'écriture qui consiste à retirer les espaces entre les mots et mettre en lettre majuscule la première lettre du mot après l'espace. e.g. mon message ⇒ monMessage
var myMessage = "bonjour";
53
Variables - conventions
✓
En JavaScript, on dit que le typage est dynamique.
var maVariable; // undefined
maVariable = "Simon"; // string
maVariable = 7; // number
maVariable = true; // boolean
Cela veut dire qu'une variable est du type de ce qu'elle contient et qu'elle changera de type si on change sa valeur (qu'on la réassigne).
54
Types de données en JavaScript - typage
String - la syntaxe
Une string démarre par un guillemet double ou simple et se termine par un guillemet double ou simple.
var message = "On est les champions ! " ;
ou
var message = 'On est les champions ! ' ;
55
Types de données en JavaScript - String
String - la syntaxe… encore
Si votre string contient des apostrophes ' vous pouvez utiliser les guillemets doubles (double quotes " " )
ou
utiliser des guillemets simples (simple quotes ' ' ) et échapper les apostrophes avec anti-slash "\".
var message = "J'ai regardé le match" ;
ou
var message = 'J\'ai regardé le match' ;
56
Types de données en JavaScript - String
Accéder à un caractère spécifique d'une chaîne de caractères
On peut accéder au caractère d'une chaîne de caractères en accédant à son indice (sa position dans la chaîne).
JavaScript est indexé à zéro c'est à dire qu'on commence à compter à partir de 0.
Le premier élément d'un ensemble a l'indice 0.
On voit ça tout de suite dans un exemple !
57
Types de données en JavaScript - String
Accéder à un caractère spécifique d'une chaîne de caractères
var str = "Bonjour";
"Bonjour"
La variable str avec ses indices:
58
Types de données en JavaScript - String
1
0
2
3
4
5
6
Accéder à un caractère spécifique d'une chaîne de caractères
Pour accéder au premier caractère de la chaîne de caractère, on écrit :
var str = "Bonjour";
str[0]; // output: "B"
ou
"Hello"[2]; // output "l"
59
Types de données en JavaScript - String
Et ça fait quoi str[23]?
Number
On peut aussi raccourcir l'écriture d’une somme récursive.
var j = 0;
j = j + 2;
j+=2;
60
Types de données en JavaScript - Number
ces deux lignes font
la même chose
Boolean - fonction Boolean()
La fonction Boolean() permet d'évaluer une valeur en booléen.
Elle peut être utile lorsqu'on compare des booléens ou pour faire des tests logiques sur des variables de type non booléen.
var data = "";
Boolean(data); // false
61
Types de données en JavaScript - Boolean()
Regardez ces liens
data types:
https://www.w3schools.com/js/js_datatypes.asp
http://eloquentjavascript.net/01_values.html
js conventions:
https://www.w3schools.com/js/js_conventions.asp
62
Pour aller plus loin 1/2
Regardez ces liens (Avancé)
scopes:
https://www.w3schools.com/js/js_scope.asp
hoisting:
https://developer.mozilla.org/fr/docs/Glossaire/Hoisting
closures:
https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures
63
Pour aller plus loin 2/2
64
65
Parallèle machine / fonction
F* DAT SH*T
I'LL BUILD A MACHINE
me
66
Logique
Input/Entrée
Créer une machine pour faire le travail
Mécanisme
Output/Sortie
Paramètre(s)
Retour
Machine à couper le bois
Fonction
67
num1+num2
Utiliser la machine
Une fonction c'est comme une machine, vous la construisez et ensuite il faut s'en servir… sinon ça ne sert à rien
num1, num2
résultat
Machine à calculer
3+4
3, 4
7
Machine à calculer
"You gotta use the machine Larry"
68
Mécanisme
Input/Entrée
Schéma fonction Garbage In Garbage Out
Mécanisme
Output/Sortie
Machine à couper le bois
Machine à couper le bois
69
70