Créa-blog

00 jours et 00:00:00
Créa-code arrive !

Ressources pour développeur web

Tracer une fonction mathématique en HTML et JavaScript

Temps de lecture : 17 minutes
Accueil → Javascript → Tracer une fonction mathématique en HTML et JavaScript

Vous souhaitez créer votre propre application pour tracer la courbe d’une fonction mathématique ?

Dans cet tutoriel, nous allons apprendre à créer une application web complète en HTML, CSS et JavaScript, capable de tracer une fonction mathématique, calculer des images et trouver des antécédents.

Nous utiliserons deux bibliothèques puissantes : Chart.js pour le dessin du graphique et Math.js pour manipuler les formules mathématiques.

👉 Que vous soyez étudiant, enseignant, ou simple passionné de programmation, ce tutoriel vous guidera pas à pas.
En route pour découvrir comment tout cela fonctionne !

Visualisez la démo

Application web pour tracer une fonction mathématique en HTML et JS

1. Mise en place de la structure HTML de l’application

Pour commencer, voici la base de notre fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo : Application mathématiques pour tracer une fonction</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mathjs@11/lib/browser/math.js"></script>
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

Explication :

  • Le doctype <!DOCTYPE html> définit que nous utilisons HTML5.
  • <meta charset="UTF-8"> permet d’utiliser des caractères spéciaux (accents français).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> rend la page responsive (adaptée aux mobiles). En savoir plus sur La balise meta-viewport.
  • <link rel="stylesheet" href="css/styles.css"> charge notre fichier de styles (CSS).
  • On importe deux bibliothèques JavaScript :
    • Chart.js : pour dessiner les graphiques de fonctions.
    • Math.js : pour interpréter et calculer des expressions mathématiques.

✅ Bon à savoir : Chart.js et Math.js sont disponibles via des liens CDN. Aucune installation compliquée !

2. Création du formulaire pour entrer une fonction mathématique

Continuons avec un formulaire simple :

<div id="wrapForm">
  <form id="function-form">
      <input type="text" id="function" name="function" placeholder="Entrez une fonction de x de type 2*x + 1, x^2, sin(x)" required>
      <button type="submit">Tracer</button>
  </form>
</div>

Explication :

  • L’utilisateur peut saisir une fonction mathématique (2*x + 1, sin(x), x^2, etc.).
  • Lorsqu’on clique sur « Tracer », un événement va déclencher le calcul et l’affichage du graphique (nous verrons ce code juste après).
  • L’attribut required sur le champ impose de remplir le champ avant de pouvoir envoyer.

3. Zone pour afficher le graphique

Ensuite, on prévoit un canvas pour tracer la fonction :

<canvas id="graphCanvas"></canvas>
  • <canvas> est un élément HTML qui sert de surface de dessin.
  • L’attribut id="graphCanvas" permet de retrouver ce canvas en JavaScript pour y dessiner notre courbe avec Chart.js. En savoir plus sur Les Class et les ID en HTML & CSS.

4. Ajout de fonctionnalités : Calcul d’images et d’antécédents

Nous avons également deux petites fonctionnalités pratiques :

Calculer une image (c’est-à-dire calculer f(x) pour une valeur donnée) :

<div class="image">
    <input type="number" id="valX" placeholder="Image de : 2">
    <button onclick="calculerImage()">Calculer f(x)</button>
    <span id="resultImage"></span>
</div>

Chercher des antécédents (trouver x tel que f(x) = y) :

<div class="image">
    <input type="number" id="valY" placeholder="Antécédent(s) de : 4">
    <button onclick="calculerAntecedents()">Chercher x</button>
    <span id="resultAntecedents"></span>
</div>

Explication :

  • L’utilisateur entre une valeur et clique sur un bouton.
  • Deux fonctions JavaScript (calculerImage() et calculerAntecedents()) sont appelées.
  • Le résultat est affiché dans un <span> juste à côté.

5. Mise en place d’un tableau de valeurs

Pour compléter, nous avons un tableau qui affichera plusieurs valeurs de la fonction :

<div class="table-responsive">
  <table id="coordTable">
    <thead>
        <tr><th>x</th><th>f(x)</th></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Ce tableau va être rempli dynamiquement en JavaScript après le tracé du graphique.
On affichera les paires (x, f(x)) de -10 à 10.

✅ C’est parfait pour visualiser concrètement les valeurs sans lire le graphique.

À ce stade :

  • Nous avons préparé toute la structure HTML de notre application.
  • L’interface est prête pour :
    • Tracer une fonction,
    • Calculer l’image d’un nombre,
    • Chercher les antécédents,
    • Afficher un tableau de correspondance.

Nous allons maintenant entrer dans le cœur du fonctionnement : ➡️ Le JavaScript qui donne vie à notre application.

Nous allons voir comment :

  • interpréter une fonction entrée par l’utilisateur,
  • générer un graphique interactif avec Chart.js,
  • calculer des images (f(x)) et des antécédents (x pour un f(x) donné),
  • et afficher les résultats dans un tableau dynamique.

👉 Prêt ? Alors c’est parti !

6. Initialisation du contexte graphique avec Chart.js

En début de script :

const ctx = document.getElementById('graphCanvas').getContext('2d');
let chart = null;
let currentCompiled = null;

Explication :

  • ctx est le contexte de dessin du canvas HTML (où l’on dessinera le graphique).
  • chart est une variable qui contiendra notre graphique (au début, il n’existe pas encore).
  • currentCompiled sera l’expression mathématique compilée que nous allons utiliser pour tous les calculs (f(x)).

✅ Important : On initialise tout de suite ces variables pour les rendre accessibles dans tout le script. En savoir plus sur La portée des variables en JS.

7. Traitement de la soumission du formulaire

Ensuite, on écoute la soumission du formulaire :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
document.getElementById('function-form').addEventListener('submit', function(e) {
    e.preventDefault();
    ...
});

Explication :

  • e.preventDefault(); empêche le rechargement de la page lors de l’envoi du formulaire.
  • À la place, on va récupérer la fonction entrée et commencer les calculs.

8. Récupération et compilation de la fonction mathématique

À l’intérieur du submit :

const input = document.getElementById('function').value;
const expr = math.parse(input);
const compiled = expr.compile();
currentCompiled = compiled;

Explication :

  • input contient la fonction tapée par l’utilisateur (x^2, 2*x+1, sin(x), etc.).
  • math.parse() lit cette fonction et la transforme en expression mathématique interprétable.
  • expr.compile() prépare l’expression pour qu’on puisse l’évaluer rapidement pour différents x.
  • On stocke compiled dans currentCompiled pour pouvoir la réutiliser plus tard.

✅ Grâce à Math.js, pas besoin de créer son propre moteur d’analyse mathématique !

9. Génération des valeurs pour le graphique et le tableau

Toujours dans le submit :

const xValues = [];
const yValues = [];
const tableHead = document.querySelector('#coordTable thead');
const tableBody = document.querySelector('#coordTable tbody');
tableHead.innerHTML = '';
tableBody.innerHTML = '';

Puis, on crée deux lignes pour le tableau :

const rowX = document.createElement('tr');
const rowY = document.createElement('tr');
rowX.innerHTML = '<th>x</th>';
rowY.innerHTML = '<th>f(x)</th>';

Ensuite, on boucle sur les valeurs de x de -10 à 10 :

for (let x = -10; x <= 10; x += 1) {
    try {
        const y = compiled.evaluate({ x });
        xValues.push(x);
        yValues.push(y);
        rowX.innerHTML += `<td>${x}</td>`;
        rowY.innerHTML += `<td>${y.toFixed(2)}</td>`;
    } catch (err) {
        rowX.innerHTML += `<td>–</td>`;
        rowY.innerHTML += `<td>Erreur</td>`;
    }
}

Explication :

  • Pour chaque x, on calcule f(x).
  • On ajoute la paire (x, f(x)) dans :
    • Le tableau HTML,
    • Et les tableaux xValues et yValues (qui serviront au graphique).
  • On arrondit y à deux décimales (toFixed(2)).

✅ Si une erreur est détectée (par exemple si la fonction n’est pas définie pour une valeur), on inscrit « Erreur ».

Enfin, on ajoute les lignes dans le tableau :

tableHead.appendChild(rowX);
tableBody.appendChild(rowY);

10. Tracé de la courbe de la fonction mathématique

Avant de tracer, on détruit l’ancien graphique s’il existe :

if (chart) chart.destroy();

Puis on crée un nouveau graphique avec Chart.js :

chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: xValues,
        datasets: [{
            data: yValues,
            borderColor: 'blue',
            fill: false,
            tension: 0.1
        }]
    },
    options: {
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            x: { title: { display: true, text: 'Abscisse (x)' } },
            y: { title: { display: true, text: 'Ordonnée (y) ou f(x)' } }
        }
    }
});

Explication :

  • type: 'line' ➔ graphique en courbe.
  • labels ➔ l’axe des x (abscisses).
  • datasets.data ➔ l’axe des y (ordonnées).
  • borderColor: 'blue' ➔ courbe bleue.
  • tension: 0.1 ➔ légère courbure de la ligne.
  • legend.display: false ➔ pas de légende inutile.

✅ Grâce à Chart.js, dessiner une fonction devient super simple !

11. Fonction pour calculer l’image d’un nombre

Voici comment fonctionne calculerImage() :

function calculerImage() {
    const xVal = parseFloat(document.getElementById('valX').value);
    const resultElem = document.getElementById('resultImage');

    if (!currentCompiled || isNaN(xVal)) {
        resultElem.textContent = "Entrez un x valide et une fonction.";
        return;
    }

    try {
        const y = currentCompiled.evaluate({ x: xVal });
        resultElem.textContent = `f(${xVal}) = ${y.toFixed(2)}`;
    } catch (err) {
        resultElem.textContent = "Erreur de calcul.";
    }
}

Explication :

  • On récupère la valeur de x entrée par l’utilisateur.
  • On utilise notre fonction compilée pour calculer f(x).
  • On affiche le résultat dans un <span>.

12. Fonction pour chercher les antécédents d’une valeur

Et voici calculerAntecedents() :

function calculerAntecedents() {
    const yVal = parseFloat(document.getElementById('valY').value);
    const resultElem = document.getElementById('resultAntecedents');

    if (!currentCompiled || isNaN(yVal)) {
        resultElem.textContent = "Entrez une valeur de f(x) et une fonction.";
        return;
    }

    const antecedents = [];
    for (let x = -100; x <= 100; x += 0.1) {
        const y = currentCompiled.evaluate({ x });
        if (Math.abs(y - yVal) < 0.1) {
            antecedents.push(x.toFixed(2));
        }
    }

    if (antecedents.length > 0) {
        resultElem.textContent = `x tel que f(x) ≈ ${yVal} : ${antecedents.join(", ")}`;
    } else {
        resultElem.textContent = `Aucun antécédent trouvé pour f(x) = ${yVal}.`;
    }
}

Explication :

  • On récupère y donné par l’utilisateur.
  • On balaye les x de -100 à 100 par pas de 0.1.
  • Si f(x) est proche de y (tolérance ±0.1), on garde x.
  • On affiche tous les antécédents trouvés.

✅ Cela permet de trouver approximativement les solutions même pour des fonctions compliquées !

Nous avons maintenant une application web fonctionnelle qui :

✅ Trace le graphique d’une fonction,
✅ Affiche les valeurs (x, f(x)) dans un tableau,
✅ Permet de calculer une image pour une valeur donnée,
✅ Permet de trouver les antécédents pour un résultat donné.

Grâce à Chart.js et Math.js, même des utilisateurs débutants peuvent manipuler des fonctions mathématiques de manière simple et ludique.

Le code complet

Le fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Démo : Application mathématiques pour tracer une fonction</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mathjs@11/lib/browser/math.js"></script>
</head>
<body>
<h1>Application mathématiques pour tracer une fonction</h1>
<p id="chapo">Application HTML et JS permettant de tracer des fonctions mathématiques en utilisant Chart.js et Math.js</p>
<p id="depot"><a href="https://github.com/crea-troyes?tab=repositories"><img src="img/github.png" alt="GitHub"> Dépôt GitHub</a></p>
<div id="mathfunc">


    <div id="wrapForm">
      <form id="function-form">
          <input type="text" id="function" name="function" placeholder="Entrez une fonction de x de type 2*x + 1, x^2, sin(x)" required>
          <button type="submit">Tracer</button>
      </form>
    </div>

    <canvas id="graphCanvas"></canvas>

    <hr>

    <!-- Image d’un nombre -->
    <div class="image">
        <input type="number" id="valX" placeholder="Image de : 2">
        <button onclick="calculerImage()">Calculer f(x)</button>
        <span id="resultImage"></span>
    </div>

    <!-- Antécédents -->
    <div class="image">
        <input type="number" id="valY" placeholder="Antécédent(s) de : 4">
        <button onclick="calculerAntecedents()">Chercher x</button>
        <span id="resultAntecedents"></span>
    </div>

    <div class="table-responsive">
      <table id="coordTable">
        <thead>
            <tr><th>x</th><th>f(x)</th></tr>
        </thead>
        <tbody></tbody>
      </table>
      </div>

    <script>
    const ctx = document.getElementById('graphCanvas').getContext('2d');
    let chart = null;
    let currentCompiled = null;

    document.getElementById('function-form').addEventListener('submit', function(e) {
        e.preventDefault();

        const input = document.getElementById('function').value;
        const expr = math.parse(input);
        const compiled = expr.compile();
        currentCompiled = compiled; // <-- mise à jour ici

        const xValues = [];
        const yValues = [];
        const tableHead = document.querySelector('#coordTable thead');
        const tableBody = document.querySelector('#coordTable tbody');
        tableHead.innerHTML = '';
        tableBody.innerHTML = '';

        const rowX = document.createElement('tr');
        const rowY = document.createElement('tr');
        rowX.innerHTML = '<th>x</th>';
        rowY.innerHTML = '<th>f(x)</th>';

        for (let x = -10; x <= 10; x += 1) {
            try {
                const y = compiled.evaluate({ x });
                xValues.push(x);
                yValues.push(y);
                rowX.innerHTML += `<td>${x}</td>`;
                rowY.innerHTML += `<td>${y.toFixed(2)}</td>`;
            } catch (err) {
                rowX.innerHTML += `<td>–</td>`;
                rowY.innerHTML += `<td>Erreur</td>`;
            }
        }

        tableHead.appendChild(rowX);
        tableBody.appendChild(rowY);

        if (chart) chart.destroy();

        chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: xValues,
                datasets: [{
                    data: yValues,
                    borderColor: 'blue',
                    fill: false,
                    tension: 0.1
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    x: { title: { display: true, text: 'Abscisse (x)' } },
                    y: { title: { display: true, text: 'Ordonné (y) ou f(x)' } }
                }
            }
        });
    }); // <-- FIN DU SUBMIT

    function calculerImage() {
        const xVal = parseFloat(document.getElementById('valX').value);
        const resultElem = document.getElementById('resultImage');

        if (!currentCompiled || isNaN(xVal)) {
            resultElem.textContent = "Entrez un x valide et une fonction.";
            return;
        }

        try {
            const y = currentCompiled.evaluate({ x: xVal });
            resultElem.textContent = `f(${xVal}) = ${y.toFixed(2)}`;
        } catch (err) {
            resultElem.textContent = "Erreur de calcul.";
        }
    }

    function calculerAntecedents() {
        const yVal = parseFloat(document.getElementById('valY').value);
        const resultElem = document.getElementById('resultAntecedents');

        if (!currentCompiled || isNaN(yVal)) {
            resultElem.textContent = "Entrez une valeur de f(x) et une fonction.";
            return;
        }

        const antecedents = [];
        for (let x = -100; x <= 100; x += 0.1) {
            const y = currentCompiled.evaluate({ x });
            if (Math.abs(y - yVal) < 0.1) {
                antecedents.push(x.toFixed(2));
            }
        }

        if (antecedents.length > 0) {
            resultElem.textContent = `x tel que f(x) ≈ ${yVal} : ${antecedents.join(", ")}`;
        } else {
            resultElem.textContent = `Aucun antécédent trouvé pour f(x) = ${yVal}.`;
        }
    }
    </script>

</div>

</body>
</html>

Et le fichier style.css :

/*****************
*                *
*    Général     *
*                *
*****************/
/* Reset simple pour partir sur une bonne base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f4f6f8;
    color: #333;
    line-height: 1.6;
    padding: 20px;
}

/* Titre principal */
h1 {
    text-align: center;
    margin: 50px auto 0;
    color: #2c3e50;
}

#chapo {
    text-align: center;
    font-size: 12px;
    margin: 10px 0 10px;
    color: #777;
}

#depot {
    margin: 0px 0 30px;
    text-align: center;
    font-size: 18px;
}

#depot a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
}

#depot a:hover {
    color: #3498db;
}

#depot img {
    height: 20px;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

/* Conteneur principal */
#mathfunc {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Formulaire de saisie de fonction */
#wrapForm {
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

form input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

form button {
    padding: 10px 20px;
    font-size: 16px;
    background: #3498db;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button:hover {
    background: #2980b9;
}

/* Canvas pour le graphique */
canvas {
    width: 100% !important;
    height: 400px !important;
    margin: 30px 0;
}

/* HR de séparation */
hr {
    margin: 30px 0;
    border: none;
    border-top: 1px solid #ddd;
}

/* Zones "Image" et "Antécédents" */
.image {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.image input[type="number"] {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    flex: 0 0 150px;
}

.image button {
    padding: 8px 15px;
    background: #2ecc71;
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.image button:hover {
    background: #27ae60;
}

.image span {
    font-weight: bold;
}

/* Tableau des coordonnées */
#coordTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#coordTable thead {
    background: #3498db;
    color: white;
}

#coordTable th, #coordTable td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 10px;
}

#coordTable tbody tr:nth-child(even) {
    background: #f9f9f9;
}

/* Responsive Design */
@media (max-width: 768px) {
    #mathfunc {
        padding: 20px;
    }

    form {
        flex-direction: column;
        align-items: stretch;
    }

    form input[type="text"], 
    form button {
        width: 100%;
    }

    .image {
        flex-direction: column;
        align-items: stretch;
    }

    .image input[type="number"] {
        flex: 0 0 50px;
    }

    .image input[type="number"],
    .image button,
    .image span {
        width: 100%;
        text-align: center;
    }

    canvas {
        height: 300px !important;
    }

    .table-responsive {
        overflow-x: auto;
    }
    
}

@media (max-width: 480px) {
    h1 {
        font-size: 22px;
    }

    form input[type="text"] {
        font-size: 14px;
    }

    form button {
        font-size: 14px;
    }

    .image input[type="number"] {
        font-size: 14px;
    }

    .image button {
        font-size: 14px;
    }

    #coordTable th, 
    #coordTable td {
        font-size: 12px;
        padding: 8px;
    }

    canvas {
        height: 250px !important;
    }
}

Vous pouvez retrouver l’ensemble de cette application HTML et JS / JavaScript depuis Le dépot GitHub du créa-blog.

Pour aller plus loin en JS :

Live on Twitch

    Articles relatifs

    1. API javascript MediaRecorder et Audio : Coder un dictaphone
      Cet article explore le processus d’enregistrement et de visualisation d’audio en utilisant les API Web Audio et MediaRecorder. Nous allons décomposer un exemple de code et expliquer comment il fonctionne…
    2. Démo API IndexedDB en Javascript : Un gestionnaire de tâches
      IndexedDB en javascript est une API web permettant de stocker des données de manière persistante dans le navigateur du visiteur. Contrairement à localStorage qui est synchrone et limité en taille,…
    3. Tester et valider les entrées d’un formulaire en javascript
      Tester et valider un formulaire en javascript est une étape importante dans le développement web. Elle permet de s’assurer que les données saisies par l’utilisateur sont correctes et complètes avant…
    4. l’API Web Speech en javascript : Lecture audio du contenu
      L’API Web Speech, accessible en Javascript, offre un ensemble d’outils puissants pour intégrer la reconnaissance vocale et la synthèse vocale dans vos applications web. Cette technologie ouvre de nouvelles perspectives…