Hoy vamos a ver cómo dibujar un triángulo en un canvas de HTML5 a través de JavaScript usando los métodos moveTo, lineTo y closePath. Aunque no hay un método llamado triangle o algo por el estilo, podemos dibujar cualquier tipo de triángulo uniendo algunas líneas. ...
Las capturas de pantalla de las aplicaciones web (o sitios web) son una forma bastante buena de arreglar errores de nuestros programas reportados por usuarios, ya que gracias a ellas podemos ver qué error aparece o cuál es el problema que reportan (sobre todo de diseño). En el mundo de JavaScript existe la librería html2canvas cuyo uso ya vimos anteriormente, de hecho esto podría ser la continuación del mismo, en donde veremos cómo enviar una captura de pantalla a un servidor con PHP. Aunque el ejemplo muestra cómo recibir la captura de la webapp con PHP, podemos adaptar el código para otros lenguajes del servidor. ...
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. ...