Calculatrice JavaScript – Demander Nombres est une étape essentielle pour commencer à créer une application de calculatrice interactive en JavaScript. Comprendre comment demander et récupérer des valeurs numériques auprès de l’utilisateur vous permet de concevoir des fonctionnalités interactives et dynamiques. Apprenons comment mettre en place cette étape à travers des exemples de code clairs et concis.

Introduction à la Demande de Nombres en JavaScript

Demander des nombres en JavaScript implique l’utilisation de différents éléments HTML pour capturer les entrées utilisateur et des méthodes JavaScript pour traiter et valider ces entrées. En utilisant les fonctions de manipulation DOM en JavaScript, vous pouvez réagir aux actions utilisateur et mettre à jour l’interface en temps réel. Pour plus d’informations sur le DOM en JavaScript, consultez notre article détaillé.

Ajouter les Éléments de Formulaire HTML

Pour commencer, nous devons créer un formulaire simple en HTML contenant les champs nécessaires pour demander des nombres à l’utilisateur. Voici un exemple de code HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculatrice JavaScript</title>
</head>
<body>
    <form id="calculator">
        <label for="number1">Nombre 1:</label>
        <input type="text" id="number1" name="number1">
        <br>
        <label for="number2">Nombre 2:</label>
        <input type="text" id="number2" name="number2">
        <br>
        <input type="button" value="Calculer" onclick="calculate()">
    </form>
    <div id="result"></div>
</body>
</html>
HTML

Ajouter le Code JavaScript pour Récupérer les Nombres

Ensuite, nous allons ajouter un script JavaScript pour récupérer les valeurs des champs de texte et les traiter lorsque l’utilisateur clique sur le bouton de calcul. Le script suivant montre comment obtenir les valeurs des champs et les afficher :

<script>
function calculate() {
    // Récupérer les valeurs des champs de texte
    var num1 = document.getElementById('number1').value;
    var num2 = document.getElementById('number2').value;

    // Convertir les valeurs en nombres
    num1 = parseFloat(num1);
    num2 = parseFloat(num2);

    // Vérifier si les valeurs sont des nombres
    if (isNaN(num1) || isNaN(num2)) {
        alert('Veuillez entrer des nombres valides.');
        return;
    }

    // Calculer la somme
    var sum = num1 + num2;

    // Afficher le résultat
    document.getElementById('result').innerText = 'Le résultat est : ' + sum;
}
</script>
JavaScript

Valider les Entrées de l’Utilisateur

Pour améliorer notre calculatrice, nous devons nous assurer que les entrées utilisateur sont valides. Le script JavaScript ci-dessus inclut déjà une vérification simple pour vérifier si les valeurs saisies sont des nombres. Mais, afin de garantir une meilleure expérience utilisateur, nous pourrions utiliser des techniques de validation plus avancées :

<script>
function calculate() {
    var num1 = document.getElementById('number1').value;
    var num2 = document.getElementById('number2').value;

    if (!num1 || !num2) {
        alert('Veuillez remplir les deux champs.');
        return;
    }

    num1 = parseFloat(num1);
    num2 = parseFloat(num2);

    if (isNaN(num1) || isNaN(num2)) {
        alert('Veuillez entrer des nombres valides.');
        return;
    }

    var sum = num1 + num2;
    document.getElementById('result').innerText = 'Le résultat est : ' + sum;
}
</script>
JavaScript

Mettre à Jour l’Interface Utilisateur en Temps Réel

Pour une meilleure interactivité, nous pouvons mettre à jour l’interface utilisateur en temps réel, par exemple, en affichant le résultat dès que l’utilisateur entre des valeurs. Voici comment améliorer notre script pour qu’il calcule automatiquement la somme à chaque changement de valeur :

<script>
document.getElementById('number1').addEventListener('input', calculate);
document.getElementById('number2').addEventListener('input', calculate);

function calculate() {
    var num1 = document.getElementById('number1').value;
    var num2 = document.getElementById('number2').value;

    if (!num1 || !num2) {
        document.getElementById('result').innerText = '';
        return;
    }

    num1 = parseFloat(num1);
    num2 = parseFloat(num2);

    if (isNaN(num1) || isNaN(num2)) {
        document.getElementById('result').innerText = 'Veuillez entrer des nombres valides.';
        return;
    }

    var sum = num1 + num2;
    document.getElementById('result').innerText = 'Le résultat est : ' + sum;
}
</script>
JavaScript

Création d’une Fonction pour le Calcul

En plus de la somme, il est souvent utile de pouvoir effectuer d’autres types de calculs. Pour cela, nous pouvons créer une fonction JavaScript dédiée à chaque opération mathématique. Par exemple, nous pouvons créer des fonctions pour l’addition, la soustraction, la multiplication et la division :

<script>
function add(num1, num2) {
    return num1 + num2;
}

function subtract(num1, num2) {
    return num1 - num2;
}

function multiply(num1, num2) {
    return num1 * num2;
}

function divide(num1, num2) {
    if (num2 === 0) {
        alert('La division par zéro est interdite.');
        return null;
    }
    return num1 / num2;
}

function calculate() {
    var num1 = parseFloat(document.getElementById('number1').value);
    var num2 = parseFloat(document.getElementById('number2').value);
    var operation = document.getElementById('operation').value;

    if (isNaN(num1) || isNaN(num2)) {
        alert('Veuillez entrer des nombres valides.');
        return;
    }

    var result;
    switch (operation) {
        case 'add':
            result = add(num1, num2);
            break;
        case 'subtract':
            result = subtract(num1, num2);
            break;
        case 'multiply':
            result = multiply(num1, num2);
            break;
        case 'divide':
            result = divide(num1, num2);
            break;
        default:
            alert('Opération inconnue');
            return;
    }

    document.getElementById('result').innerText = 'Le résultat est : ' + result;
}
</script>
JavaScript

Ajouter une Sélection pour les Opérations

Pour intégrer les fonctions créées pour les différentes opérations, nous devons ajouter un sélecteur dans notre formulaire HTML. Voici comment mettre à jour notre formulaire pour inclure le choix de l’opération :

<form id="calculator">
    <label for="number1">Nombre 1:</label>
    <input type="text" id="number1" name="number1">
    <br>
    <label for="number2">Nombre 2:</label>
    <input type="text" id="number2" name="number2">
    <br>
    <label for="operation">Opération:</label>
    <select id="operation" name="operation">
        <option value="add">Addition</option>
        <option value="subtract">Soustraction</option>
        <option value="multiply">Multiplication</option>
        <option value="divide">Division</option>
    </select>
    <br>
    <input type="button" value="Calculer" onclick="calculate()">
</form>
<div id="result"></div>
HTML

Utilisation des Boîtes de Dialogue en JavaScript

Il est souvent utile de utiliser des boîtes de dialogue en JavaScript pour interagir avec l’utilisateur. Les boîtes de dialogue telles que alert(), confirm() et prompt() permettent de communiquer des informations, recueillir des réponses ou confirmer des actions.

Categorized in:

Javascript,

Tagged in: