INFORME NÓMINA CON JAVASCRIPT

SENA
Centro de Gestión de Mercados, Logística y Tecnologías de la Información
Análisis y Desarrollo de Sistemas de Información – ADSI
Ficha: 2056293
Bogotá D.C
2020
GFPI-F-019 V03
 INTRODUCCIÓN

El objetivo de este informe tiene como fin explicar el proceso para generar una nómina con el lenguaje

de programación JavaScript, teniendo en cuenta las fórmulas para crear una nómina en un Excel y por

medio de consultas en internet, libros o cualquier artículo.

Se tiene en cuenta el proceso realizado en las clases de JavaScript con el uso de métodos, arrays,

funciones, condicionales y cualquier otro proceso realizado en el programa de formación.

 DESARROLLO

Para explicar el proceso de la nómina se tiene en cuenta los siguientes archivos y carpetas que se

llevaron a cabo para la construcción de este proyecto:

Todo el proceso se lleva a cabo en un archivo denominado “index.html” y en carpetas con procesos de

JavaScript que están en una carpeta llamada “js”. Las demás carpetas y archivos pertenecen a una

plantilla para el diseño de este proyecto y por ende poco afecta en el proceso de la nómina.
Al ingresar al programa tiene como inicio la siguiente vista:

Esta vista es el login de la página que permite ingresar a la creación de la nómina, al no contar con una

base de datos solo cuenta con un usuario y contraseña definido para entrar.
Si intenta ingresar con un usuario y clave incorrecta el sistema no le permite continuar con el proceso y

le indica un número de intentos disponibles para poder acceder.

Si supera el límite de intentos el aplicativo ya le

niega el acceso al sistema.

La vista de este login se encuentra en la siguiente sección del archivo “index.html”:

En esta sección solo muestra la vista del login, para que pueda funcionar debe ser llamado el archivo en

que se codificó el proceso de la vista.

En el archivo login.js se evidencia el posterior proceso:

Primero se crea una variable que será el contador de los intentos para ingresar. Después se crea una
función que será de ejecutar el proceso del login.

Dentro de esta función se crean tres variables que se encargan de traer la información ingresada en el
login y carga el intento que ha hecho el usuario.

Cuando ya se hayan definido las variables entra en una condición que verifica los números de intentos
sean menores o iguales a tres. De ser esto correcto entra a otra condición que verifica que el usuario y la
contraseña sean correctos para que permita mostrar la nómina.

De lo contrario que el usuario o la contraseña no exista entra en otra condición que verifica si el número
de intentos es menor a tres, de ser cierto, cuenta con la posibilidad de volver a ingresar los datos, de lo
contrario se le negara el intento, todo esto mediante alertas.

Al ingresar correctamente los datos en el login mostrara la siguiente vista:

Esta vista una sección que muestra la nómina de cada empleado con los datos que se han ingresado en

el formulario y procesado en el sistema.

Al igual que el login, esta vista se encuentra en el archivo index.html porque durante el proceso de

ingresar los datos del login el sistema esconde ese login para mostrar la nómina al usar la clase display

como fue anteriormente mostrado.

La única diferencia con el login es que no trae el mismo archivo JavaScript para hacer sus funciones si

no que usa los archivos validación.js y app.js.

Y son llamadas las funciones de la siguiente manera:

Ese botón se encarga de almacenar la información mostrarla al lado del formulario.

Las funciones que llama son para mostrar una vista con una parte de la nómina de los empleados

dependiendo del botón seleccionado.

Antes de acceder a una vista se debe registrar los datos de un empleado en el formulario del programa.

Para que se pueda validar el registro se tiene en cuenta el archivo app.js que se encarga de almacenar

los datos en arrays.

Primero se crean los arrays como es mostrado en la anterior imagen para almacenar la información

registrada que es ejecutada en la función guardar ().

En la función guardar se evidencia el almacenamiento de los datos registrados en variables. Para que

sea almacenado en un arreglo se utiliza el método push en los arreglos.

Cuando almacene los datos en los arrays realiza una condición que verifica a cual ventana o vista debe

mostrar la página.
En este caso la vista entra a la condición de “vertodo” al estar definida como predeterminada al

principio del archivo.

Antes de finalizar el proceso la función se encarga de limpiar el formulario para registrar la nómina del

siguiente empleado.

Cuando acabe el proceso de la función va a función que llama según la condición que haya validado. La

función que entra en este caso es la función llamada todo ().

Esta función se encarga primeramente de asignar la variable ver como “vertodo” y consecutivamente

llama una función llamada borrarTabla () que se encarga de no mostrar ningún dato en caso de que el

usuario cambie de vista.

Consecutivamente se crean dos variables una para que cada registro se le asigne un numero para modificar sus

datos y otra variable para insertar el encabezado de la tabla de la vista.

Al crearse esas variables con el método insertCell () se puede ingresar la información de cada nomina

realizada, aunque en este caso solo es el encabezado de la tabla.

Para que se registre la nómina se hace un ciclo for que termina cuando no haya más registros en los

arrays. Y se cran dos variables más, una para agregar registrar el cuerpo de la tabla y otra para que

agregue una fila con los registros de cada nómina.

Consecutivamente con el mismo método insertCell () crea una celda para que muestre una parte de la

nómina, además crea un modal en la que se pueda detallar la información de la nómina según el registro

seleccionado.
Con esto acaba el ciclo for y la función. Y la información se muestra de la siguiente manera:

En el botón que aparece al lado del mes se encarga de desplegar un modal con el resto de los datos de la

nómina como el siguiente ejemplo.

1
 2

Este detalle trae una función que se encarga de hacer todas las operaciones de la nómina bajo el nombre

de operacion (num). La variable num hace referencia a la fila que haya sido seleccionada que al mismo

tiempo corresponde al número del arreglo que se va a consultar.

Las anteriores imágenes muestran el proceso para calcular la nómina. Para retornar los datos al modal

seleccionado se usa una función denominada buscar () que trae los datos de la función anterior y los

imprime en el modal.
Para consultar la nómina de un empleado se puede realizar mediante dos buscadores, uno por cedula y

otro por mes.

El proceso para consultar la nómina de cualquier empleado se encuentra en el archivo validacion.js.

El código que muestra la imagen se encarga de mostrar los datos de la tabla según los caracteres que se

ingresen en los buscadores.

Dentro del mismo archivo de validación cuenta con una función de nombre validar () que permite
validar el formulario de la nómina con datos específicos (negar el registro con campos vacíos, permitir

el ingreso de solo caracteres, etc.).

El anterior código se encarga de verificar que no se puedan ingresar números negativos y negar la

opción de registrar si los campos están vacíos.

El encabezado de la página cuenta con una serie opciones que permite consultar la nómina de los

empleados de distinta manera.

Estas vistas son traídas por funciones que están creadas en el archivo app.js encargadas de mostrar

información de la misma manera que la tabla principal según las condiciones de la función guardar ().
Como el login, todas las vistas están dentro del mismo archivo, simplemente son escondidas con el

método display y se muestran según la función y condición ejecutada.

 CONCLUSIÓN

Usando el lenguaje de JavaScript se puede programar diferentes aplicaciones sea de mayor calibre

como nominas o facturas, o bien pequeñas aplicaciones como calculadoras. Además tiene un mayor

potencial en el manejo de las vistas y la eficiencia en la ejecución de su código. La única deficiencia

con este lenguaje es que no puede ser usado para la gestión de las bases de datos a menos que este

acompañado de otro lenguaje como java o php.

En este trabajo se evidencia el manejo de fórmulas, validaciones, funciones, métodos y mensajes para el

correcto manejo de la información en el registro de las nóminas correspondiente a la información que se

usa actualmente.
 REFERENCIAS BIBLIOGRAFICAS

Bibliografía

Gerencie.com, Fecha desconocida, ¿Cómo se liquida una nómina?,19 de agosto del 2020,
https://www.gerencie.com/como-se-liquida-una-nomina.html.
El tiempo, 9 de noviembre de 2019, Rete fuente en 2020 a partir de salarios de $ 4’538.914, 21 de
agosto del 2020, https://www.eltiempo.com/economia/sectores/retencion-en-la-fuente-en-el-2020-aplicaria-
a-salarios-por-encima-de-4-538-914-431560 .
Actualícese, 2 abril 2018, Descuento en el salario por aportes al fondo de solidaridad pensional, 21 de
agosto del 2020, https://actualicese.com/descuento-en-el-salario-por-aportes-al-fondo-de-solidaridad-
pensional/.