Saltar al contenido principal

El Profe Arci – Mtro. Fernando Arciniega –

jQuery

jQuery – Ejercicios básicos 02 – Suma de dos números

Profe Arci

Por Mtro. Fernando Omar Arciniega Martínez · Profe ArciPublicado el 3 marzo, 2016
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í:

suma-de-dos-numeros-jquery

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *