Mtro. Fernando Arciniega

Apoyame con un clic en los anuncios, me ayudas a seguir generando contenido de calidad. ¡Gracias por tu apoyo!

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

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

jQuery – Ejercicios básicos 02 – Suma de dos números
Print Friendly, PDF & Email

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.jsjquery.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 una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.