Conteo de JavaScript
JavaScript se ha vuelto muy popular recientemente como lenguaje de secuencias de comandos para el desarrollo web. Podemos hacer muchas cosas o proyectos usando JavaScript, y proporciona muchas funciones para lograrlos.
Conteo de JavaScript
Contar es muy esencial para nosotros en la vida cotidiana. Usando lenguajes de programación, podemos contar varias cosas para simplificar las cosas.
JavaScript también nos proporciona las funcionalidades para realizar el conteo de varias actividades. Por lo tanto, muchas implementaciones son más fáciles de construir con esto.
Probemos un código simple donde contamos números del 0 al 10. Usaremos un bucle for para lograr el objetivo.
for (let count = 0; count <= 10; count++) {
console.log(count);
}
El código anterior cuenta de 0 a 10, incluido 0. Obtendremos el resultado que se muestra a continuación si ejecutamos el código.
Producción:
Como puede ver, el código imprimirá los números del 1 al 10, incluidos los números iniciales y finales.
Podemos cambiar el código anterior si queremos tener números pares. Consulte el código modificado a continuación.
for (count = 0; count <= 10; count += 2) {
console.log(count);
}
Ahora, intentemos ejecutar este código para ver el resultado.
Producción:
Como se muestra en el resultado anterior, obtenemos todos los números pares del 0 al 10, incluidos el 0 y el 10. Si necesitamos todos los números impares, podemos cambiar el valor inicial a 1 y ejecutar el código como se muestra a continuación.
for (count = 1; count <= 10; count += 2) {
console.log(count);
}
Nos dará todos los números pares dentro de unos límites (del 1 al 10), incluido el 1.
Producción:
Entonces, esas son las principales aplicaciones de contar en JavaScript. Ahora, probemos con un ejemplo diferente.
Imagínese, necesitamos un contador que se pueda aumentar con un botón. Podemos lograr este objetivo rápidamente con el concepto de conteo usando JavaScript con la ayuda de HTML.
En primer lugar, debemos construir un botón y un cuadro de texto usando la etiqueta <input>. El cuadro de texto es para mostrar el número, y el botón aumenta el número al hacer clic con el mouse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counting</title>
</head>
<body>
<div>
<!-- Creating the text box -->
<input type="text" value="0" id="countVal" readonly>
<!-- Creating the increase button -->
<input type="button" value="+" onclick="increase()">
</div>
<script src="main.js"></script>
</body>
</html>
En el código anterior, tenemos que crear un cuadro de texto con countVal como ID y 0 como valor inicial. Además, lo hicimos no editable usando el atributo solo lectura.
Luego, creamos un botón para aumentar el valor a través de la función aumentar () al hacer clic con el mouse.
El código anterior muestra el siguiente resultado.
Producción:
Ahora, podemos implementar el código JavaScript en un archivo separado para que el botón sea interactivo.
let count = 0;
let countValues = document.getElementById('countVal');
// The function to increase the count
function increase() {
count++;
countValues.value = count;
}
En primer lugar, hemos declarado una variable llamada contar para ayudar en el proceso de conteo. Luego, usamos el método getElementById() para pasar los valores al cuadro de texto desde el archivo de script.
Posteriormente, el método getElementById() ha asignado una variable llamada countValues.
Para que el botón se comportara como esperábamos, creamos una función aumentar(). Cada vez que un usuario hace clic en el botón, el valor del conteo aumenta en uno y luego asigna ese valor al valor en el cuadro de texto.
Ahora, al ejecutar el código, podemos obtener el siguiente resultado.
Producción:
El valor de la variable contar aumenta, como en el caso anterior, cada vez que hacemos clic en el botón.
Modifiquemos nuestro trabajo agregando otro botón para disminuir el valor e implementando una función separada.
<input type="button" value="-" onclick="decrease()">
Podemos agregar el código anterior dentro de la etiqueta <div>, y aquí está el código HTML completo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Counting</title>
</head>
<body>
<div>
<!-- Creating the text box -->
<input type="text" value="0" id="countVal" readonly>
<!-- Creating the increase button -->
<input type="button" value="+" onclick="increase()">
<!-- Creating the decrease button -->
<input type="button" value="-" onclick="decrease()">
</div>
<script src="main.js"></script>
</body>
</html>
Luego, podemos implementar la función de JavaScript para ese botón de la siguiente manera.
function decrease() {
count--;
countValues.value = count;
}
Código JavaScript completo:
let count = 0;
let countValues = document.getElementById('countVal');
// The function to increase the count
function increase() {
count++;
countValues.value = count;
}
// The function to decrease the count
function decrease() {
count--;
countValues.value = count;
}
Si ejecutamos el código, obtendremos el resultado esperado a continuación.
Producción:
Como en el resultado anterior, cada vez que hacemos clic en el botón de disminución, disminuye el número en uno.
Conclusión
En este artículo, discutimos el uso de JavaScript para aplicar el concepto de conteo para varios casos de uso. Usamos un bucle for para lograrlos y obtuvimos los resultados esperados.
Además, observamos un caso de uso diferente en el que usamos un cuadro de texto y dos botones para aumentar y disminuir el valor al hacer clic con el mouse. Usamos HTML para construirlos e implementamos un código JavaScript con dos funciones para hacer que los botones fueran interactivos.
Podemos aplicar el concepto de conteo para varias actividades en muchos más métodos.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.