JavaScript

Algorithmique

Algorithmique

Exemples de contextes où on trouve des suites d'instructions?

Un algorithme est une suite finie et non ambiguë d’opérations ou d'instructions permettant de résoudre un problème ou d'obtenir un résultat.

Variables

Définition

Outils logique permettant de manipuler une valeur dans un algorithme.

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.

Fonctions

Définition

Une fonction est une suite finie et non ambiguë d’opérations ou d'instructions permettant de résoudre un problème ou d'obtenir un résultat.

  • Une algorithme peut être composé d'autres algorithmes
  • L'algorithme principal devient le "programme"
  • Les sous-algorithme deviennent des "fonctions"

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" ?

Conditions

Définition

La condition permet d'exécuter ou non une partie du traitement en fonction d'une comparaison logique.

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 / Sorties

Contexte

Un programme informatique peut recevoir une ou plusieurs entrées, et produire une ou plusieurs sorties.

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

Boucles

Définition

Une boucle est une structure algorithmique qui permet d'exécuter de manière répétée une même suite d'instructions.

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 1

Ecrire un algorithme pour afficher les nombres de 2 à 8 en console
Faire l'exercice en ligne

Exercice 2


                    for (var compteur = 8; compteur >= 2; compteur--) {
                        console.log(compteur);
                    }
                
Qu'est ce qui sera affiché en console ?

Exercice 3

Ecrire une fonction qui retourne la somme des n premiers nombres entiers (1 + 2 + 3 + 4 + … + n).
n est un nombre, et est un pramètre d'entrée.
Appeler de la fonction avec les valeurs 0, 10, 100, 10000. Afficher le résultat en console.
Faire l'exercice en ligne

Exercice 4

Combien faut-il de nombres pour que la somme 1 + 2 + 3 + 4 + … soit suppérieur à 10 ?
Faire l'exercice en ligne

Exercice 5

Combien faut-il de nombres pour que la somme 1 + 2 + 3 + 4 + … soit suppérieur à 10000 ?
Faire l'exercice en ligne

Exercice 6

Ecrire une fonction "repeter" qui retourne une chaîne de caractère contenant "x" fois le charactère "char".
"x" et "char" sont des paramètres d'entrée.
"x" est un nombre.
"char" est une chaîne de caractère contenant un seul caractère.
Faire l'exercice en ligne

Exercice 7

Ecrire une fonction "pyramide" qui affiche le résultat de la fonction "repeter" pour "x" entre 0 et "n".
"x" est le paramètre d'entrée de la fonction "repeter".
"n" est le paramètre d'entrée de la fonction à écrire.
Faire l'exercice en ligne

Booléen

Définition

Un booléean est une variable qui peut être soit vrai, soit fausse.

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
                

Tableaux

Définition

Une tableau est une variable structurée qui contient une liste de valeurs.

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

Types de données

  • Chaîne de caractères (String)
  • Nombre (Number)
  • Boolean (Bool)
  • null
  • Tableau (Array)

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" ?

Exercice 3

Ecrire un algorithme qui demande à l'utilisateur ses 3 artistes préférés (1 demande à la fois), les stocke dans un tableau, puis affiche le tableau.
Faire l'exercice en ligne

Exercice 4

Écrire un algorithme qui demande à l'utilisateur ses 3 artistes préférés en une seule fois, sépararés par des virgules. Afficher en console le tableau contenant les 3 artistes.

Aidez-vous de la documentation String.split() et de l'exemple suivant :

                    var chaine = "1-2-3-4-56";
                    var tab = chaine.split('-'); // [1, 2, 3, 4, 56]

Faire l'exercice en ligne

Exercice 5 - Boss final

Créer un tableau contenant toutes les cartes d'un jeu de 54 carte.
Avoir 2 'Joker', et pour chaque couleur (♥, ♦, ♣, ♠) avoir chaque carte ('As', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'Valet', 'Dame', 'Roi')
Tirer une carte au hazard et l'afficher en console. Ex de résultat : 'As de ♣'.

La fonction Math.random() permet d'obtenir un nombre pseudo-aléatoire en 0 et 1.
Math.floor(Math.random() * 54) permet d'obtenir un nombre pseudo-aléatoire entre 0 et 53
Faire l'exercice en ligne

Objets

Définition

  • Un objet est une variable structurée qui contient des méthodes et des propriétés.
  • Une propriété est une variable rattachée à l'objet.
  • Une méthode est un fonction dans le contexte de l'objet.
  • Le contexte est l'ensemble des fonctions et variables accessibles dans un algorithme.
  • Pour un objet, le contexte est l'ensemble des méthodes et propriétés de l'objet, plus le contexte de l'algorithme où il est utilisé.

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

This

Dans le contexte d'un objet, le mot clé "this" permet d'accéder aux méthodes et propriétés de cet objet

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

Types de données

  • Chaîne de caractères (String)
  • Nombre (Number)
  • Boolean (Bool)
  • null
  • Tableau (Object)
  • Objet (Object)

Evaluation

Un exercice pour chaque partie. Cf. grille d'évaluation