JavaScript

Algorithmique

Variables

Caractérisée par un nom

var compteur;

Syntaxe Javascript :

```
var
```
pour déclarer une variable
```
;
```
(optionnel) pour terminer une instruction

Caractérisée par un type de données

// type Number
var compteur = 10;
// type String
var libelle = 'Nombre de slides restantes';
// absence de valeur
var YaRienIci = null;

Syntaxe Javascript :

Opérateur
```
=
```
pour valoriser ou affecter une variable
```
10
```
un nombre seul vaut sa valeur.
```
'texte'
```
les "single quotes" ouvrent et ferment une chaîne de caractère.

Exercice 1

var x = 9;
var y = 2;
var somme = x + y;

Quelle sera la valeur de "somme" ?

Exercice 2

var debutQuestion = 'Quelle est la valeur de ';
var variable = 'somme';
var pointDInterrogation = ' ?';
var question = debutQuestion + variable + pointDInterrogation;

Quelle sera la valeur de "question" ?

Exercice 3

var a = '32';
var b = '10';
var c = a + b;

Quelle sera la valeur de "c" ?

Exercice Piège

var a = 32;
var b = '10';
var c = a + b;

Quelle sera la valeur de "c" ?

Algorithmiquement c'est une erreur d'écriture.
En JavaScript la valeur sera '3210'.
=> Conversion automatique du String en Number.

Exercice 4

var a = 32;
var b = 10;
var c = a * b;

Quelle sera la valeur de "c" ?

Exercice Piège 2

var a = 32;
var b = '10';
var c = a * b;

Quelle sera la valeur de "c" ?

Algorithmiquement c'est une erreur d'écriture.
En JavaScript la valeur sera 320.
=> Conversion automatique du Number en String.

Exemple d'utilisation

// cet algorithme met un nombre au carré, puis ajoute 3 au total.
var unNombre = 2;
unNombre = auCarre(unNombre);
var resultat = additionne(unNombre, 3);

Syntaxe Javascript :

```
nomDeLaFonction()
```
pour appeler une fonction
```
nomDeLaFonction(variable1, variable2)
```
pour donner une ou des valeurs en entrée à la fonction
Comme en maths : y = f(x)

Caractérisée par un nom

function neRienFaire() {
    // instructions ici, mais là il n'y en a pas :'(
}

Syntaxe Javascript :

```
function
```
pour déclarer une function
```
()
```
pour déclarer les paramètres
```
{}
```
pour déclarer les instructions (Corps de la fonction)

Caractérisées par des paramètres

function retourne42(){
   return 42;
}
function auCarre(unNombre){
   return unNombre * unNombre;
}
function additionne(a, b){
   return a + b;
}

Syntaxe Javascript :

```
,
```
pour séparer les paramètres d'entrées
```
return
```
pour renvoyer le résultat de la fonction

Exemple complet

function auCarre(unNombre){
   return unNombre * unNombre;
}
function additionne(a, b){
   return a + b;
}
var unNombre = 2;
unNombre = auCarre(unNombre);
var resultat = additionne(unNombre, 3);

Exercice 1

var resultat = aireDuCercle(12);

Écrivez la fonction "aireDuCercle".
L'aire d'un cercle est le nombre PI (qu'on arrondira à 3.1415) multiplié par le rayon au carré.

Exercice 2

var corpsDeLaQuestion = "la capitale de la France";
var resultat = interroger(corpsDeLaQuestion);

Écrivez la fonction "interroger" tel que la fonction retourne

"Quelle est [corps de la question] ?"

.

Exercice piège

// En reprenant les fonctions des exercices 1 et 2
var resultat = interroger("l'aire d'un cercle de rayon 1") + aireDuCercle(1);

Que sera la valeur de "resultat" ?

Exercice 3

function auCarre(unNombre){
    return unNombre * unNombre;
}
var resultat = auCarre(auCarre(2));

Que sera la valeur de "resultat" ?

Exercice 4

function auCarre(unNombre){
    return unNombre * unNombre;
}
var resultat = auCarre(auCarre(2));

Que sera la valeur de "resultat" ?

Si

var unNombre = 40;
var resultat = 'Je compare un nombre à 42';
if (unNombre < 42) {
    resultat = 'Le nombre est plus petit que 42';
}

Syntaxe Javascript :

```
if
```
"Si" pour déclarer un traitement conditionnel (la condition est respecté)
```
{}
```
pour déclarer la liste d'instructions conditionnées

Sinon

var unNombre = 40;
var resultat;
if (unNombre < 42) {
    resultat = 'Le nombre est plus petit que 42';
} else {
    resultat = 'Le nombre est plus grand ou égale à 42';
}

Syntaxe Javascript :

```
else
```
"Sinon" pour déclarer un traitement conditionnel inverse (la condition n'est pas respecté)

SinonSi

var unNombre = 40;
var resultat;
if (unNombre < 42) {
    resultat = 'Le nombre est plus petit que 42';
} else if (unNombre > 42) {
    resultat = 'Le nombre est plus grand à 42';
} else {
    resultat = 'Le nombre est égal à 42';
}

Syntaxe Javascript :

```
else if
```
"Sinonsi" pour déclarer un traitement conditionnel

Opérateurs

var a = 1;
var b = 2;
if (a < b) { /* si a est plus petit que b */ }
if (a > b) { /* si a est plus grand que b */ }
if (a <= b) { /* si a est plus petit ou égal à b */ }
if (a >= b) { /* si a est plus grand ou égal à b */ }
if (a == b) { /* si a est égal à b */ }
if (a === b) { /* si a est strictement égal à b */ }
if (a != b) { /* si a est différent de b */ }
if (a !== b) { /* si a est strictement différent de b */ }

Opérateurs strictement en JavaScript

if (1   == '1' ) { /*  vrai */ }
if (1   === '1') { /*  FAUX */ }
if (1   === 1  ) { /*  vrai */ }
if ('1' === '1') { /*  vrai */ }

if (1   != '1' ) { /*  faux */ }
if (1   !== '1') { /*  vrai */ }
if (1   !== 1  ) { /*  faux */ }
if ('1' !== '1') { /*  faux */ }

La comparaison avec la triple égalité (=== ou !==) vérifie la valeur ET le type.
La comparaison simple (== ou !=) va tenter de convertir l'une des variable pour les comparer. Imprévisible.

Exercice 1

function nameMe(nombre1, nombre2) {
    if (nombre1 < nombre2) {
        return nombre1;
    } else {
        return nombre2;
    }
}

Proposez un nom pour la fonction "nameMe" qui décrive ce qu'elle fait.

Exercice 2

function plusGrand(nombre1, nombre2) {
    if (nombre1 ??? nombre2) {
        return nombre1;
    }
    return nombre2;
}

Quels sont les 2 opérateurs possible pour remplacer "???" de telle sorte que "plusGrand" retourne le plus grand des 2 nombres ?

Astuce : une fonction est immédiatement interrompue lorsqu'une instruction "return" est atteinte.

Exercice 3

function estPositif(unNombre) {
    // ?
}

Ecrire la fonction "estPositif" tel que la fonction retourne 'vrai', 'faux' ou 'zéro' selon que unNombre soit positif, négatif ou 0.

Entrées

Il peut y avoir des entrées initiales : les paramètres du programme.

Il peut y avoir plusieurs entrées en cours d'exécutions (ex: saisie d'une valeur au clavier, clic souris).

// demande à l'utilisateur de saisir une valeur
var nom = prompt("Quel est votre nom ?");

Sorties

Il peut y avoir une sortie finale.

Il peut y avoir plusieurs sorties en cours d'exécutions (ex: affichage à l'écran d'une valeur).

// affiche une valeur dans la console.
console.log(nom);

La console est un outils d'interaction, très utilisé pendant les phases de programmation.

Le point

a une signification qu'on verra ultérieurement, considérer l'ensemble comme une fonction nommée

console.log

.

Fonction

Une fonction est un sous programme qui se comporte de la même façon qu'une programme.

// entrée initiale : le titre
function lireEtAfficherUnNom(titre) {
    var nom = prompt("Quel est votre nom ?"); // entrée en cours d'exécution
    var resultat = titre + ' ' + nom;
    console.log(resultat); // sortie en cours d'exécution
    console.log('Et voilà une autre sortie !'); // 2eme sortie en cours d'exécution
    return resultat; // sortie finale
}

Tester le code

Tant que

var compteur = 0;
var somme = 0;
while (compteur < 5) {
    compteur = compteur + 1;
    somme = somme + compteur;
}

Syntaxe Javascript :

```
while
```
"Tant que" pour déclarer un traitement qui doit s'exécuter en boucle, tant que la condition n'est pas rencontrée.
```
{}
```
Déclare la liste d'instruction à exécuter en boucle

Pour

var somme = 0;
for (var compteur = 0; compteur < 5; compteur++) {
    somme = somme + compteur;
}

Syntaxe Javascript :

```
for
```
La boucle "for" permet d'exécuter un nombre déterminé d'itérations.
```
var compteur = 0; compteur < 5; compteur++
```
Initialise une variable, spécifie une condition de fin, specifie une instruction de suite.
```
{}
```
Déclare la liste d'instruction à exécuter en boucle

Exercice 2

for (var compteur = 8; compteur >= 2; compteur--) {
    console.log(compteur);
}

Qu'est ce qui sera affiché en console ?

Exemple

var vrai = true;
var faux = false;

var vraiETvrai = vrai && vrai; // true
var vraiETfaux = vrai && faux; // false
var fauxETvrai = faux && vrai; // false
var fauxETfaux = faux && faux; // false

var vraiOUvrai = vrai || vrai; // true
var vraiOUfaux = vrai || faux; // true
var fauxOUvrai = faux || vrai; // true
var fauxOUfaux = faux || faux; // false

var reponse = 42;
var test1 = reponse > 0;
var test2 = reponse < 10;
var test1et2 = test1 && test2; // opérateur ET logique

Inversion

var cestPasFaux = !false; // true
var cestPasVrai = !true; // false

Exemple

var tableauDeChaines = ['l', 'm', 'n', 'o', 'p']; // déclare un tableau
console.log(tableauDeChaines[0]);

var tableauDEntiers = [0, 1, 2, 3];
console.log(tableauDEntiers[0]);

var tableauMixte = [2, 'b', tableauDeChaines];
console.log(tableauMixte[2][0]);

var tableauDeCaracteres = 'Et oui une chaine de caractère se comporte parfois comme un tableau !';
console.log(tableauDeCaracteres[tableauDeCaracteres.length - 1]);
// ça veut dire que var ['l', 'm', 'n', 'o', 'p'] === 'lmnop' ? Presque…

Attention ! Le premier élément est position à l'indice 0 du tableau.

Tester le code

Manipuler un tableau

// création
var tab = [];
// ajouter un élément
tab.push('un élément');
tab.push('un autre élément', 'et encore un autre');
// lire un élément par son indice
console.log(tab[1]); // affiche le 2eme élément du tableau
// modifier un élément du tableau
tab[1] = 'nouvelle valeur';
// connaitre la longueur
console.log('Ce tableaux contient ' + tab.length + ' éléments.');
// supprimer un élément
tab.splice(0, 1); // supprime 1 élément à partir de l'indice 0
console.log(tab[1]); // le 2eme élément du tableau n'est plus le même
console.log(tab); // affiche le tableau en entier

Tester le code

Exercice 1

var tab = [1, 2, 3, 4, 5];
for (var indice = 0; indice < tab.length; indice++) {
    console.log(tab[indice]);
}

Qu'est ce qui sera affiché en console ?

Exercice 1b

var tab1 = [1, 2, 3];
var tab2 = ['a', 'b', 'c'];
var resultat = [];
for (var iTab1 = 0; iTab1 < tab.length; iTab1++) {
    for (var iTab2 = 0; iTab2 < tab2.length; iTab2++) {
        resultat.push(tab2[iTab2] + String(tab[iTab1]))
    }
}

Quelle sera la valeur de resultat ?

Exercice 2

function plusQue7(tab) {
    var indice = 0;
    while(tab[indice] <= 7 && indice < tab.length)
        indice++;
    }
    if (indice >= tab.length) {
        return -1;
    }
    // else {
        return indice;
    // }
}
var resultat = plusQue7([1, 5, 12, 6, 7]);

Quelle sera la valeur de "resultat" ?

Exemple - Context

var presentation = 'Je suis ';
// objet anonyme, on le créée en ouvrant un accolade à l'emplacement d'une valeur
// (ex: ici à droite d'une affectation).
var unProfesseur = {
    // propriété "nom"
    nom: 'Samuel Bouchet',
    // méthode "seNommer"
    seNommer: function() {
        // "presentation" ne fait pas partie de l'objet mais est visible dans le contexte
        // "nom" fait partie de l'objet, on y accède avec le mot clé "this"
        return presentation + this.nom
    }
};
console.log(unProfesseur.seNommer());

Tester le code

Exemple - Objet anonyme

// objet qui regroupe une chaîne de caractère, un nombre, un tableau, des méthodes.
var unProfesseur = {
    nom: 'Samuel Bouchet',
    age: 30,
    matieres: ['Algorithmique', 'Jeu Vidéo'],
    passerUneAnnee: function() {
        this.age ++;;
    },
    construireDescription: function() {
        return this.nom + ' a ' + this.age + ' ans' +
        ' et enseigne : ' + this.matieres.join(', ');
    }
};
console.log(unProfesseur.construireDescription());
unProfesseur.passerUneAnnee();
console.log(unProfesseur.construireDescription());

Tester le code

Exercice 1

var magicien = {
    mana: 10,
    lancerUnSort(coutDuSort) {
        this.mana = this.mana - coutDuSort;
    }
}

magicien.lancerUnSort(4);
console.log(magicien.mana);
magicien.lancerUnSort(8);
console.log(magicien.mana);

Qu'est ce qui sera affiché en console ?

Exercice 2

var magicien = {
    mana: 10,
    // retourne vrai si le sort a été lancé, sinon false
    lancerUnSort(coutDuSort) {
        this.mana = this.mana - coutDuSort;
        return true;
    }
}

var sortOk = magicien.lancerUnSort(4);
console.log(sortOk); // doit être "true"
console.log(magicien.mana); // doit valoir 6
sortOk = magicien.lancerUnSort(8);
console.log(sortOk); // doit être "false"
console.log(magicien.mana); // doit valoir 6

Modifier le code pour que le magicien ne puisse lancer le sort que s'il a assez de mana.

Faire l'exercice en ligne

Exercice 3

var magicien = {
    mana: 10,
    lancerUnSort(sort) {
        this.mana = this.mana - sort.coutEnMana;
    }
}
var teleportation = {} // compléter à l'intérieur des {}
var soin = {} // compléter à l'intérieur des {}

magicien.lancerUnSort(teleportation);
magicien.lancerUnSort(soin);
console.log(magicien.mana);

Compléter les objets teleportation et soin pour qu'ils puissent être lancés par le magicien.

Faire l'exercice en ligne

Classes

class LanceurDeSort {
    constructor(manaInitial) {
        this.mana = manaInitial;
    }
    lancerUnSort(coutEnMana) {
        this.mana = this.mana - coutEnMana;
    }
}
var magicien = new LanceurDeSort(8); // nouvelle instance de la classe
magicien.lancerUnSort(1);

Une classe est un moule à objets, qui permet de créer des objets ayant la même forme (mêmes propriétés, mêmes méthodes).
La classe d'une objet est appelée son "type".
L'objet créé à partir d'une classe est appelé "instance" de cette classe.
Le constructeur permet d'initialiser les valeurs d'une instance.

Classes

class LanceurDeSort {
    constructor(manaInitial) {
        this.mana = manaInitial;
    }
    lancerUnSort(coutEnMana) {
        this.mana = this.mana - coutEnMana;
    }
}
var magicien = new LanceurDeSort(8); // new NomDeLaClass(param1, params2)
console.log(typeof(magicien)); // object
console.log(magicien instanceof LanceurDeSort); // vrai
console.log(magicien instanceof String); // faux

mot clé "new" permet de créer une nouvelle instance.
typeof permet de connaitre le type d'un objet
instanceof permet de vérifier si un objet est d'un type particulier

Tester en ligne

Exercice 4

class LanceurDeSort {
  constructor(manaInitial) {
    this.mana = manaInitial;
  }
  lancerUnSort(sort) {
    sort.lancer();
    this.mana = this.mana - sort.coutEnMana;
  }
}
var teleportation = new Sortilege(3);
var soin = new Sortilege(2);
var magicien = new LanceurDeSort(10);
magicien.lancerUnSort(teleportation);
magicien.lancerUnSort(soin);

Créer la classe Sortilege tel que la classe ait une propriété "coutEnMana" et une méthode "lancer" qui affiche un texte en console.

Faire l'exercice en ligne