JavaScript

Suma de pares e impares en JavaScript

Suma de pares e impares en JavaScript. En ocasiones necesitamos sumar números pares o impares en nuestros sistemas de manera dinámica y el recomendado es el lenguaje JavaScript porque no satura nuestro servidor al no refrescar el navegador.

Suma de pares e impares en JavaScript

Es una opción muy recomendada. A continuación, veremos 4 formas para sumar números pares e impares en nuestro navegador web.

Primera forma: usando array

Tenemos que darle un array de números para que el script procese los valores y podemos usar usar Array.prototype.reduce de esta manera:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const [odds, evens] = nums.reduce(
([odds, evens], cur) =>
cur % 2 === 0 ? [odds, evens + cur] : [odds + cur, evens],
[0, 0]
);

console.log(odds);
console.log(evens);

Salida en el navegador o consola

25
20

Segunda forma: Usando función

El valor que devuelva de su devolución de llamada reducida será el valor de acc en la próxima invocación/iteración de su matriz de números.

Actualmente, su cuenta comienza como un objeto, pero como solo está devolviendo un número de su primera iteración, todas las iteraciones posteriores usarán un número como cuenta, que no tiene propiedades .even .odd.

En su lugar, podría devolver un nuevo objeto con propiedades pares/impares actualizadas para que acc permanezca como un objeto en todas las iteraciones:

const nums = [1,2,3,4,5,6,7,8,9];

function getOddEven(numbers){
return numbers.reduce((acc, cuu) => cuu % 2 === 0
? {odd: acc.odd, even: acc.even + cuu}
: {even: acc.even, odd: acc.odd+cuu},
{even:0, odd:0});
}

console.log(getOddEven(nums));

Salida en el navegador

{
"even": 20,
"odd": 25
}

Tercera forma: Ciclo FOR

Primero creamos la variable y luego aplicamos el ciclo for para armar el código JavaScript. Sin embargo, dentro del ciclo FOR podemos hacer uso de una condicional para separar los números pares e impares.

var num1 = 5, 

    pares = 0; 

    impares = 0; 

 

for(var i = num1; i >= 0; i--){ 

    if(i % 2 == 0){ 

        pares = pares + i; 

    }else{ 

        impares = impares + i; 

    } 

} 

console.log(pares) 

console.log(impares)

Cuarta Forma: Función SplitFunction

Aquí les dejare un ejemplo completo para poder sumar los números pares e impares. Por lo tanto, el siguiente script lo que hace es solicitar al usuario una serie de números separados por una coma y luego presionar un botón HTML para poder evaluar y sumar.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Suma de números Pares e Impares</title>
<style>
body {
background: #ffffff;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: #c2c2c2;
text-transform: uppercase;
}
#center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-size: 24px;
}
#myDiv {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
[type=text] {
width: 250px;
padding: 12px 20px;
margin: 15px 10px;
display: inline-block;
border: 2px solid black;
box-sizing: border-box;
outline: none;
}
button {
outline: none;
width: 250px;
background-color: white;
color: black;
padding: 10px 20px;
margin: 15px 0;
cursor: pointer;
border: 2px solid black;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-size: 16px;
position: relative;
}
button::before {
content: "";
width: calc(100% + 12px);
height: calc(100% - 12px);
background-color: white;
position: absolute;
top: 6px;
left: -5px;
transform: ScaleX(1);
transition: all 0.8s ease-in-out;
}
button::after {
content: "";
width: calc(100% - 12px);
height: calc(100% + 12px);
background-color: white;
position: absolute;
top: -5px;
left: 6px;
transform: ScaleY(1);
transition: all 0.8s ease-in-out;
}
#mySpan {
z-index: 3;
color: black;
position: relative;
letter-spacing: 2px;
font-weight: 600;
}
button:hover::after {
transform: ScaleX(0);
}
button:hover::before {
transform: ScaleY(0);
}
#InnerDiv {
font-size: 18px;
color: black;
text-align: center;
}
</style>
</head>

<body translate="no">
<div id="center">
<div id="myDiv">
<p>Introduce tus números separados por una coma.</p>
<div id="myForm" name="ThisForm">
<input type="text" id="myNumbers" placeholder="1,2,3,4..." autofocus>
<button> <span id="mySpan" onclick="SplitFunction()">CLICK ME</span> </button>
</div>
<p id="InnerDiv"></p>
</div>
</div>
<script>
window.HUB_EVENTS={ASSET_ADDED:"ASSET_ADDED",ASSET_DELETED:"ASSET_DELETED",ASSET_DESELECTED:"ASSET_DESELECTED",ASSET_SELECTED:"ASSET_SELECTED",ASSET_UPDATED:"ASSET_UPDATED",CONSOLE_CHANGE:"CONSOLE_CHANGE",CONSOLE_CLOSED:"CONSOLE_CLOSED",CONSOLE_EVENT:"CONSOLE_EVENT",CONSOLE_OPENED:"CONSOLE_OPENED",CONSOLE_RUN_COMMAND:"CONSOLE_RUN_COMMAND",CONSOLE_SERVER_CHANGE:"CONSOLE_SERVER_CHANGE",EMBED_ACTIVE_PEN_CHANGE:"EMBED_ACTIVE_PEN_CHANGE",EMBED_ACTIVE_THEME_CHANGE:"EMBED_ACTIVE_THEME_CHANGE",EMBED_ATTRIBUTE_CHANGE:"EMBED_ATTRIBUTE_CHANGE",EMBED_RESHOWN:"EMBED_RESHOWN",FORMAT_FINISH:"FORMAT_FINISH",FORMAT_ERROR:"FORMAT_ERROR",FORMAT_START:"FORMAT_START",IFRAME_PREVIEW_RELOAD_CSS:"IFRAME_PREVIEW_RELOAD_CSS",IFRAME_PREVIEW_URL_CHANGE:"IFRAME_PREVIEW_URL_CHANGE",KEY_PRESS:"KEY_PRESS",LINTER_FINISH:"LINTER_FINISH",LINTER_START:"LINTER_START",PEN_CHANGE_SERVER:"PEN_CHANGE_SERVER",PEN_CHANGE:"PEN_CHANGE",PEN_EDITOR_CLOSE:"PEN_EDITOR_CLOSE",PEN_EDITOR_CODE_FOLD:"PEN_EDITOR_CODE_FOLD",PEN_EDITOR_ERRORS:"PEN_EDITOR_ERRORS",PEN_EDITOR_EXPAND:"PEN_EDITOR_EXPAND",PEN_EDITOR_FOLD_ALL:"PEN_EDITOR_FOLD_ALL",PEN_EDITOR_LOADED:"PEN_EDITOR_LOADED",PEN_EDITOR_REFRESH_REQUEST:"PEN_EDITOR_REFRESH_REQUEST",PEN_EDITOR_RESET_SIZES:"PEN_EDITOR_RESET_SIZES",PEN_EDITOR_SIZES_CHANGE:"PEN_EDITOR_SIZES_CHANGE",PEN_EDITOR_UI_CHANGE_SERVER:"PEN_EDITOR_UI_CHANGE_SERVER",PEN_EDITOR_UI_CHANGE:"PEN_EDITOR_UI_CHANGE",PEN_EDITOR_UI_DISABLE:"PEN_EDITOR_UI_DISABLE",PEN_EDITOR_UI_ENABLE:"PEN_EDITOR_UI_ENABLE",PEN_EDITOR_UNFOLD_ALL:"PEN_EDITOR_UNFOLD_ALL",PEN_ERROR_INFINITE_LOOP:"PEN_ERROR_INFINITE_LOOP",PEN_ERROR_RUNTIME:"PEN_ERROR_RUNTIME",PEN_ERRORS:"PEN_ERRORS",PEN_LIVE_CHANGE:"PEN_LIVE_CHANGE",PEN_LOGS:"PEN_LOGS",PEN_MANIFEST_CHANGE:"PEN_MANIFEST_CHANGE",PEN_MANIFEST_FULL:"PEN_MANIFEST_FULL",PEN_PREVIEW_FINISH:"PEN_PREVIEW_FINISH",PEN_PREVIEW_START:"PEN_PREVIEW_START",PEN_SAVED:"PEN_SAVED",POPUP_CLOSE:"POPUP_CLOSE",POPUP_OPEN:"POPUP_OPEN",POST_CHANGE:"POST_CHANGE",POST_SAVED:"POST_SAVED",PROCESSING_FINISH:"PROCESSING_FINISH",PROCESSING_START:"PROCESSED_STARTED"},"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(E){this._loopExits[E]=!0},shouldStopLoop:function(E){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[E])return!1;var _=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=_,!1;var o=_-this.timeOfFirstCallToShouldStopLoop;if(o<this.START_MONITORING_AFTER)return!1;if(o>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(E,_)}catch(N){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var E={topic:HUB_EVENTS.PEN_ERROR_INFINITE_LOOP,data:{line:this._findAroundLineNumber()}};parent.postMessage(E,"*")}else this._throwAnErrorToStopPen()}catch(_){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomboom/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. More details and workarounds at https://blog.codepen.io/2016/06/08/can-adjust-infinite-loop-protection-timing/"},_findAroundLineNumber:function(){var E=new Error,_=0;if(E.stack){var o=E.stack.match(/boomboom\S+:(\d+):\d+/);o&&(_=o[1])}return _},_checkOnInfiniteLoop:function(E,_){if(!this._loopTimers[E])return this._loopTimers[E]=_,!1;var o;if(_-this._loopTimers[E]>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+E},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(E){var _=window.CP.PenTimer.shouldStopLoop(E);return!0===_&&console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. More details at "),_},window.CP.exitedLoop=function(E){window.CP.PenTimer.exitedLoop(E)};
</script>
<script id="rendered-js">
//Se declara la función "Split function"
function SplitFunction() {

var IntNumbers = document.getElementById("myNumbers").value;
//Se le piden al usuario sus datos

//var IntNumbers = prompt ("Ingrese acá sus números separados por una coma", "1,2,3,4");

//En la primera línea se dividen todos los datos separados por una "," para trabajarlos individualmente a continuación, se guardan en un array.
/*En la 2da se mide al tamaño del Array, con la intención de que sin importar la cantidad de datos que se ingrese, el código siempre funcione.*/
var IntDivNumbers = IntNumbers.split(",");
var IntSplitLong = IntDivNumbers.length;

//Se declara la variable "Prove Numbers" y se le pasan las variables creadas anteriormente para trabajar con ellas.
ProveNumbers(IntSplitLong, IntDivNumbers);
}

function ProveNumbers(IntSplitLong, IntDivNumbers) {

/*Se crean estos dos arrays, con la intención de recoger todos los registros que si cumplan las condiciones del ejercicio
(que sean números)*/

var RealNumbers = new Array();
var ArrNoNumber = new Array();
var ArrFloats = new Array();

/*La inicialización del Loop se hará con una cantidad de inierancias de "IntSplitLong-1", de esa manera se analizará cada
valor separado por una coma ingresado por los usuario (el "-1" es para eliminar la cuenta del "0")*/
for (i = 0; i <= IntSplitLong - 1; i++) {if (window.CP.shouldStopExecution(0)) break;

/*Las variables se crean con la intención de obtener los carácteres que sean realmente números, se crea una variable con la propiedad "Number", así todo aquello que no sea un carácter dará como resultado la palabra clave "NaN".

La otra función capta cualquier STR por el cual se esté pasando*/

var IntTempo = Number(IntDivNumbers[i]);
var StrTempo = IntDivNumbers[i];

/*La condición indica que si el resultado es "NaN" entonces tome los strings ingresados por el usuario y los guarde en un array llamado "ArrNoNumber"*/
if (isNaN(IntTempo)) {
ArrNoNumber.push(StrTempo);

/*Por otra parte, se indica que en caso del resultado no ser "NaN" se debe guardar en otro Array llamado "RealNumbers", que guardará todos los números reales ingresados por el usuario*/
} else {

/*Este If anidado es para comprobar que el dato introducido no sea un valor decimal, en caso de ser un valor decimal, convierte el número decimal ingresado en un string, y dentro del string se busca un ".", en caso de que si se encuentre, entonces el valor es un decimal. No se hizo con "Switch" porque el mismo no evalúa variables como "isNaN" en condicionales compuestos.*/
if (IntTempo.toString().indexOf('.') != -1) {
ArrFloats.push(StrTempo);
console.log(StrTempo);

} else {
RealNumbers.push(IntTempo);
}
}
}

/*Se crea una variable que mida la cantidad de los datos que realmente son números*/window.CP.exitedLoop(0);
var IntRealNumbersLong = RealNumbers.length;

/*Se crea esta condición con la intención de ejecutar la función correcta. Si el número de valores que "si son números" coinciden con el total de datos ingresados por el usuario, se irá a la función "PairOrImpair", donde se estudiarán los datos. De lo contrario irá a "End Loop" donde se dará un mensaje dependiendo del tipo de valor introducido.*/
if (IntSplitLong === IntRealNumbersLong) {
PairOrImpar(IntDivNumbers, IntSplitLong);

} else {
EndLoop(ArrNoNumber, ArrFloats);
}
}

function PairOrImpar(IntDivNumbers, IntSplitLong) {

/*Aquí se crean las variables "PairNumbes", donde se guardarán los valores pares e "UnpairNumbers", donde se hará lo propio con los impares*/
var PairNumbers = 0;
var TotalPair = 0;
var UnpairNumbers = 0;
var TotalUnpair = 0;

/*Se analiza el largo de los datos ingresados - 1 para la cantidad de itinerancias*/
for (i = 0; i <= IntSplitLong - 1; i++) {if (window.CP.shouldStopExecution(1)) break;

/*Esta variable nace con el fin de captar cada número introducido por el usuario*/
var IntTempo = Number(IntDivNumbers[i]);

/*Esto es para saber si el número es par, de ser así se sumará ese número a la variable "PairNumbers", que se inicializa en 0 y se irá reescribiendo a sí misma.*/
if (IntTempo % 2 === 0) {
PairNumbers = PairNumbers + IntTempo;
TotalPair = TotalPair + 1;

/*Lo propio pero con los impares*/
} else {

UnpairNumbers = UnpairNumbers + IntTempo;
TotalUnpair = TotalUnpair + 1;
}
}
/*Se toman las dos variables y se introducen dentro de una cadena de texto para mostrar en pantalla*/window.CP.exitedLoop(1);
document.getElementById("InnerDiv").innerHTML = "La suma de tus números pares es: " + PairNumbers + ". E introdujiste " + TotalPair + " números pares. </br>Y La suma de tus números impares es: " + UnpairNumbers + ". E introdujiste " + TotalUnpair + " números impares.";

}
/*Se declada EndLoop*/
function EndLoop(ArrNoNumber, ArrFloats) {
/*Se cuenta el número de datos introducidos por el usuario que no sean números*/
var LongNoNumber = ArrNoNumber.length;
var LongFloats = ArrFloats.length;

/*Combinación de mensajes dependiendo de la cantidad de carácteres incorrectos introducidos.*/

switch (true) {
case LongNoNumber === 1 && LongFloats === 1:
window.alert("Este caracter no es un número: " + ArrNoNumber + ". Y este no es un número entero: " + ArrFloats + ".");
break;

case LongNoNumber > 1 && LongFloats > 1:
window.alert("Estos carácteres no son números: " + ArrNoNumber + ". Y estos no son números enteros: " + ArrFloats + ".");
break;

case LongNoNumber > 1:
window.alert("Estos carácteres no son números: " + ArrNoNumber + ".");
break;

case LongFloats > 1:
window.alert("Estos caractes no son números enteros: " + ArrFloats + ".");
break;

case LongNoNumber === 1:
window.alert("Éste carácter no es un número: " + ArrNoNumber + ".");
break;

case LongFloats === 1:
window.alert("Éste carácter no es un número entero: " + ArrFloats + ".");
break;}

}
//# sourceURL=pen.js
</script>
</body>
</html>

Conclusión

En este articulo hemos aprendido a sumar números impares y pares haciendo uso del lenguaje JavaScript. Además, hemos visto 4 formas para lograr el mismo objetivo.

Hemos usado array, funciones, ciclos para los diferentes ejemplos propuestos.

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad