Categoría: JavaScript


AngularJs – Simple ordenamiento de tabla con buscador

Aunque prefiero utilizar plugins, herramientas o fabricar mis propios buscadores, paginadores y ordenamientos, a veces solo necesitamos con cumplir con un requerimiento sencillo. En este caso necesitaba ordenar una simple tabla con pocos datos y permitir que el usuario eligiera por cual columna ordenar. Adicional se agregó un filtro de búsqueda para poder encontrar algún registro fácilmente. Suponiendo que tenemos un array de listado de clientes :

Angular nos provee de directivas, filtros y al momento de mostrar la información con la directiva ng-repeat, pasamos los parámetros necesarios para indicar el ordenamiento con «orderBy», la columna por la cual ordenar […]


AngularJs – Combinando promises

Cuando trabajamos con webservices de los cuales obtenemos datos para nuestra aplicación, muchas veces requerimos hacer varias peticiones, éstas pueden ser separadas individuales que se ejecutan en algún proceso, acción o en la carga principal. Cuando trabajamos en la inicialización o necesitamos cargar un grupo de peticiones al mismo tiempo, podemos combinarlas para que carguen todos los datos al terminar todas las peticiones, con esto nos aseguramos de tener toda la información. Las promesas (promises) en Javascript, es un objeto que nos ayuda en las operaciones asíncronas (peticiones AJAX) para indicar la finalización correcta o fallida de dicha petición. Como […]


AngularJs – Problemas al minificar por inyección de dependencias

AngularJs tiene la característica de manejar inyección de dependencia a través de los nombres de argumentos utilizados luego en el constructor de los controladores. Si utilizamos los programas comunes para minificar, estos argumentos serán cambiados de nombre y al no tener el mismo nombre que requiere Angular para el manejo de dependencias, simplemente no funcionará y la aplicación mostrará errores. Teniendo un ejemplo común, definiendo Angular en un espacio global y utilizando la dependencia $scope como argumento:

Al minificar se transformará de esta manera:

El argumento $scope se convierte simplemente en «a» y como consecuencia, fallará la inyección […]


¿Aprender React o Angular? diferencias.

Desde hace un tiempo que he estado buscando la mejor opción para frontend y entre los cientos de artículos que hablan de este tema, nunca se hace una comparación completa o no colocan información relevante para mi. Entonces intentaré recopilar y explicar ciertas diferencias en este post. Nota: No se incluye Vue porque nunca he tenido la oportunidad de utilizarlo. Mas adelante espero probarlo y realizar otras comparaciones. Angular es un framework JavasScript escrito en TypeScript y creado por Google. React es una librería JavaScript creada por Facebook. Ambos son utilizados ampliamente en el mercado tecnológico pero en mayor medida […]


Fondo con animación Css – Js

Este es un fondo animado de burbujas o partículas, utilizando css para la estructura y los gradientes, mientras que se usa enteramente javascript para realizar cálculos para la animación y generación de partículas que se esparcirán por el fondo. Es basado en canvas de html5, así que se necesita de los navegadores actuales que lo soporten. Una ventaja de hacer animaciones en javascript, es que se mantiene un estándar que soporta varios navegadores, en cambio sí usaran ccs3, estaría limitado a los navegadores que lo soporten. Sin importar que tecnología utilicen, las animaciones generadas de esta manera tienden a ser […]


Minificar, comprimir código JavaScript 1

Tal vez hayas descargado alguna librería que se compone de varios archivos, una versión compilada o de prueba y una versión pequeña para “producción”. Estas versiones se generan comúnmente con un nombre que lo relaciona: “jquery.min.js”, se usan para reducir el peso de las grandes librerías y de esta manera hacer que carguen más rápido en las páginas, muy conveniente cuando utilizas muchos componentes. Existen varias páginas que se encargan de hace esta compresión de código fuente, se trata de eliminar cada carácter no necesario, espacios, saltos de línea, comentarios del código y reduciendo considerablemente el tamaño del archivo. Esto […]


Pre visualizar imágenes antes de enviar formulario

El siguiente código JQuery, muestra las imágenes que intentas cargar a través de un formulario. Comúnmente el proceso completo seria utilizar un iframe, cargar la imagen al servidor y luego mostrarla, pero para evitarnos la carga de archivos y más sino sabemos si el usuario va a enviar el formulario, podemos utilizar este código Javasript/JQuery para pre visualizar las fotos antes del envío, cargando la imagen actual del disco y dejando libre el lado del servidor. Usa una base para cargar múltiples archivos en el formulario, por lo tanto solo toca realizar la parte del servidor para guardarlas. Puedes ver […]


Código de caracteres JavaScript

Si trabajas con eventos de javascript puedes capturar las teclas que presiona un usuario cuando escribe en su teclado. Al capturar este evento podemos asignarle alguna acción, pero para saber que tecla se presionó debemos obtener el código de dicha tecla, en este caso cada tecla pertenece a un número, este número puede variar en cada navegador o versión del navegador. En la página http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes encontrarás el listado con todos los códigos y un formulario para probar la capturación de teclas.   Puedes obtener el código completo y probarlo en este jsfiddle http://jsfiddle.net/ENSASKE/Lqt8ne37/ Si se hace más cómodo, también lo […]