abril 2018

Acceder a los filtros de VueJS desde el código Javascript

Introducción

Los filtros de Vue.js son muy útiles. Generalmente son utilizados sólo en la vista. Por ejemplo, si queremos filtrar moneda hacemos esto:

{{sueldo | currency}}

¿Pero qué pasa si queremos utilizar esos filtros en nuestro código javascript? recientemente me pasó que estaba generando un documento PDF con la magnífica librería jsPDF, pero para mostrar algunos montos necesitaba filtrarlos antes.

Así que me puse a pensar en cómo utilizar los filtros no sólo en la vista, sino también en la lógica. Y encontré la respuesta.

Utilizar filtros de VueJS en código Javascript

La respuesta viene del creador de este maravilloso framework. Una vez que hemos registrado nuestros filtros globalmente, podemos acceder a ellos desde this.$options.filters o desde Vue.options.filters.

Así que si tenemos un filtro llamado currency, podemos “importarlo” de la siguiente forma:

const {currency} = this.$options.filters;

Lo mismo para todos los demás filtros que hayamos registrado. Arriba estoy utilizando algo llamado desestructuración de objetos, o algo así. Pero sería lo mismo que escribir:

const currency = this.$options.filters.currency;

Finalmente, para utilizarlos, llamamos a la función y le pasamos argumentos:

let montoBonito = currency(monto);

En este caso fue para el filtro currency, pero podemos utilizarlo para cualquier filtro existente.

Javascript: Número o moneda a texto / letras

Introducción

Cuando trabajamos con documentos contables, o con cosas que llevan una cantidad, a veces es necesario convertir los números a texto.

Esto pasa sobre todo cuando queremos convertir dinero a una representación legible, es decir, a letras o a texto.

Por ejemplo, convertir “123.00” a (al menos en México) “Ciento veintitrés pesos con cero centavos” o algo así.

Hoy me vi en la necesidad de ello y en lugar de escribir por mí mismo el código, busqué si alguien ya o había hecho, y así fue.

Número a letras

Como lo dije, esta función no es mía. Buscando en Google encontré este gist. Pero de donde realmente me basé para utilizar la función fue de un comentario hecho por un usuario llamado sapienman.

En fin, el código es este:

Ahora hay que ver su modo de uso.

Modo de uso

Pegamos todo el código de arriba en un script, y luego lo importamos en HTML. Por ejemplo…

Ahora podemos llamar a la función globalmente. Como primer parámetro pasamos el número, y como segundo parámetro un objeto con opciones:

  • plural: el plural de nuestra moneda. Por ejemplo, “dólares” o “pesos”.
  • singular: el singular de nuestra moneda. Por ejemplo “dólar” o “peso”
  • centPlural: el plural de las fracciones de nuestra moneda. En mi caso es “centavos”
  • centSingular: el singular de las fracciones de nuestra moneda. En mi caso es “centavo”

Así que, podemos llamarlo así:

Con este resultado:

Si no queremos estar pasando el segundo argumento cada vez que llamemos a la función, sigamos leyendo.

Modo de uso sin objeto

Pero si lo vamos a usar muchas veces, no vamos a llamarlo con el objeto con la configuración en cada momento. Mejor modificamos la función original 😉

Especificamente vamos a modificar las líneas 169, 170, 171 y 172. Como podemos ver, el autor asigna valores por defecto en caso de no pasar las opciones.

Así que cambiaríamos “PESOS CHILENOS” y todas las demás cosas por nuestra moneda. Después, sólo llamaríamos a la función así:

numeroALetras(200.58);

Ejemplo de implementación

He escrito un ejemplo para que veas cómo se usa, míralo: ejemplo de conversión de dinero a texto en JS.

Valores flotantes en elemento input type number de HTML

Introducción

Hoy estaba interactuando con un formulario, y noté que al poner un valor flotante o con punto decimal en un input de tipo number, salía una validación que decía que me pedía introducir sólo valores enteros.

Es decir, si introducía el 1.3 no era válido, pero si ponía 1 o 2 sí lo era.

Investigando me di cuenta de que esto tiene que ver con el atributo step del input.

Demostración del error

Para que el lector entienda, intentemos introducir un valor flotante en un input de tipo número en HTML.

Si utilizamos la validación que trae por defecto, saldrá un mensaje así:

Aquí un plunker:

Claro que esto no da problemas si sólo queremos valores enteros, pero ¿qué pasa si queremos permitir valores flotantes?

Solución

Todo esto se debe a un atributo llamado step. Step es como de cuánto en cuanto puede incrementar o reducirse el número del input.

Por defecto, step es 1; así que sólo permite saltar entre múltiplos de dicho valor.

Pero si ponemos step=”0.1″ podremos aumentar de 0.1 en 0.1, y así sucesivamente.

Para poder incrementar o reducir sin límites, podemos establecer step=”any” que se traduce como “cualquiera”.

<input step="any" type="number">

Aquí un plunker:

Con esto terminamos este post.

Codificar y decodificar URI en Android

Introducción

A veces, en las peticiones HTTP de tipo GET necesitamos mandar valores en la URL. Dichos valores deben codificarse primero.

En PHP tenemos la función urlencode, en Javascript tenemos a encodeURIComponent, y hoy veremos cómo codificar una URI en Android.

¿Qué es codificar una URI?

Es quitar todos aquellos símbolos que no sean letras, números, o cosas como _-!.~'()*.

Aquel carácter que no sea uno de esos símbolos, será codificado. Por ejemplo, veamos esto:

Tenemos una cadena: sup_2018-04-26T12:10:07

Codificada se ve así: sup_2018-04-26T12%3A10%3A07

Como podemos observar, se remplazaron los dos puntos por %3A. Y no sólo se remplazan estos, se remplazan todos aquellos que no cumplan las reglas mencionadas arriba.

Codificar URI en Android

Para codificar una cadena que irá en una URL podemos utilizar Uri.encode. Primero importamos la clase:

import android.net.Uri;

Luego podemos llamar a su método estático llamado encode. Recibe un argumento de tipo cadena. Un ejemplo de código sería este:

String normal = "sup_2018-04-26T12:10:07";
String codificada = Uri.encode(normal); // sup_2018-04-26T12%3A10%3A07

Con eso podemos codificar. Y si, del lado del servidor deseamos decodificar, podemos usar el método que el lenguaje proporcione.

En PHP existe urldecode, por ejemplo.

Decodificar uri en Android

Si queremos hacer el proceso inverso, llamamos a Uri.decode con una cadena codificada. Por ejemplo, así:

String codificada = "sup_2018-04-26T12%3A10%3A07";
String normal = Uri.decode(codificada);  // sup_2018-04-26T12:10:07

Con eso terminamos por hoy.

Recorrer arreglos en PHP

Introducción

A la hora de trabajar con arreglos, vectores, listas o arrays en PHP siempre necesitaremos alguna forma de recorrerlos o iterarlos.

PHP ofrece 2 formas de hacerlo, una de ellas es la que conocemos: un ciclo for; y la otra forma es con un ciclo foreach.

Arreglo de ejemplo

Vamos a iterar sobre un arreglo de animales:

<?php
$animales = ["Perro", "Gato", "Vaca", "Serpiente", "Oso"];
?>

Es un arreglo simple pero bastará para explicar cómo recorrerlo.

Con for

Podemos recorrer un arreglo con un ciclo for. Sólo tenemos que obtener la longitud del mismo con count.

Para imprimir los valores, el código de ejemplo queda así:

<?php
$animales = ["Perro", "Gato", "Vaca", "Serpiente", "Oso"];
for ($x = 0; $x < count($animales); $x++) {
    $animal = $animales[$x];
    echo $animal;
    echo "<br><br>"; #Saltos de línea
}

?>

Ahí los imprimimos, pero podemos hacer cualquier cosa con los valores, fue sólo para ejemplificar.

Con for, optimizado

Hace un momento utilizamos count para contar los valores. Pero en cada iteración del ciclo, se llamaba a count.

Eso es una mala práctica, pues en arreglos largos o grandes nuestro script tomará más recursos e incluso más tiempo.

Es mejor obtener la longitud y guardarla en una variable aparte, así sólo llamamos a count una vez.

Así se ve el código optimizado:

<?php
$animales = ["Perro", "Gato", "Vaca", "Serpiente", "Oso"];
$longitud = count($animales);
for ($x = 0; $x < $longitud; $x++) {
    $animal = $animales[$x];
    echo $animal;
    echo "<br><br>"; #Saltos de línea
}

El resultado es el mismo pero el rendimiento ha sido mejorado.

Con foreach

Finalmente veamos el método más amigable para el ser humano: el ciclo foreach.

Para recorrer el arreglo, podemos hacer esto:

<?php
$animales = ["Perro", "Gato", "Vaca", "Serpiente", "Oso"];
foreach ($animales as $animal) {
    echo $animal;
    echo "<br><br>"; #Saltos de línea
}

Conclusión

En este caso lo hicimos con un arreglo de una dimensión, pero podemos recorrer arreglos de cualquier forma y de cualquier tipo.

Aquí las referencias a foreach.

Longitud de un arreglo en PHP

Introducción

En otros lenguajes como Javascript o Java, para obtener la longitud de un arreglo leemos la propiedad length.

En Go y Python, llamamos al método len.

¿Pero cómo se hace en PHP?

Longitud o conteo de valores de un arreglo en PHP

Es muy simple, lo único que tenemos que hacer es llamar al método count y pasarle como argumento nuestro arreglo.

count devolverá un número, que será la longitud de nuestro arreglo  o lista. Aquí un ejemplo:

<?php
$lenguajes = ["go", "javascript", "php", "c#"];
$longitud = count($lenguajes);
echo $longitud; // Imprime 4

Con eso podemos obtener la longitud de un arreglo. Pero count también puede contar elementos de un arreglo multidimensional.

Longitud de arreglo multidimensional en PHP

Hay ocasiones en las que nuestro arreglo es multidimensional. Algo así:

<?php
$animales = [
    "mamíferos" => ["delfín", "perro"],
    "anfibios" => ["rana", "tortuga"],
];
?>

Para contar recursivamente llamamos a count con el segundo argumento establecido en COUNT_RECURSIVE, como se ve en este ejemplo:

<?php
$animales = [
    "mamíferos" => ["delfín", "perro"],
    "anfibios" => ["rana", "tortuga"],
];
$longitud = count($animales); // Devuelve 2, pero nosotros queremos 6
$longitudRecursiva = count($animales, COUNT_RECURSIVE); // Devuelve 6
echo $longitud;
echo "<br>";
echo $longitudRecursiva;
?>

 

Si llamamos a count sin que el segundo argumento sea COUNT_RECURSIVE, devolverá 2, pues sólo cuenta los valores sin ir más profundo.

En cambio, con COUNT_RECURSIVE cuenta profundamente.

Aquí podemos aplicar un truco, y es que si queremos sólo los nombres de los animales podemos hacer una resta de la longitud recursiva menos la longitud normal.

Es decir, 6 – 2 = 4. Y 4 son los verdaderos animales, las demás son categorías.

Obtener nombre del mes actual en PHP

Introducción

Este será un post muy sencillo. Veremos cómo obtener el nombre del mes en el que estamos actualmente, utilizando PHP.

Por ejemplo, el mes en el que escribo esto es en abril. ¿Pero cómo podemos hacer para que PHP lo sepa por nosotros?

Una solución fácil es obtener el número del mes actual, y utilizarlo como índice para tomar una cadena que está dentro de un arreglo.

Eso es justamente lo que haremos.

Obtener nombre del mes actual con PHP

Es simple. Para que esto funcione, nuestro servidor debe tener bien establecida la zona horaria. Aquí hay un post de cómo hacerlo con y sin Laravel.

Luego, llamamos a la función date, y le pasamos como argumento la cadena con la letra n. Eso devolverá un número del 1 al 12 (1 es enero, 12 es diciembre).

Finalmente utilizamos ese número como índice de un arreglo, pero recordemos que los arreglos comienzan en 0, así que lo único que tenemos que hacer es restar 1 a lo que devuelva date.

Si devuelve 12, y le restamos 1, será 11. Y 11 es el índice del último valor de nuestro arreglo.

Aquí el código de ejemplo:

Con eso tenemos para saber cuál es el nombre del mes en el que estamos en PHP. Por defecto los meses están en minúsculas, pero podemos cambiarlos como deseemos.

Sé que no es la solución más eficaz, pero sí es las más sencilla al menos para mí.

Leer código QR con Android | Programación de app

Introducción

Leer un código QR debería ser lo más fácil de hacer en Android utilizando Java, pero no es así.

Podemos utilizar la API que ha introducido Google para leer códigos QR, pero el usuario final necesitará tener los Google Play Services.

Otras alternativas sugieren que usemos otra aplicación que ya lea códigos QR (llamar a otra aplicación desde la nuestra) y tomar lo que devuelva; esto confiando en que el usuario tenga una aplicación para leer dichos códigos.

Pero hoy veremos cómo podemos incorporar un lector QR programado por alguien más, que no tiene dependencias más que el mismo lector.

App final

La app que crearemos al final se verá algo así:

Puedes descargarla y probarla por ti mismo.

Incluir librería

Comencemos con lo básico. La librería está alojada aquí en GitHub. No es muy popular ni tiene miles de estrellas, pero sí que sirve.

Para incluirla, abrimos el archivo build.gradle (el que dice Project:TuProyecto) y en el apartado allprojects > repositories agregamos lo siguiente:

maven { url 'https://jitpack.io' }

De manera que ese fragmento de nuestro archivo puede quedar así:

Personalmente, y sólo para que sirva de guía, mi archivo se ve así:

Ahora modificaremos nuestro archivo gradle para nuestra app (dice Module: app), en el apartado dependencies. En ese apartado agregaremos lo siguiente:

compile 'com.github.blikoon:QRCodeScanner:0.1.2'

De manera que el fragmento  puede quedar así:

Y aquí una imagen del mío:

Seguramente nos pedirá que instalemos las dependencias en un mensaje en la parte superior,  así que lo hacemos haciendo click en Sync Now. Una vez hecho esto ya hemos incluido la librería.

Solicitando permisos

El autor de la librería no lo deja claro, pero necesitamos dos permisos: acceder a la cámara y a la vibración. Cuando comencé a probar la librería, habilité permisos para la cámara, pero no para que el dispositivo vibrase, así que la app se cerraba inesperadamente.

En fin, recordemos agregarlos en el manifest. Así:

El mío luce así:

Y con ello ya podemos, ahora sí, programar.

Leer código QR

Hagamos un ejemplo básico. Vamos a poner un botón, cuando se haga click en ese botón llamaremos a un método de Java que lanzará el lector, luego recuperaremos lo que se devuelva y lo mostraremos en un Toast.

Botón

Voy a poner un simple botón en la vista y también una etiqueta. Vamos a escuchar más tarde el click del botón, en dicho click se llamará al método onClick.

La vista queda así:

Actividad

Ahora, en nuestra actividad vamos a poner este código:

REQUEST_CODE_QR_SCAN es un número único, ya que siempre podremos hacer peticiones, pero esas peticiones serán hechas con un número único para que cuando respondan podamos ver a cuál de todas están respondiendo. En este caso sólo haremos una, pero puede que luego agreguemos más.

En resumen, puedes cambiar el número. Luego vamos a escuchar cuando se responda nuestra solicitud, así:

Básicamente vemos si pudimos leer, y también si el código QR era válido. En caso de que sí, mostramos un toast con lo que leímos. En caso de que no, pues avisamos.

Juntando todo, nuestra actividad se ve así:

Con ello podemos ejecutar nuestra app y ver qué pasa…

Probando app

Al abrir la app se ve esto:

Ventana principal de aplicación para leer códigos QR en Android

Ventana principal de aplicación para leer códigos QR en Android

Generé un código en mi computadora utilizando AngularJS (sólo para probar rápidamente, pero podemos leer un código QR impreso, de cualquier página web, etcétera) así:

Si quieres entrar y generar uno, haz click aquí.

Luego abrí el lector, se ve así:

Escaneando código QR desde Android

Escaneando código QR desde Android

Y finalmente, al leer, se mostró el toast:

Código QR leído correctamente

Código QR leído correctamente

Internacionalización, idiomas o traducción

No hace falta que lo digan; yo también noté que algunas o todas las etiquetas están en inglés. Pues bien, hay una forma de “traducir” esto aunque me parece que no es un método permanente.

Se trata de un archivo que se queda en la caché. Podemos buscarlo en Android Studio con Ctrl + Shift + N, escribiendo “values.xml” y eligiendo editar el que pertenece al lector QR. Es el siguiente:

Ahí vamos a encontrar muchos valores y también colores. Podemos traducir algunos. En mi caso cambié  “Scan” por “Escanear” y “Picture” por “Elegir imagen“:

Y la app se ve así (notar que en la parte superior tiene los valores que cambié):

Pero infiero que, como dice caché, se borrará en la siguiente sincronización. Para ello podemos tener un archivo aparte que guardará los valores, o algo que se nos ocurra.

Conclusión

Lo único que tengo que decir es que, si podemos, dejemos una estrella al repositorio en GitHub. Si quieres, descarga la aplicación desde aquí 🙂

 

Generar Códigos QR con AngularJS y QrCode

Introducción

Ya vimos anteriormente cómo podemos generar códigos de barras con AngularJS en este post. Hoy veremos cómo generar códigos QR. No sé la diferencia entre esos 2, pero creo que los QR pueden guardar más información y su lectura es más fácil.

En fin, no vamos a ver las diferencias, vamos a ver cómo generar códigos QR utilizando AngularJS.

Incluir Librerías

Necesitamos QRCode y Angular-QR. El proyecto original está aquí, en GitHub. Para utilizar la librería, podemos utilizar bower, o incluir directamente los scripts, así:

<script src="https://cdn.rawgit.com/janantala/angular-qr/master/lib/qrcode.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/janantala/angular-qr/master/src/angular-qr.js" type="text/javascript"></script>

Debemos incluirlos en ese orden, y obviamente antes de ellos debemos incluir a AngularJS. La versión mínima que pide es la 1.

Registrar módulo en AngularJS

Una vez que ya incluimos las librerías, al instanciar nuestra app debemos decirle que usaremos este módulo.

angular
.module("TuApp", ["ja.qr"]); // Registramos a ja.qr

Con ello ahora sí podemos utilizar la directiva.

Generar código QR

Sólo tenemos que utilizar la directiva qr. Le podemos pasar algunas opciones como el texto que será codificado, nivel de corrección, etcétera. Pero para algo básico, se puede hacer algo como lo de abajo.

Con esto, generamos un código QR con el texto que pusimos entre comillas. Aquí un plunker demostrando el funcionamiento. Si quieres puedes escanear el código QR 🙂

Al escanearlo, a mí me aparece esto:

Veamos ahora más opciones

Código QR dependiendo de variable en scope

Hace un momento utilizamos una cadena, pero no era una variable perteneciente a nuestro scope. Ahora vamos a hacer que imprima una cadena dependiendo de una variable. Se modificaría así:

Lo único que cambió fue que hicimos que dibujara una variable de nuestro scope. Aquí un plunker:

Código QR dependiendo de input

Lo que falta ahora es ligar nuestro código QR a un input, para que se genere el código conforme escribamos. Me gustó mucho el resultado, ya que el código QR se genera conforme escribimos, y va cambiando su forma, algo muy entretenido.

Agregaríamos un input y lo ligaríamos. Quedaría así:

Y un plunker para comprobar nunca cae mal:

Combinando directivas de AngularJS con el generador

Vamos a ver cómo combinar el generador con ng-repeat y ng-show.

Ng-repeat

Podemos repetir códigos dependiendo de un arreglo. Por ejemplo, en mi controlador he declarado un arreglo de cadenas. Luego, en la vista hago un ng-repeat. El div que he agregado es para separar los códigos QR.

Plunker:

Genial, estamos repitiendo códigos. Ahora lo combinaré con un ng-show…

Ng-show

Para hacer esto más divertido, repetiremos los códigos con ng-repeat y daremos la opción de ocultarlos.

Si el checkbox está marcado, el código se muestra. Si no, pues no. También he modificado el arreglo, ahora guarda objetos en lugar de cadenas.

Otras opciones

Podemos cambiar el tamaño del Código QR con el atributo size, el nivel de corrección con correction-level, el modo de entrada que puede ser alfanumérico, numérico, etcétera con input-mode. Las opciones están en la página de GitHub, aquí.

Eso es todo. Cabe aclarar que estos códigos sí son legibles incluso al imprimirlos, acabo de imprimir uno y el resultado es más que satisfactorio. Así que con un poco de trabajo podemos generar códigos QR fácilmente, gratis y a nuestro modo.

Nota importante: por defecto, la librería crea el código QR en un elemento canvas. Si queremos que lo renderice a una imagen, es decir, a un elemento img (para imprimir o cosas de esas) debemos establecer el atributo image=”true”.

Comprobar si elemento existe en arreglo de Javascript

Introducción

Veamos hoy cómo comprobar si un valor o elemento existe dentro de un arreglo de Javascript. Recordemos que un arreglo en Javascript es una lista de valores.

En ocasiones, es necesario buscar la posición de determinado elemento, o tal vez sólo comprobar si existe dentro de un array, arreglo, vector o lista. Dicho con otras palabras, veremos cómo checar si un elemento está presente. Recientemente en ES6 se introdujo un nuevo método que veremos a continuación.

Obtener índice de un elemento dentro de un arreglo

Utilizamos indexOf, que yo traduzco como “índice de”. Es fácil, es un método que tienen los arreglos y que recibe el valor a buscar. Devuelve la posición del elemento, o -1 si no lo encuentra. A diferencia de Python, éste no genera ninguna excepción.

var agentes = ["Will Graham", "Clarice Starling", "Alex Cross"];

var indice = agentes.indexOf("Will Graham"); // Buscar índice de Will Graham
//indice es 0

var otroIndice = agentes.indexOf("Thomas Pierce"); //No existe
//otroIndice es -1

Con esto podemos obtener el índice, que recordemos comienza a contarse desde el 0. Es decir, el primer elemento tiene el índice 0, el segundo el 1, y así.

Comprobar si valor existe en arreglo

Anteriormente se utilizaba únicamente indexOf y se comprobaba el resultado del mismo con -1. Es decir, si el índice era -1 entonces no existía. Recientemente se introdujo otro método. Veamos ambos.

Comprobar si existe con indexOf

Tomando el ejemplo de arriba, podemos ver si Thomas Pierce existe así:

var agentes = ["Will Graham", "Clarice Starling", "Alex Cross"];

var indice = agentes.indexOf("Thomas Pierce");

if(indice !== -1){
  console.log("Thomas Pierce está presente");
}else{
  console.log("No encontrado");
}

Sólo comparamos para ver si es -1. En caso de que lo sea, es que no está presente dentro de la lista.

Comprobar si existe con includes

Como lo dije, se ha introducido un método más elegante. Podemos rescribir lo de arriba de esta manera:

var agentes = ["Will Graham", "Clarice Starling", "Alex Cross"];

if(agentes.includes("Thomas Pierce")){
  console.log("Thomas Pierce está presente");
}else{
  console.log("No encontrado");
}

Como el lector puede apreciar, el método o función includes devuelve un booleano. En caso de que exista, devuelve true; y si no, pues devuelve false.

Conclusión

Si necesitamos el índice, usemos indexOf. Si sólo queremos ver si existe, utilizamos includes. Por cierto, lo hicimos con cadenas pero funciona con números igualmente. Y con otros tipos de datos.

Aquí las referencias a indexOf e includes:

Array.indexOf

Array.includes

Subir foto desde jQuery a un servidor con PHP y CodeIgniter utilizando AJAX

Introducción

Hoy veremos cómo subir una foto o imagen a un servidor PHP. Dicha foto será elegida por el usuario desde un input de tipo file. La subiremos utilizando la clase FormData de Javascript en conjunto con la clase para recibir archivos en CodeIgniter.

Esto lo haremos utilizando AJAX, por lo que la experiencia del usuario será mejor. Este post funciona para imágenes GIF, PNG o JPG pero supongo que igualmente podemos subir archivos de cualquier tipo.

Lado del cliente

En el lado del cliente tengo mi input de tipo file, con un id para tener una referencia a él desde jQuery. También tengo un botón que servirá para enviar el archivo. No hay formulario porque como tal no enviaremos un formulario, enviaremos un archivo por AJAX:

En Javascript tengo la referencia al input y al botón. Escucharemos el click del botón y accederemos al arreglo de archivos de nuestro input. Con ello crearemos un objeto de tipo FormData y luego lo mandaremos por AJAX a nuestro controlador de CodeIgniter:

Con eso ya hemos terminado la parte del cliente. Vamos con el servidor.

Lado del servidor

En nuestro controlador de CodeIgniter debemos cargar el ayudante para subir archivos. Recibir la imagen será pan comido. En mi caso, mi método se llama ponerFotoAlumno y se ve así:

Lo que hacemos es simplemente recibir el archivo y guardarlo en la carpeta fotos_alumnos. Las opciones que puse son simplemente para aceptar imágenes que no excedan el peso de 2 MB.

Conclusión

Con esto pude subir una foto con FormData utilizando AJAX y jQuery. Hay opciones para cambiar el nombre de la imagen, recibir el nombre con el que se guardó, etcétera. La documentación oficial la dejo abajo.

Por cierto, en mi caso utilizo JSON para devolver la respuesta de la petición y trabajar con ella en el cliente, pero esto es opcional y podemos manejarlo como deseemos.

Referencias

Aquí dejo las especificaciones de cada cosa utilizada.

Clase para trabajar con archivos subidos en CodeIgniter

FormData

Ejercicio resuelto superlativos y comparativos en inglés

Introducción

Esto no tiene que ver nada con con informática ni programación, pero supongo que a alguien le servirá. Es un simple ejercicio resuelto de comparativos y superlativos en inglés. Los superlativos y comparativos son ¿formas? en las que el verbo cambia.

Por ejemplo, big cambia a bigger para comparar, y su superlativo es biggest. Hay algunos irregulares, como good, ya que cambia a better y best.

Continue reading…

Elevar número a una potencia en Javascript

Introducción

Hoy veremos dos formas de elevar un número a una potencia en Javascript. La primera, seguramente la conoce la mayoría de gente, pero la segunda fue introducida recientemente y es, a mi parecer, más elegante.

Elevar un número a una potencia en Javascript es multiplicar ese número N veces, en donde N es la potencia. Por ejemplo, 2 elevado a la potencia 3 es 8, ya que 2 x 2 x 2 = 8. Eso es elevar un número a determinada potencia en Javascript.

Igualmente podríamos hacer una función recursiva, pero eso es otra historia que abordaré otro día.

Con Math.pow

La forma tradicional es utilizar el método pow de la clase Math. Si, por ejemplo, queremos elevar el 2 a la potencia 3, utilizamos esto:

var elevado = Math.pow(2, 3);

El resultado es 8, como se ve abajo:

Elevar número a potencia con Math.pow

Elevar número a potencia con Math.pow

Y ese es el método tradicional. Veamos ahora uno más actual y elegante.

De una forma más elegante

Me parece que en Python ya existe esto, pero recientemente fue introducido en Javascript. Se trata de elevar un número a una potencia utilizando dos asteriscos. Así como cuando hacemos una multiplicación, pero ahora serán 2 asteriscos en lugar de uno.

La forma en la que lo hacemos es esta:

var elevado = 2 ** 3;

Cuyo resultado es…

Elevar número a potencia con 2 asteriscos

Elevar número a potencia con 2 asteriscos

Me parece más elegante este último método, además de que es más corto y expresivo.

Días que tiene un mes en Javascript

Introducción

Hoy veremos cómo obtener el número de días que tiene un mes de cualquier año. Por ejemplo, el mes de Abril del 2018 tiene 30 días, pero bien sabemos que esto cambia dependiendo del mes y también del año (si es o no bisiesto).

Así que investigando me encontré con una función sencillísima de implementar.

Dicho con otras palabras, estimaremos o calcularemos el número o cantidad de días que tiene determinado mes del año actual o de un año cualquiera.

La función que escribiremos devolverá el número entero de días que hay en un mes.

Obtener días que tiene un mes

Aquí la función:

Recibe dos parámetros: el año y el mes, como números. Enero quiere decir 1, Febrero 2, etcétera. El año debe ser algo como 2015, 2016, etcétera.

Nota: esta función, y sólo esta función, cuenta los meses desde el 1 (enero es 1, diciembre 12) pero normalmente, Javascript cuenta los meses desde 0 (enero es 0, diciembre 11). Lo digo para evitar confusiones.

Algunos ejemplos de llamada…

Número de días que tiene un mes según su número y año

Número de días que tiene un mes según su número y año

Todo correcto. Pero podemos mejorar nuestra función

Obtener días del mes por nombre

Mejoremos la función para que reciba el nombre del mes y en base a ello devuelva sus días, así evitamos confusiones calculando el número. Queda así:

Lo único que hacemos es primeramente convertir el nombre a mayúsculas, buscar su índice y sumarle 1. Dado que los meses están ordenados, sólo tenemos que sumar 1.

Por ejemplo, enero tiene el índice 0, pero al sumarle 1 se convierte en 1. Igual diciembre, tiene el 11 pero le sumamos 1 para que se convierta en 12.

Al llamar a la función pasa esto…

Número de días que tiene un mes según su nombre y año

Número de días que tiene un mes según su nombre y año

Obtener días del mes y año actual

Finalmente veamos cómo obtener los días del mes actual. Sólo tenemos que modificar un poco la función original.

Lo que hacemos ahora es crear un nuevo objeto con la fecha actual, obtener el mes y año. Es importante notar que al mes le sumamos uno porque, como ya expliqué arriba, esta función cuenta los meses desde el 1 pero Javascript desde 0.

Si la ejecuto al momento de escribir esto…

Días que tiene el mes actual

Días que tiene el mes actual

Conclusión

Qué fácil e inteligente es este método, aunque yo no soy el autor, yo simplemente trato de explicarlo y facilitar su uso. El autor es quien respondió a esta pregunta de StackOverflow.

jQuery y checkboxes: obtener, cambiar y vigilar valores

Introducción

jQuery es un framework que todavía (en pleno 2018) es muy utilizado por muchísimos programadores. Al trabajar en checkboxes, entradas de tipo checkbox o cajas de selección es muy probable que nos preguntemos cómo obtener el valor o estado de cada campo.

También puede que necesitemos cambiar el valor. Es decir, seleccionar una caja de texto en jQuery. Finalmente veremos cómo detectar cuando el estado de un checkbox cambia, es decir, que el usuario lo marque o lo desmarque.

¿Qué es un checkbox?

Antes de continuar; y para no confundir al usuario, hablamos de una caja de selección o checkbox, como el siguiente:

Ahora sí comencemos.

Obtener el estado/valor de un checkbox

Para esto, debemos tener nuestro elemento de jQuery que representa al input. Por ejemplo, podemos tener algo así:

<input id="mi_caja" type="checkbox">

Y para obtener su valor, llamamos al método is y le pasamos como argumento la cadena “:checked” así:

var estaSeleccionado = $('#mi_caja').is(":checked");

Aquí un ejemplo:

Establecer valor/estado

Ahora veamos cómo cambiar el valor de una caja de selección. Para ello, ahora utilizamos el método prop. El primer argumento será la cadena “checked” y el segundo una variable booleana para indicar si queremos marcarlo o desmarcarlo.

Marcar un checkbox

$("#mi_caja").prop("checked", true);

Desmarcar un checkbox

$("#mi_caja").prop("checked", false);

Ejemplo

He aquí un pequeño plunker:

Escuchar cambios

Para terminar este post, veremos cómo escuchar cuando el usuario selecciona o des-selecciona una caja de texto. En este caso simplemente adjuntamos una función que será llamada en el evento change del input. Así:

$("#mi_caja").change(function() {
    alert("Cambio");
  });

Plunker de ejemplo:

Y con eso terminamos 🙂