Categoría: JavaScript

Bootstrap no carga en JSP

5 enero, 2022 en Bootstrap / css / JavaScript Etiquetado java / jdeveloper / jsp / oc4j / tomcat por Grégor González

Bootstrap es uno de los mejores frameworks css que se pueden encontrar actualmente, lo utilizo en casi todos los proyectos y nunca había tenido este tipo de problema, donde carga los archivos pero igualmente no los aplica. Esta es una pequeña guía para tratar de solucionar los problemas más comunes, un troubleshooting para probar paso por paso con ensayo y error. Primero verificar las rutas de los archivos y probar que realmente están cargando en la página. La consola de desarrollador nos indica si hay algún archivo que no pudo cargar: Sino indica error, puedes probar que realmente cargó el […]

Arrow Functions en Javascript (Funciones Flecha)

21 octubre, 2021 en JavaScript Etiquetado arrow function / cortas / ES6 / funciones por Grégor González

Desde la implementación de ES6 podemos declarar funciones de una manera más corta en nuestro código Javascript. Es otra forma de trabajar y tiene sus diferencias de las funciones comunes, una vez se conoce el proceso y con práctica, resulta ser muy cómodo y versátil de usar. No se limita solo a Javascript, muchos otros lenguajes de programación han ido adaptando esta versión corta Arrow Functions desde antes o después, se usa por lo corto y claro del código. ¿Qué son los Arrow Functions? Una función de flecha no es más que una forma abreviada de declarar una función. La […]

AngularJs – Simple ordenamiento de tabla con buscador

24 mayo, 2019 en Angular / JavaScript Etiquetado buscador / columna / filtro / JSFiddle / ordenamiento / tabla por Grégor González

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.module('miApp', [])
.controller('mainController', function($scope) {
  $scope.sortType = 'nombre';
  $scope.sortReverse = false;
  $scope.buscar = '';
  
  $scope.clientes = [
    { id: 1, nombre: 'Grégor', apellido: 'Gozález', fecha: '22/05/2019' },
    { id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20/05/2019' },
    { id: 3, nombre: 'Juan', apellido: 'Cedeño', fecha: '30/05/2019' },
    { id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31/05/2019' }
  ];  
});

angular.module('miApp', [])

.controller('mainController', function($scope) {

$scope.sortType = 'nombre';

$scope.sortReverse = false;

$scope.buscar = '';

$scope.clientes = [

{ id: 1, nombre: 'Grégor', apellido: 'Gozález', fecha: '22/05/2019' },

{ id: 2, nombre: 'Maria', apellido: 'Sulbaran', fecha: '20/05/2019' },

{ id: 3, nombre: 'Juan', apellido: 'Cedeño', fecha: '30/05/2019' },

{ id: 4, nombre: 'Carlos', apellido: 'Perez', fecha: '31/05/2019' }

];

});

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

21 mayo, 2019 en Angular / JavaScript Etiquetado ajax / Combinando promesas / Q por Grégor González

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

15 mayo, 2019 en Angular / JavaScript Etiquetado angularjs / error / inyecion de dependencias / minificar por Grégor González

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:

angular.module("App", []).controller("Ctrl", function ($scope) {
    $scope.msj = "Hola Mundo";
});

angular.module("App", []).controller("Ctrl", function ($scope) {

$scope.msj = "Hola Mundo";

});

Al minificar se transformará de esta manera:

angular.module("App",[]).controller("Ctrl",function(a){a.msj ="Hola Mundo"});

1	angular.module("App",[]).controller("Ctrl",function(a){a.msj ="Hola Mundo"});

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

¿Aprender React o Angular? diferencias.

6 mayo, 2019 en Angular / JavaScript / React Etiquetado angular / angular vs react / react / react vs angular por Grégor González

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

5 junio, 2016 en css / JavaScript Etiquetado animacion / codepen / fondo animado por Grégor González

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

12 diciembre, 2015 en JavaScript / Recurso Web Etiquetado comprimir codigo javascript / minifi / minificar / minified por Grégor González

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

5 septiembre, 2015 en JavaScript / JQuery Etiquetado formulario / fotos / imagenes / JSFiddle / multiples archivos por Grégor González

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

6 julio, 2015 en JavaScript / Recurso Web Etiquetado capturacion / caracteres javascript / codigo de teclado / evento / teclas por Grégor González

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 […]

Blog Code

Blog de videotutoriales web