Thibault Liétard.

PhD Student in Computer Science

L3-SEGE - Informatique 3 : Internet : Langages et Programmation - Javascript

D'après un cours de Dominique Gonzalez

Sommaire

Créons un bouton

Javascript est un langage (un "script") qui permet de créer du contenu dynamique dans un site web. Commençon simplement avec un bouton.

Qu'est ce qui se cache derrière ceci ? Voyons un peu :

<input type="button"
    value="Clique si tu oses !"
    id="b1"
    onClick="this.value='Bravo !'" >

On peut faire mieux !

<input type="button"
    value="Survole moi !"
    id="b2"
    onMouseOver="this.value='Ouiii !'"
    onMouseOut="this.value='Oh...'">

Analysons ce qui se passe : nous sommes en train de gérer des événements ! Notez la présence du "this.value=" ; voyons un peu ce que ça donne avec quelques changement :

<input type="button"
    value="Clique moi !"
    id="b3"
    onClick="this.value='Merci !';getElementById('b4').value='À MOI'" >
<input type="button"
    value="Clique moi !"
    id="b4"
    onClick="this.value='Merci !';getElementById('b3').value='À MOI'" >

Exercice

Créez une page web très simple (un modèle ici) dans laquelle vous mettrez 1 titre et 4 boutons tels que :

  • si on clique sur le premier bouton, un message s'affiche dans le deuxième ;
  • si on clique sur le deuxième bouton, un message s'affiche dans le troisième ;
  • si on clique sur le troisième bouton, un message s'affiche dans le quatrième ;
  • si on clique sur le quatrième bouton, un message s'affiche dans le premier ;
  • Lorsque le titre est survolé, le même message s'affiche dans les 4 boutons.

Boîte de dialogue

Un boîte de dialogue est une mini-fenêtre qui s'ouvre pour afficher une information, une aletre, etc.

<input type="button"
    value="Exemple"
    id="b5"
    onClick="alert('Voici une boîte de dialogue');">

Une boîte de dialogue peut également permettre à l'utilisateur de saisir une information.

<input type="button"
    value="Exemple"
    id="b6"
    onClick="this.value='Votre nom est '+prompt('Entrez votre nom');">

Enfin, une boîte de dialogue peut servir à confirmer un choix :

<input type="button"
    value="Cliquez ici..."
    id="b7"
    onClick="this.value='Cliquez ici... (Votre choix : '+confirm('Êtes vous d\'accord avec ça')+')';">

Attention, une boîte de dialogue ne dépend pas forcément d'un bouton, elle peut s'utiliser avec un simple texte.

<p>Attention, une boîte de dialogue ne dépend pas forcément d'un bouton, elle peut s'utiliser avec un simple <span onMouseOver="alert('En voici un exemple...');">texte</span>.</p>

On peut également l'utiliser avec un champs input de type texte, c'est à dire un champs <input type"text"...>, comme par exemple :

<input type="text" id="ipt1"/>
<input type="button"
    value="Envoyer"
    id="b8"
    onClick="this.value='Vous avez entré : ' + getElementById('ipt1').value;">

On peut très facilement se servir de cela pour faire un formulaire très simple qui concaténe deux chaînes de caractères :

<input type="text" id="ipt2" placeholder="prénom"/>
<input type="text" id="ipt3" placeholder="nom"/>
<input type="button"
    value="Envoyer"
    id="b8"
    onClick="this.value='Bonjour ' + getElementById('ipt2').value +' '+ getElementById('ipt3').value;">

Notez l'utilisation de l'attribut "placeholder" dans les input de type texte.


Exercice

Créez une page web très simple (un modèle ici) dans laquelle vous mettrez

  1. Un bouton qui ouvre une boîte de dialogue dans laquelle se trouve le texte "Hello World!" ;
  2. Un bonton qui ouvre une boîte de dialogue demandant son prénom à l'utilisateur puis ouvre une nouvelle boîte de dialogue affichant "Bonjour " puis le prénom. (indice : combinez les fonction 'prompt' et 'alert')
  3. Une mini-calculatrice, c'est à dire deux champs pour y entrer des nombres et 4 boutons permettant de faire l'addition, la soustraction, la multiplication ou la division des deux nombres. Le résultat sera affiché dans un champs input de type texte.

Concernant le dernier point, il vous faudra utiliser la fonction "parseInt()" pour transformer une chaîne de caractères en entier ; par exemple parseInt("3") renvoie l'entier 3.


Afficher du texte et des calculs

La fonction "document.write(...)" permet d'afficher du texte dans un document.

<script>
    document.write('Si on additionne 3 à 5 on obtient '+(5+3));
</script>

Notez l'utilisation de la balise <script> ainsi que la différence entre les deux '+'. Cela donne :

Les variables

Une variable est un nom associé à une information. Plus précisément, c'est un nom associé à un emplacement mémoire qui contient une information. Par exemple :

var x = 10 ;

Cela correspond à la variable de nom "x" qui contient l'information 10. On a ici une variable de type eniter, mais il existe d'autres types : int, float, char, string, bool,...

On peut se contenter d'une simple déclaration, ou d'une déclaration avec affectation :

var toto ;
var pi = 3.14159 ;

Les variables servent également à manipuler de l'information. Par exemple :

var x = 18 ;
var y = 12 ;
var moyenne = (x+y)/2;
var a = 10 ;
a = a + 1 ;
a = a + 9 ;
var texte = "la variable a vaut " + a + "\n";

Il existe également des raccourcis ; par exemple, le code ci-dessous et le code ci-dessus sont strictement équivalent :

a = 10 ;
a++ ;
a += 9 ;
texte = "la variable a vaut " + a + "\n" ;

Fonctions

Vous avez déjà rencontré des fonctions : document.write(), getElementById(),... Une fonction est un outils qui permettent d'appeler un bloc d'instructions. Une fonction peut éventuellement avoir des paramètres et renvoyer un résultat.

Voici un exemple de fonction prenant des paramètres :

function bonjour (prenom) {
    document.write("Bonjour " + prenom) ;
}
bonjour("Thibault") ;

Voici un exemple de fonction prenant des paramètres et renvoyant un résultat :

function somme (x,y) {
    var res = x + y ;
    return res ;
}
var x = somme(3,4) ;
document.write("La somme de 3 et 4 vaut "+x) ;

On peut également utiliser ces fonctions avec les outils vus précédemment :

<input type="text" id="ipt4" placeholder="nombre 1"/>
<input type="text" id="ipt5" placeholder="nombre 2"/>
<input type="button"
    value="Somme"
    id="b9"
    onClick="
        var x = parseInt(getElementById('ipt4').value);
        var y = parseInt(getElementById('ipt5').value);
        this.value = 'Somme = '+somme(x, y);">

Exercice

Dans une page HTML, créez une fonction 'moyenne' qui prend en paramètre 4 nombres et renvoie leur moyenne. Créez ensuite un formulaire qui permette à l'utilisateur d'entrer 4 nombres. Ajouter un bouton "Envoyer". Lorsque l'utilisateur entre 4 nombres et clique sur le bouton, une boîte de dialogue doit s'ouvrir en lui indiquant la moyenne des 4 nombres.

Correction


Modifier le code HTML avec javascript

On peut utiliser Javascript pour changer complètement une partie du code HTML ; par exemple celui d'une division, d'une section d'un header, d'un menu... de tout ce qui peut avoir un id en fait.

<div id="unDiv"></div>  
 
<input type="button"
    value="Paul Verlaine"
    id="b10"
    onClick="getElementById('unDiv').innerHTML='<p>Les sanglots longs... Monotone.</p>';">
 
<input type="button" 
   value="Victor Hugo"
    id="b11"
   onClick="getElementById('unDiv').innerHTML='<p>Demain, dès ... de toi plus longtemps.</p>';">
 
<input type="button"
    value="Reset"
    id="b12"
    onClick="getElementById('unDiv').innerHTML='';">

Modifier le code CSS

En javascript, les propriétés CSS d'un éléments sont définies par son 'style'. Par exemple, pour changer la couleur du texte d'un élément d'id 'toto', il suffira de changer la valeur de getElementById('toto').style.color

<input type="button"
    value="Changer"
    onClick="getElementById('maDiv').style.color='red';">

Timer

La fonction 'setInterval(f, t)' permet de lancer une la fonction 'f' à un intervalle de temps 't'. Par exemple :

<script>
function changeCouleur () {
  if (document.body.style.color=='orange') {
    document.body.style.color='blue';
  } else  {
    document.body.style.color='orange';
  }
}
</script>
<input value="Démarrer" type="button" id="on"
       onClick="monTimer=setInterval(changeCouleur,1000);">
<input value="Arrêter" type="button" id="off"
       onClick="clearInterval(monTimer);">

Exercice

  1. Changer la couleur de fond et la couleur de texte sur un cycle de trois paramètrages en appuyant sur un bouton.
  2. La fonction suivante calcule l'heure à l'instant où elle est appelée :
    function mon_heure() {
    	var d = new Date();
    	var heure = d.getHours();
    	var minute = d.getMinutes();
    	var seconde = d.getSeconds();
    	var t = heure + ":" + minute + ":" + seconde;
    }
    Utilisez-la pour créer une zone qui indique l'heure en permanence à la seconde près. Vous avez le droit de modifier cette fonction si nécessaire.
  3. Construire une page dont certains objets changent de couleur de texte et de fond quand on passe dessus.
  4. Ajoutez une image à votre page et faites en sorte qu'elle change quand on la survole.

Le canvas : qu'est-ce donc ?

Les balises <canvas> servent à délimiter une zone de dessin dans laquelle il sera possible de tracer un graphique grâce à du Javascript. Voyons d'abord comment définir cette zone de dessin :

<canvas id="mon_canvas"
    width="400"
    height="250"
    style="border: red 2px solid;">
    Erreur : vortre navigateur ne supporte pas les canvas.
</canvas>

La balise canvas possède des dimensions (width et height), un id pour que l'on puisse intergair avec en javascript, et éventuellement un style. Ce code donne :

Erreur : votre navigateur ne supporte pas les canvas.

Bien... que fait-on maintenant qu'on a un canvas ? Comme dis précédemment, un canvas est une zone qui sert à tracer un graphique. Pour cela, il faut considérer le canvas comme un repère orthonormé dont l'unité est le pixel et dont l'origine est le coin supérieur gauche du canvas. Pour placer le curseur de dessin en un point (x,y), on utilisera la fonction "moveTo(x,y)", et pour tracer une ligne du point où est situé le curseur jusqu'au point de coordonnées (z,t), on utilisera "lineTo(z,t)".

Par exemple, avec le code-ci dessous, on obtient un bouton qui permet d'afficher une croix dans le canvas précédent :

<script>
    var c = document.getElementById("mon_canvas");
    var ctx = c.getContext("2d");
     
    function croix(){
        ctx.beginPath();      // Début du chemin
        ctx.moveTo(50,50);    // Le tracé part du point 50,50
        ctx.lineTo(200,200);  // Segment est ajouté vers 200,200
        ctx.moveTo(200,50);   // Puis on saute jusque 200,50
        ctx.lineTo(50,200);   // Puis on trace jusque 50,200
        ctx.closePath();      // Fermeture du chemin (facultative)
        ctx.stroke();
    }
</script>
<input type="button"
    id="b13"
    value="Afficher une croix"
    onClick="croix();">

Notez les deux première ligne du script qui permettent de récupèrer dans la variable 'ctx' le contexte 2d du canvas, c'est à dire l'élément qui va permettre d'appeler les fonctions de dessin.


Exercice

  1. Dessinez dans un canvas un carré de 257px de côté à 50px des bords.
  2. Faites la même choses mais avec 4 boutons dont chacun tracera un des côtés du carré.
  3. Faites un "télécran", c'est à dire une page avec :
    • - Une zone de dessin de 300x300px
    • - Le curseur de dessin est placé au centre de cette zone
    • - 4 boutons permettants de de tracer des traits de 10px de long respectivement vers le haut, le bas, la gauche, la droite
    • - 1 boutons permettant d'effacer le dessin grace à la fonction 'ctx.clearRect(0,0,w,h)' où 'w' est la largeur de la zone de dessin et 'h' sa hauteur.
    • - Une gestion des bords, c'est à dire qu'il faut faire en sorte que l'utilisateur ne puisse pas dessiner en dehors du canvas.
    indice : il est conseillé de créer une fonction distincte pour chaque direction de dessin.

Style de traits et de formes

Il est possible de changer la plusieurs proriétés d'un trait, notamment son épaisseur (avec le paramètre 'lineWidth'), sa couleur ('strokeStyle'), le style de jointure ('line.Join') et de fin de trait ('lineCap'). Par exemple, pour qu'un dessin se fasse maintenant avec des jointures et des fins de traits arrondis, avec un trait vert d'une épaisseur de 5px, il suffit d'écrire :

<script>
    var c = document.getElementById("mon_canvas");
    var ctx = c.getContext("2d");
    
    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    ctx.strokeStyle = "red";
    ctx.lineWidth = 5;
</script>

On peut de même colorer l'intérieur d'une figure créée par un ensemble de traits avec la propriété 'fillStyle'. Par exemple, pour créer un triangle rouge à bord vert et un triangle bleu à bord rose, cela donne :

var c = document.getElementById("mon_canvas2");
var ctx = c.getContext("2d");
                   
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.lineWidth = 10;

                        
function triangle_1(){
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,160);
    ctx.lineTo(120,90);
    ctx.lineTo(20,20);
    ctx.closePath();
    ctx.strokeStyle="green";
    ctx.fillStyle="red"
    ctx.stroke();
    ctx.fill();
}

                        
function triangle_2(){
    ctx.beginPath();
    ctx.moveTo(350,200);
    ctx.lineTo(150,200);
    ctx.lineTo(250,120);
    ctx.lineTo(350,200);
    ctx.closePath();
    ctx.strokeStyle="pink";
    ctx.fillStyle="blue"
    ctx.stroke();
    ctx.fill();
}
Erreur : votre navigateur ne supporte pas les canvas.

Exercice

  1. Créez une page web avec un canvas de 500x400px et écrivez je code javascript nécessaire pour y dessiner une maison. Celle-ci comprendra :
    • - Une façade rouge à bords noirs
    • - Un toît marron à bords marrons foncé
    • - Une porte vert à bords marrons
    • - Deux fenêtres bleues à bords noirs
  2. Créez une page avec un canvas de 500x400px et trois boutons qui permettent de dessiner respectivement la coque, le mât et la voile d'un bateau. Chaque fois qu'un de ces boutons sera activé, il devra demander à l'utilisateur la couleur dont il veut remplir l'élément concerné. Par exemple si l'utilisateur clique sur le bouton "Dessiner la voile", une boîte de dialogue devra s'afficher en demander "de quelle couleur voulez-vous que la voile soit?" ; si l'utilisateur entre "yellow", la voile devra être jaune.

  3. Les formulaires

    On a déjà vu qu'il était possible d'utiliser des champs input de type text pour en récupérer la valeur. Il existe d'autres types de champs input qui permettent de créer des formulaires complets : les types radio, checkbox, password, ainsi que les champs select, les boutons submit,...

    Les formulaires - password

    Le champs input de type password ressemble beaucoup à celui de type texte à ceci près que les caractères entrés y sont cachés :

    <input type="password"
    	placeholder="password"
    	id="pwd">
    <input type="button"
    	value="Tester"
    	onClick="
    		if (getElementById('pwd').value.length > 6) {
    		    alert('Mot de passe correct');
    		}
    		else {
    		    alert('Mot de passe trop court');
    		}
    	;">

    Notez l'utilisation de la propriété 'length' qui permet d'obtenir la longueur d'une chaîne de caractères.

    Les formulaires - radio

    Les inputs de type radios permettent de faire un choix entre plusieurs possibilité. Ce choix peut être unique, dans ce cas les différentes options doivent avoir la même valeur pour l'attribut 'name', ou multiple.

    <label><input type="radio" name="sexe" value="Homme">Homme</label>
    <label><input type="radio" name="sexe" value="Femme">Femme</label>
    <input type="button"
        value="Lequel ?"
        onClick="var sex = getElementsByName('sexe');
            if (sex[0].checked){
                alert('Vous avez sélectionné : Homme');
            }
            else{
                alert('Vous avez sélectionné : Femme');
            };">

    Les formulaires - checkbox

    Une checkbox sert généralement à demander la confirmation d'un choix à l'utilisateur. Cela peut être un choix binaire (voir exemple ci-dessous) ou alors multiple, comme par exemple une liste de souhaits à cocher.

    <label><input type="checkbox" value="ok" id="cb1"/>Recevoir la newsletter</label>
    <input type="button"
        value="Vérifier"
        onClick="
            if (getElementById('cb1').checked) {
                alert('Vous souhaitez recevoir la newsletter');
            }
            else {
                alert('Vous ne souhaitez pas recevoir la newsletter');
            };">

    Les formulaires - select

    Les balises 'select' permettent de créer une liste déroulante dont les options sont précisées à l'aide des balises 'option'.

    <select name="country" id="country">
        <option value="none">Sélectionnez votre pays de résidence</option>
        <option value="en">Angleterre</option>
        <option value="us">États-Unis</option>
        <option value="fr">France</option>
    </select>
    <input type="button"
        value="Envoyer"
        onClick="
            var ctry = getElementById('country');
            if (ctry.selectedIndex == 0){
                alert('vous devez sélectionner un pays');
            }
            else {
                alert('Vous avez sélectionné : ' + ctry.options[ctry.selectedIndex].value);
            }
        ;">

    Les formulaires - Structure et reset

    On placera généralement l'ensemble d'un formulaire entre deux balises 'form'. Cela permet entre autres choses d'utiliser les bouton 'submit' (qu'on ne vera pas ici) et 'reset' :

    <form id="my_form">
        <input type="text" id="nm" placeholder="Entrez du texte...">
        <input type="reset" value="Reset">
    </form>

    Exercice

    1. Réaliser un formulaire demandant plusieurs informations à l'utilisateur à l'aide des différents outils vu précédemment. Le formulaire devra demander :
      • - Son genre (Homme, Femme, Autre) [radio]
      • - Le nom et le prénom de l'utilisateur [text]
      • - Son age [text]
      • - Un mot de passe [password]
      • - Une confirmation du mot de passe [password]
      • - Un département d'étude parmi une liste que vous proposerez [select]
      • - Une liste de loisir à cocher dans une liste [checkbox]
    2. Ajouter un bouton "Envoyer" qui affiche une synthèse de l'ensemble des informations saisies dans une boîte de dialogue, ainsi qu'un bouton reset.
    3. Créer une fonction qui vérifie que le formulaire a été correctement rempli, c'est à dire :
      • - Un genre a été choisi
      • - Le nom et le prénom font plus de 2 caractères chacun
      • - L'âge est un entier positif
      • - Le mot de passe est correctement confirmé (i.e. identique dans les deux champs password), et fait plus de 8 caractères
      • - Un établissement a été sélectionné
      • - Au moins 3 loisirs ont été cochés
      Si le formulaire est mal rempli, une boîte de dialogue devra s'afficher en indiquant "Erreur dans le formulaire".
    4. Faites en sortes que lorsqu'une erreur est dectecté dans le formulaire, Un message s'affiche juste au dessus de l'information concernée pour indiquer le problème. Par exemple, si le nom est trop court, un message devra s'afficher à côté du champs input de type texte correspondant pour indiquer "Le nom doit faire plus de 2 caractères".

    Les boucles

    Nous allons voir ce que sont les boucles en javascript. On s'intéressera en particulier aux boucles "for" et "while", mais il faut savoir qu'il en existe d'autres (la boucle "do while" par exemple). Une boucle est un bloc d'instruction qui sera répété un certain nombre de fois en fonction d'une condition donnée.

    boucles - openclassroom

    Commençons par le cas le plus simple, celui de la boucle "while". Sa syntaxe est :

    while (condition) {
        instr 1
        instr 2
        ...
    }

    Si la 'condition' est vraie, les instructions comprises dans la boucle (instr1, instr2,...) seront exécutées. Ensuite, la condition sera testé à nouveau et si elle est toujours vraie les instructions seront à nouveau exécutées et ainsi de suite. Par exemple, quel est le résultat du code suivant à votre avis ?

    var x = 0;
    while (x < 10) {
        x = x + 1;
    }
    alert("x vaut "+x);

    Notez qu'il faut impérativement que les instructions qui sont dans la boucles aient une chance de modifier la condition, ou que vous soyez sûr qu'une cause externe puisse la modifier. Sans quoi, la condition resterait toujours vraie et vous entreriez dans une boucle infinie !

    La boucle "for" a une syntaxe très similaire, à ceci près que la condition a un format prédéfini :

    for (pas = val_initial ; pas < limite ; pas = pas +/- incr) {
        instr 1
        instr 2
        ...
    }

    Concrètement, il s'agit de définir un pas qui est initialisé à une certaine valeur et va évoluer jusqu'à une valeur limite selon qu'on lui ajoute / enlève un incrément. Par exemple :

    for (i = 0 ; i < 5 ; i++) {
        instr 1
        instr 2
        ...
    }

    Ce code aura pour effet d'éxecuter le bloc d'instructions compris dans la boucles pour i=0, puis pour i=1, puis pour i=2... 5 fois en tout. À votre avis, quel est le résultat du code suivant :

    var x = 0;
    for (i = 0 ; i < 5 ; i++) {
        x = x + i;
    }
    alert("x vaut "+x);

    Il est important de garder à l'esprit la différence de sémantique entre les boucles "while" et les boucles "for" : la première sert par exemple lorsque la condition d'arrêt de la boucle ne peut pas se définir comme un nombre d'itération fixe, alors que la boucle "for" servira plutôt lorsque l'on a besoin d'un pas ou d'un nombre donné d'itération.

    Les tableaux

    Les tableaux (ou veteur quand ils n'ont qu'une seule dimenssion) sont des structures de données qui permettent d'indexer un ensemble d'informations. Par exemple, le code suivant crée un tableau contenant les valeurs "Jean", "Paul", et "Marie" :

    var tab = ["Jean", "Paul", "Marie"];

    Les éléments qui sont contenus dans un tableau possèdent un index. Ces index sont les entiers de 0 à n-1, où n est le nombre d'éléments dans le tableau. Pour accéder à l'élément d'index i, on écrit tab[i]. Par exemple, pour accéder à l'élément "Paul", on écrira tab[1]. Sachant cela, que fait d'après vous le code suivant :

    str = "";
    for (i=0; i<3; i++){
        str = str + tab[i] + " ";
    }
    alert(str);

    On peut accéder à la taille du tableau en utilisant l'attribut "lenght". Pour exemple, "tab.length" donne la taille du tableau "tab". De ce fait, on préférera généralement faire une boucle "for" de forme plus générale en utilisant cette attribut :

    for (i=0; i < tab.length; i++){
        ...
    }

    Enfin, il est possible d'ajouter un élément dans un tableau. Par exemple, le tableau "tab" contient trois éléments ; à l'index 3 (i.e. en 4^ème position) il n'y a donc à rien. Le code suivant ajoute un élément à cet index dans le tableau tab :

    tab[3] = "Luc";

    Un tableau peut avoir plusieurs dimensions. Par exemple, le code suivant crée une matrice, c'est à dire un tableau en deux dimensions :

    var mat = [
        [1,2,3],
        [4,5,6],
        [7,8,9]];

    Il s'agit en fait d'un tableau de tableau. On pourrait l'écrire sur une seule ligne : "mat = [[1,2,3],[4,5,6],[7,8,9]];". Pour accéder à l'élément qui se trouve à la i^ème ligne et à la j^ème colonne d'une matrice, on écrit "mat[i][j]".

    Exercices

    Le but de cet exercice est de créer plusieurs fonctions manipulant les tableaux et les boucles. Pour chacun des points ci-dessous, il vous sera également demandé d'implémenter un exemple illustrant le fonctionnement de la fonction.

    1. Écrire une fonction qui prend en paramètre un tableau, un élément, et renvoie le tableau avec l'élément ajouté à la fin.
    2. Écrire une fonction qui affiche le contenu d'une matrice dans une boîte de dialogue.
    3. Écrire une fonction qui permet à l'utilisateur de rentrer une suite d'entier (via un prompt) et qui les ajoute dans un tableau. Si l'utilisateur entre un nombre négatif, la fonction arrête de demander des nombres et renvoie le tableau.
    4. La factorielle d'un nombre se note "!" et est définie par le produit de tous les entiers qui lui sont inférieurs. Par exemple 4! = 4x3x2x1. Écrire une fonction qui prend en paramètre un entier et renvoie sa factorielle.
    5. Écrire une fonction qui prend en paramètre un tableau de nombre et affiche dans une boîte de dialogue la moyenne, le min et le max du tableau. En montrer un exemple d'exécution en la combinant avec la fonction de la question 3.
    6. Écrire une fonction prenant en paramètre une matrice et un nombre et renvoyant le nombre d'occurence du nombre donné dans la matrice. Faire de même pour une fonction renvoyant simplement un booléen indiquant si le nombre est présent dans la matrice ou non.
    7. On veut maintenant pouvoir supprimer un élément d'un tableau. écrire une fonction qui prend en paramètre un tableau, un index, et renvoie le tableau avec l'élément d'index donné supprimé.