Exemple de codi font en JavaScript d’un mètode per a realitzar operacions matemàtiques per sumar, restar, multiplicar i dividir, dos nombres donats en dues caixes de text. També verificarem que l’usuari introdueix aquests números en aquestes caixes.
Descripció de l’exemple
El que fa aquest exemple és cridar en l’esdeveniment onClick de cada input, a el mètode “operacions () “, passant-li com a paràmetre el tipus d’operació matemàtica que utilitzarem en cada cas, i realitzant aquesta operació mostrant-la en un alert.
Per veure aquest exemple una mica més avançat i emular l’funcionament d’una calculadora bàsica, podem fer-ho al següent exemple:
Codi
Aquest seria el mètode de JavaScript amb el qual es farien les diferents operacions:
function operaciones(op){ var ops = { sumar: function sumarNumeros(n1, n2) { return (parseInt(n1) + parseInt(n2)); }, restar: function restarNumeros(n1, n2) { return (parseInt(n1) - parseInt(n2)); },multiplicar: function multiplicarNumeros(n1, n2) { return (parseInt(n1) * parseInt(n2)); }, dividir: function dividirNumeros(n1, n2) { return (parseInt(n1) / parseInt(n2)); } }; var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value;//Comprobamos si se ha introducido números en las cajasif (isNaN(parseFloat(document.getElementById('num1').value))) {document.getElementById('resultado').innerHTML="<span style='color: red;'>Por favor, escriba un número 1</span>";document.getElementById("num1").innerText = "0";document.getElementById("num1").focus();} else if (isNaN(parseFloat(document.getElementById('num2').value))) {document.getElementById('resultado').innerHTML="<span style='color: red;'>Por favor, escriba un número 2</span>";document.getElementById("num2").innerText = "0";document.getElementById("num2").focus();}else {//Si se han introducido los números en ámbas cajas, operamos:switch(op) {case 'sumar':var resultado = ops.sumar(num1, num2);document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";break;case 'restar':var resultado = ops.restar(num1, num2);document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";break;case 'multiplicar':var resultado = ops.multiplicar(num1, num2);document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";break;case 'dividir':var resultado = ops.dividir(num1, num2);document.getElementById('resultado').innerHTML="<span style='color: green;'>"+resultado+"</span>";break;}}}I aquest seria el codi HTML de l’formulari on realitzarem les operacions:
<form>Número 1: <input type="number" />Número 2: <input type="number" /><p style="color: green;"></p><br /><br /><input type="button" value="SUMAR" onclick="operaciones('sumar'); return false;" /><br /><input type="button" value="RESTAR" onclick="operaciones('restar'); return false;" /><br /><input type="button" value="MULTIPLICAR" onclick="operaciones('multiplicar'); return false;" /><br /><input type="button" value="DIVIDIR" onclick="operaciones('dividir'); return false;" /></form>