jQuery – Ejercicios básicos 02 – Suma de dos números
Para este ejercicio también haremos uso de la biblioteca jQuery, podemos descargarla desde la página oficial o desde esta web la versión 1.12.1 Una vez descargado ocuparemos los archivos jquery.js y jquery.min.js
Suma de dos números
Para realizar este ejercicio debemos crear primero un documento HTML con sus estructura básica.
<!DOCTYPE html> <html lang="es"> <head> <title>Titulo de la web</title> <meta charset="utf-8" /> </head> <body> </body> </html>
Dentro de body creamos un formulario sencillo para introducir el texto y enviar la variable mediante un botón:
<form> <label for="valorA">Introduce primer valor</label> <input type="text" name="valorA" id="valorA" /> <label for="valorb">Introduce segundo</label> <input type="text" name="valorB" id="valorB" /> </form> <button id="calcula" >Calcular</button>
Vamos a añadir un script que realice lo siguiente:
//Función para Sumar
function operacion(a,b){ //Creamos la función que recoje los dos parámetros
var resultado=a+b; //Sumamos los valores
alert('La suma de '+ a +' más '+b+' es igual a ' +resultado); //Mostramos el mensaje con el resultado
}
jQuery('#calcula').click(function(){ //Al hacer clic sobre el botón ejecutamos la función
var num1 = parseInt(jQuery('#valorA').val(),10); //Recogemos el primer valor en formato número
var num2 = parseInt(jQuery('#valorB').val(),10); //Recogemos el segundo valor en formato número
operacion(num1,num2); //Llamamos a la función 'operacion' pasándole los dos valores recogidos
El Script que añadiremos después del formulario quedará así:
<script type="text/javascript">
jQuery(document).ready(function() {
function operacion(a,b){
var resultado=a+b;
alert('La suma de '+ a +' más '+b+' es igual a ' +resultado);
}
jQuery('#calcula').click(function(){
var num1 = parseInt(jQuery('#valorA').val(),10);
var num2 = parseInt(jQuery('#valorB').val(),10);
operacion(num1,num2);
});
});
</script>
Hay que poner los enlaces a la biblioteca jQuery en el head:
<script src="jquery.js"></script> <script src="jquery.min.js"></script>
La vista previa del formulario y el mensaje al dar clic quedará así:
