Definir la función agregarMovimiento con JavaScript

Junto a las funciones obtener Movimientos y mostrar Movimientos, la función agregarMovimiento con JavaScript es muy importante, pues completa y perfecciona el desarrollo del programa para la aplicación web que registra ingresos y gastos de la cuenta en una base de datos de tipo SQL.

Entonces, utilizamos la definición de elementos con JavaScript para poder agregarle una capa de interactividad y versatilidad entre los usuarios y la misma aplicación. Así pues, para seguir aprendiendo sobre las características del lenguaje de programación JavaScript, te recomendamos seguir leyendo este post sobre la función agregarMovimiento con JavaScript.

Cómo definir la función agregarMovimiento con JavaScript

La función agregar movimiento se encargará de recoger los datos y hacer la llamada. Esta función te permitirá recargar todos los movimientos agregados a tu formulario, pues recoge los datos desde allí y los pinta después de haber pulsado el botón.

Recoger los datos

Así pues, en primer lugar, definiremos la función como un evento. Después, vamos a establecer una const, que nos permitirá recoger cada uno de los campos por medio del id que los acompañan, con el método document.querySelector. Allí tendrás que poner qué quieres sacarle a cada uno de los datos. En este caso, serán los valores o value. En el caso del campo ingreso y gastos, deberás cambiarle la forma en la que el usuario va a completarlo, pues aquí utilizamos un espacio para comprobarlo o no.

Crear el objeto

Después de recoger los datos, tendrás que encontrar la forma de pintar lo que acabas de realizar en JavaScript en Python, pues es el programa desde el que desarrollaremos el programa. Este tipo de representaciones en JavaScript pueden parecer un diccionario en la programación con Python. Así pues, los datos recogidos serán establecidos con un tipo de respuesta JSON. Aquí tendrás que establecer cada uno de los campos y así podrás crear el objeto y pintarlo.

Realizar la petición

Por último, y antes de que pases a la representación en código de cada uno de estos pasos, tendrás que aprender cómo se podría realizar la petición desde el movimiento hacia la API que contiene la base de datos. Por lo tanto, primero tendrás que establecer conts o constante para la URL. Esta almacenará la API y todos los movimientos del programa.

Después, tendrás que agregar los métodos que consideras que serán necesarios para que el programa pueda agregar movimientos, almacenados en el formulario anteriormente creado. Vamos a determinar el método open, método setRequestHeader y el método send, junto con el nombre de la función, para que cada uno de los métodos actúe sobre ella.

Para el primero método, agregarMovimientoRequest.open, vas a empezar por abrir la llamda hacia la API y para realizar todas las peticiones. Después, tendrás que pedir los elementos del header para representar los datos obtenidos. Esto lo haces con el método agregarMovimientoRequest.setRequestHeader, al que le pasarás el tipo de contenido y la ruta de la aplicación con JSON.

Por último, tendrás que establecer un método para obtener las respuestas de una manera específica. En este caso será de tipo stringify, es decir, en cadena de tipo JSON.

Representación de la función agregarMovimiento con JavaScript

A continuación, te traemos la representación, en forma de código, de cómo luciría la función agregarMovimiento con JavaScript.

function agregarMovimiento (evento)

evento.preventDefault ()

const fecha = document.querySelector ( ‘#fecha’ ).value

const hora = document.querySelector ( ‘#hora’ ).value

const concepto = document.querySelector ( ‘#concepto’ ).value

const ingreso_gasto = document.querySelector ( ‘input [type = checkbox]: checked’ ).value

const cantidad = document.querySelector ( ‘#cantidad’ ).value

mov_json = {

«fecha»: fecha,

«hora»: hora,

«concepto»: concepto,

«ingreso_gasto»: ingreso,

«cantidad»: cantidad

}

const url = api.base + ‘movimientos’

agregarMovimientoRequest.open (‘POST’, url, true)

agregarMovimientoRequest.setRequestHeader (‘Content – Type’, ‘application/json’)

agregarMovimientoRequest.send (JSON.stringify (mov_json))

}

De esta manera, ya has aprendido todos los pasos para definir la función agregarMovimiento con JavaScript.

Sigue aprendiendo sobre programación

Si bien ya sabes cómo definir la función agregarMovimiento con JavaScript y otras funciones más que acompañan el desarrollo del fichero JavaScript, aún falta que sigas aprendiendo sobre más conceptos y herramientas de este lenguaje de programación.

Si te interesa indagar más sobre la programación de Python, te recomendamos echarle un vistazo al programa de nuestro Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡es la oportunidad perfecta para seguir aprendiendo sobre Python, código y el sector IT!