Bonjour mes amis!Dans cet article, nous allons, comme son nom l'indique, écrire une simple calculatrice JavaScript.Le désir d'écrire une calculatrice m'est venu après avoir regardé un tutoriel sur la création d'une «calculatrice simple», qui s'est avéré loin d'être simple et ne pouvait vraiment rien faire.Notre calculatrice sera vraiment simple (42 lignes de code, y compris les espaces entre les blocs), mais entièrement fonctionnelle et évolutive. Cette merveilleuse bibliothèque (Math.js)sera utilisée pour les calculs . Sans autre introduction, nous passons aux choses sérieuses.Notre balisage ressemble à ceci:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.4/math.js"></script>
<div class="calculator">
<output></output>
</div>
Ici, nous connectons la bibliothèque, créons un conteneur pour la calculatrice et un champ pour les caractères saisis et le résultat.Nous connectons les styles:* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: radial-gradient(circle, skyblue, steelblue);
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
width: 320px;
height: 480px;
background: #eee;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2);
}
output {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 40px;
background: #fff;
margin: 10px auto;
border-radius: 5px;
font-size: 1.4em;
font-weight: bold;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3),
inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}
.keyboard {
height: 440px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}
button {
margin: 0.5em 1em;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
font-size: 1em;
font-weight: bold;
}
Voici ce que nous avons en ce moment: Les
boutons seront générés par programmation.Nous passons au script.Nous définissons un champ pour sortir le résultat et créons un conteneur pour le clavier:const output = document.querySelector('output')
const div = document.createElement('div')
div.classList.add('keyboard')
document.querySelector('.calculator').appendChild(div)
Notre ligne avec des personnages ressemble à ceci:'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='
Convertissez cette chaîne en un tableau et créez des boutons:
'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ')
.map(symbol => {
div.insertAdjacentHTML('beforeend', `<button value="${symbol}">${symbol}</button>`)
})
Nous trouvons les boutons créés et leur ajoutons un gestionnaire d'événements de clic:document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', function () {
calc(this.value)
})
})
Nous voulons également pouvoir saisir des caractères à l'aide du clavier. Pour ce faire, nous devons ajouter le gestionnaire d'événements "frappe" à l'objet "Document" ou "Fenêtre", puis filtrer les valeurs inutiles de la propriété "key" de la clé, par exemple, en utilisant une expression régulière:document.addEventListener('keydown', event => {
if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key)
})
La méthode de correspondance dans ce cas joue le rôle d'un filtre: elle ne permet pas de passer un argument à la fonction calc qui ne correspond pas à la condition qui y est spécifiée.La condition elle-même est la suivante: si la valeur de event.key est l'un des caractères indiqués entre crochets ([]; un nombre de 0 à 9, signes de division, multiplication, addition, soustraction, ouverture, parenthèses fermantes ou un signe égal; barre oblique inverse) - échappement) ou (| - altération) Retour arrière, ou Entrée, puis nous appelons calc avec event.key comme paramètre, sinon nous ne faisons rien (Shift est également supprimé avec succès).Notre fonction de calcul principale (et unique) est la suivante (le code doit être lu de bas en haut):
function calc(value) {
if (value.match(/=|Enter/)) {
try {
output.textContent = Math.trunc(math.evaluate(output.textContent))
} catch {
let oldValue = output.textContent
let newValue = ' '
output.textContent = newValue
setTimeout(() => {
output.textContent = oldValue
}, 1500)
}
} else if (value === 'C') {
output.textContent = ''
} else if (value.match(/CE|Backspace/)) {
output.textContent = output.textContent.substring(0, output.textContent.length - 1)
} else {
output.textContent += value
}
}
En conclusion, quelques mots sur l'évolutivité déclarée et toutes les fonctionnalités.La méthode d'évaluation (anciennement eval) et d'autres méthodes Math.js ont de très grandes capacités. Sur la base de ces fonctionnalités, nous pouvons facilement étendre les fonctionnalités de notre calculatrice en y ajoutant de nouveaux caractères et opérateurs, offrant la possibilité de travailler avec des nombres à virgule flottante (en ajustant le nombre de décimales à l'aide du commutateur et de la méthode «toFixed»), etc.Résultat:Code GitHub .Merci de votre attention. J'espère que vous trouverez quelque chose d'utile pour vous. Bon week-end et bon codage.