Javascript

En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas. Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente. La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más. ...

Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas. Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen? Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript. ...

En este post voy a resolver un ejercicio de JavaScript tomado originalmente de Codewars. Un día desafortunado o sin suerte es un viernes que además es 13. Nuestra tarea es escribir una función que reciba el número de un año y devuelva la cantidad de “días desafortunados” que tiene, es decir, el conteo de viernes 13 que existen en ese año. ...

jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy. La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos. Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo: Obtener elemento seleccionado del select (la opción) Agregar una opción al select Limpiar el select, es decir, remover todas las opciones Escuchar cuando el usuario seleccione otra opción del select. Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post. ...

Un select es una lista desplegable de opciones de HTML, se declara usando <select> y dentro de él tiene opciones declaradas con <option>. Cada opción tiene un valor y un texto. El select de HTML se maneja a través de JavaScript. Al select también se le conoce como lista desplegable, Dropdown list o simplemente select. Hoy veremos cómo trabajar con JavaScript y los elementos de tipo select con option. Vamos a ver cómo: Obtener valor seleccionado de un select Agregar opciones al elemento select Obtener opción seleccionada Limpiar el select Escuchar cuando el valor del select cambia, es decir, que se selecciona otro valor Está de más mencionar que esto lo haremos con JavaScript puro, sin usar frameworks ni librerías externas. Al final tendremos un ejemplo en donde manejamos un select con JavaScript. ...

En este post veremos la solución a un ejercicio sencillo de JavaScript. Se trata de crear una función que regrese “amarillo”, “rojo”, o “verde” dependiendo del argumento que reciba indicando la luz encendida actualmente. La función va a indicar cuál es la luz que debería encender de acuerdo a la que está encendida actualmente. Si la luz es “rojo” entonces debe mostrar “verde”, si es “verde” debe mostrar “amarillo” y finalmente si es “amarillo” debe mostrar “rojo”. Por cierto, este es un ejercicio de Codewars. ...

En este post voy a hablar sobre async y await en JavaScript. El lenguaje JS es asíncrono y por lo tanto debemos saber cómo funciona esa manera de trabajar. Para trabajar con código asíncrono tenemos 3 formas: Usando callbacks Promesas Async y Await En este post voy a explicar cómo funciona async y await. ...

En este post te voy a mostrar cómo conectarte a una base de datos de MySQL usando el lenguaje de programación JavaScript del lado del servidor a través del entorno Node; también conocido como Node.Js. Vamos a hacer las 4 operaciones básicas de la base de datos: obtener datos, insertar datos, actualizar datos y eliminar datos. Para la interfaz del usuario vamos a usar Bootstrap y una estructura de aplicación web generada con express-generator. ...

Los paquetes de Node para Ubuntu están un poco desactualizados, además de que el binario se llama nodejs en lugar de node. Hoy vamos a ver cómo descargar e instalar Node 12 y NPM para Ubuntu, pero desde los paquetes de Node, para obtener la última versión. Al final de la instalación tendremos la última versión de Node: la versión 12.5; y la última de NPM: 6.9 Si tú visitas este post en el futuro, mira las instrucciones en el repositorio oficial; solo es cosa de cambiar el script llamado setup_[versión_aquí].x. ...

Node JS puede ser conectado a PostgreSQL fácilmente a través del paquete pg. En este tutorial vamos a ver cómo conectar Node.JS con PostgreSQL y hacer las cuatro operaciones básicas de la base de datos: Create, read, update y delete (CRUD); todo esto evitando inyecciones SQL y usando un poco el model MVC. Para la interfaz vamos a usar Bootstrap (ya que será responsivo), y para que el usuario use nuestra app web vamos a usar Express. Aunque estos ejemplos son con la web, los mismos pueden ser ejecutados en la terminal sin ningún problema. ...