Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Répétition de fonction


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Répétition de fonction
    Bonjour à tous,

    Je débute en JS, je voudrais faire une page html qui permet de tracer des courbes mathématiques.

    Jusque là pas de problème on trouve plein de chose.

    Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.

    Exemple : Si l'utilisateur clique une première fois sur le bouton, alors il peut tracer une deuxième fonction. Si l'utilisateur clique une deuxième fois sur le bouton, alors l'utilisateur peut tracer une troisième fonction... etc.

    Je pense qu'il faut implémenter ma fonction plot mais je ne sais pas comment faire.

    Pouvez vous m'aider?

    Merci


    Mon HTML
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
     
    <html lang="en">
     
    <head>
    	<meta charset="utf-8" />
    	<title>7_interactive_plotter</title>
     
    	<link rel="stylesheet" href="7_interactive_plotter.css">
     
    	<script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
     
    	<script src="7_interactive_plotter.js"></script>
     
    </head>
     
    <body onload="plot();">
      <h1>Traceur interactif</h1>
     
     
    <div class="layer">
     
    <section id="plotSettings">
     
    	<p> <b> Configuration des axes </b> </p>
    	<p></p>
     
        <label for="xMin"> Valeur Mini de X: </label> <input type=number id="xMin" value=-5 step=0.5 oninput="plot();">
        <p></p>
     
        <label for="xMax">Valeur Maxi de X: </label> <input type=number id="xMax" value=5 step=0.5 oninput="plot();">
        <p></p>
     
        <label for="yMin">Valeur Mini de Y:  </label> <input type=number id="yMin" value=-5 step=0.5 oninput="plot();">
        <p></p>
     
        <label for="yMax">Valeur Maxi de Y: </label> <input type=number id="yMax" value=5 step=0.5 oninput="plot();">
        <p></p>
     
        <label for="color">Couleur de la fonction à dessiner: </label> <input type=color id="color" value=#bb0b0b onchange="plot();">
        <p></p>
     
        <label for="function">Fonction à dessiner: </label> <input id="function" type="text" value="sin(x)" onchange="plot();">
        <p></p>
     
    	<button onclick="plot();">Dessiner</button>
     
    </section>
     
    <section id="plot">
        <div id="myFunction"></div>
     
    </section>
    </div>
     
    <footer>
     
    <a href="7_support.html">Retour au rapport du workspace 7</a>
     
    </footer>
     
    </body>
     
    </html>



    Mon JS

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    // fonction à tracer
     
    var parameters = {
      target: '#myFunction',
      data: [{
        fn: 'sin(x)', 
        color: 'red'
      }],
      grid: true,
      yAxis: {domain: [-1, 1]},
      xAxis: {domain: [0, 2*Math.PI]}
    };
     
    function plot() {
      var f = document.querySelector("#function").value;
      var xMin = document.querySelector("#xMin").value;
      var xMax = document.querySelector("#xMax").value;
      var yMin = document.querySelector("#yMin").value;
      var yMax = document.querySelector("#yMax").value;
      var color = document.querySelector("#color").value;
     
      parameters.data[0].fn = f;
      parameters.xAxis.domain = [xMin, xMax];
      parameters.yAxis.domain = [yMin, yMax];
      parameters.data[0].color = color;
     
      functionPlot(parameters);
    }


    et le CSS

    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    h1{
      	text-align: center;
    	color: sienna;
    	text-shadow: -2px 2px 2px black;
    }
    .layer{
      width: 70%;
      margin-right: auto;
      margin-left: auto;
    }
     
    section {
      border:4px solid grey;
      border-radius:15px;
      box-shadow: 5px 5px 5px grey;
      float:left;
      height:400px;
      padding: 20px;
      margin:10px;
    }
     
    #plotSettings {
      width:160px;
    }
     
    #plot {
      width:550px;
    }

  2. #2
    Membre émérite
    Salut,

    Citation Envoyé par missty95 Voir le message

    Jusque là pas de problème on trouve plein de chose.
    Ah ben justement j'ai ouvert ce fil : Tracer des courbes...

    Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.
    Oui j'ai déjà vu ça mais avant est-ce que tu es sûr que ton code actuel fonctionne bien ?

    J'ai testé (c'est joli) ici : https://jsbin.com/zekayonaba/edit?output mais ça n'a pas l'air de fonctionner correctement quand je met la fonction sin(x)/x ?

  3. #3
    Candidat au Club
    Salut, je ne sais pas quelle fonction tu veux faire mais tu peux essayer (sin(x))/x

  4. #4
    Membre émérite
    Non plus mais bon je vais regarder le code source...

    Citation Envoyé par missty95 Voir le message


    Ce que souhaites c'est rajouter un autre bouton qui permet de rajouter une input pour qu'un utilisateur puisse choisir une autre fonction à tracer.

    Exemple : Si l'utilisateur clique une première fois sur le bouton, alors il peut tracer une deuxième fonction. Si l'utilisateur clique une deuxième fois sur le bouton, alors l'utilisateur peut tracer une troisième fonction... etc.

    Tu veux dire si il clique sur le bouton "dessiner" tu veux qu'apparaisse un autre input ?

    Cela me semble étrange, ne serait-il pas mieux d'ajouter un bouton "ajouter" pour ajouter un input ?

    Et ensuite tu veux que toutes les courbes soient affichées si il clique sur le bouton "dessiner" ?

  5. #5
    Candidat au Club
    Je me suis mal expliquer effectivement,

    Je souhaite un bouton supplémentaire "rajouter fonction à dessiner"

    Un input apparait "la fonction à rajouter" et un bouton pour valider.

    Les courbes supplémentaire sont tracée dans le même graphique.


    Je pense que c'est se que tu proposais.

  6. #6
    Membre émérite
    Oui je pensais à peu prés à ça sauf pour le "bouton pour valider", je me disais qu'on avait déjà le bouton "Dessiner"...

    Sinon je me suis rendu compte d'une autre chose : la couleur, là il n'y a qu'une input (type color) mais comment tu comptes faire si il y a plusieurs courbes ?

  7. #7
    Candidat au Club
    J'y ai pensé soit :
    - je met une couleur aléatoire aux autre courbes
    - soit je rajoute un input couleur pour les courbes suivantes

  8. #8
    Membre émérite
    Salut,

    J'ai fait ce code teste : https://jsbin.com/nilonefite/edit?output

    A toi de voir pour la présentation HTML/CSS car c'est juste un exemple pour le JS...

    Les couleurs sont dans un tableau de 4 couleurs après la quatrième couleurs on revient à la première...
    Là j'ai gardé le premier input type color mais ce serait plus logique de l'enlever ou d'en ajouter un pour chaque courbe...

  9. #9
    Candidat au Club
    Bonsoir, c'est super.

    Je vais pas en rester là, maintenant il faut que je pige, donc je vais regarder ton code de plus prêt.

    Je débute et pour l'instant j'arrive à comprendre ou décoder et modifier.
    Mais partir d'un feuille blanche ou trouver des astuce me prennent un temps fou.

    Je me fais des petit script mais c'est galère.

    Par exemple :

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
     
    <button onclick="maFonction()">Bouton</button>
     
    <button onclick="maFonction2()">Bouton</button>
     
    <div id="maDIV" style="display:none;">
    Contenu de la balise DIV à afficher ou à cacher
    </div>
     
    <div id="maDIV2" style="display:none;">
    <button onclick="test()">Bouton</button>
    </div>
     
    <script>
    function maFonction() {
      var div = document.getElementById("maDIV");
      if (div.style.display === "none") {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    }
     
    function maFonction2() {
      var div = document.getElementById("maDIV2");
      if (div.style.display === "none") {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    }
     
    </script>
    </body>
    </html>


    Bref à force de tâtonner je vais peut être y arriver.

    Merci pour ton aide.

  10. #10
    Membre émérite
    Ce qui est bien avec JS c'est que tu peux t'entrainer autant que tu veux...
    Et ce n'est pas les cours/tuto et les choses à tester qui manquent...

    Et si on bloque sur un point il y a le forum...

  11. #11
    Candidat au Club
    Tu as entièrement raison,

    Je décortique ton code et je pense que j'en ai pour un petit moment.
    J'ai bien compris ton code pour le changement de couleur.

    Par contre pas encore pour le rajout des courbes mais je creuse

  12. #12
    Membre émérite
    Salut,

    Voici une version corrigée et un peu simplifié : https://jsbin.com/ciqajaxoyi/edit?js,output

    J'ai corrigé un point : xMin, xMax, yMin et yMax doivent être des nombres or quand on fait ceci var xMin = document.querySelector("#xMin").value; eh bien xMin est une string et non un nombre car la propriété value de l'input est une string, il faut donc la convertir en nombre ce qui peut se faire par exemple en ajoutant un + devant : var xMin = +document.querySelector("#xMin").value;...

    Un peu simplifié car j'ai supprimé la gestion des couleurs et ce parce que j'ai vu que la lib gère les couleurs, si on ne précise rien eh bien une couleur différente est choisie automatiquement...


    PS : Pour analyser un code JS les outils du navigateur (touche F12) sont très utiles, on peut mettre des points d’arrêt, exécuter le code pas à pas...

    On peut aussi utiliser la fonction console.log pour afficher des données dans la console...
    Par exemple en mettre une dans la boucle for pourrait être très utile...