Los Temas más visitados de JavaScript

Los datos en la mayoría de los casos provienen de servicios web que no son instantáneos, por lo cual nuestro listador genérico debe comportarse mostrando una espera que indique al usuario el inicio y el fin de la carga. En este video mostraremos como desarrollar ese comportamiento.

Explica como agregar eventos genéricos a un componente, también genérico, creado en videos anteriores. EL componente PUBLICA un evento al cual se SUSCRIBE el componente padre mediante un método de atención, para ser informado de las novedades que ocurren en el componente hijo y pueda actuar en consecuencia. Para el ejemplo la novedad será una selección sobre un ítem de la lista por parte del usuario, de ahí el nombre del evento creado, OnSelect.

Hace algún tiempo, revisamos en este blog algunos de los patrones de ordenación más utilizados en programación: el bubble sort, selection sort, insertion sort… Javascript ha cambiado mucho desde aquel 2011, por lo que quizá, ha llegado la hora de actualizarlos a los nuevos tiempos y su nueva sintaxis.

Cuando cargas scripts de JavaScript en un documento HTML necesitas tener cuidado con el tiempo de carga de la página, ya que dependiendo del lugar donde cargues los scripts o del método de carga utilizado podrías generar un gran impacto en el rendimiento de la misma.

Índice de Contenidos:
1 En dónde colocar los scripts
1.1 Script en la cabecera
1.2 Script en el body
2 Carga scripts con async y defer
2.1 Script el head con async
2.2 Script en el head con defer
3 Comparativa entre async y defer
3.1 Bloqueo del análisis HTML
3.2 Bloqueo del renderizado HTML
3.3 Evento domInteractive
3.4 Orden de ejecución
3.5 Compatibilidad
4 Qué método utilizar

El principal objetivo es garantizar que los datos enviados a través de un formulario sean completos, precisos, seguros y consistentes. Esto se logra a través de controles de validación de datos y reglas que se comprueba al validar el formulario.

Índice de Contenidos:
1.- ¿Para qué sirve validar campos de un formulario?
2.- Ejemplo práctico
2.1.- Principales restricciones
2.2.- Formulario de origen
3.- Validar campos en HTML5
4.- Validar campos en JavaScript
4.1.- Funciones utilizadas
5.- Validar campos en jQuery
6.- Validar campos en PHP
7.- Consejos

Demostraremos un caso de uso típico mediante una función simple para convertir una imagen a escala de grises.

Aunque el cálculo del color gris no es muy exigente, demuestra claramente el uso real de WebAssembly en la web: tareas de cálculo intensivo.

En ocasiones necesitamos saber la ubicación de un usuario que visita una página web. Aquí te mostraremos como hacer una función mediante la API de geolocalización del W3C.

La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.

En este artículo vamos a utilizar el API de Custom elements (Elementos HTML personalizados) para crear nuevas etiquetas y utilizarlas en nuestro código HTML, en futuras publicaciones explicaremos como se usan en conjunto con los otros 3 estándares.

Si hablamos de mapas en la web, sin duda la referencia más conocida es Google Maps. En su momento revolucionó la forma en que los mapas podían ser vistos en internet. Hoy en día mantiene su liderazgo en muchas cuestiones, como los servicios de geolocalización, datos de tráfico, cálculo de rutas…y además con cobertura global.

Google es la marca comercial más reconocida en el mundo. Esto contribuye, sin duda a la popularidad y extensión de Google Maps, pero es que además dispone de Maps JavaScript API que permiten visualizar, y publicar nuestros mapas en la web.

En este artículo veremos paso a paso cómo crear un mapa web con la API de Google Maps, analizamos sus ventajas e inconvenientes y lo comparamos con otras librerías de mapas open source.

Índice de Contenidos:
1.- Como crear un mapa web con la API JavaScript de Google Maps
1.1.- Carga de la librería Javascript de la API de Google Maps
1.2.- Añadiendo un marcador
2.- Ventajas e inconvenientes de la API de Google Maps
3.- Comparativa con las librerías OpenSource

Compañeros de convirtiéndote.pro este día les traigo un ejemplo sencillo de cómo crear nuestra primera librería en JS como les comento es algo sencillo para ir aprendiendo solo serian los primeros pasos de una librería extensa en un futuro.
¿De qué trata?, vamos a realizar nuestra primera librería que su tarea será validar formularios… de echo es un proyecto a futuro que me gustaría concretar y liberarla en forma, pero por falta de tiempo mejor tomare un poco de código y lo convertimos en un tutorial para ustedes.

En caso de que no os hayáis dado cuenta, soy un poco purista de la terminología. Así que, después de escuchar demasiadas veces el popular y, sin embargo, engañoso término de javascript "función anónima autoejecutable", he decidido finalmente organizar mis pensamientos en un artículo.

Además de proporcionar una información muy completa acerca de cómo funciona realmente este patrón, hago una recomendación sobre cómo deberíamos llamarlo.

Por favor, ten en cuenta que este artículo no pretende ser uno del tipo "yo tengo razón y tú estás equivocado". Estoy realmente interesado en ayudar a la gente a comprender conceptos potencialmente complejos, y creo que el uso de una terminología coherente y precisa es una de las cosas más fáciles que la gente puede hacer para facilitar la comprensión.

Las versiones más modernas de los mejores navegadores incluyen una funcionalidad para que los sitios web puedan controlar cómo se carga su código JavaScript y así evitar que sea modificado por usuarios maliciosos.

Aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

Esta es una guí­a (no oficial, ni estandarizada) sobre reglas, convenciones y buenas prácticas usados en el lenguaje de programación Javascript. Es inspirado en varios documentos de autores reconocidos en el ámbito Javascript, y que han sido adoptados por muchas personas, inclusive por grandes entidades tales como PayPal, Stronloop, entre otras.

Angular es el nuevo framework que Google está desarrollando y que todo el mundo está esperando, como puedes ver habló de nuevo, y también, vemos que no hay terminación JS, esto ya deja muy claro que con Angular 2 estamos ante una nueva plataforma de desarrollo, y no, una continuación de AngularJS.

Hoy vamos a ver unas pinceladas sobre JSON, qué es exactamente y cómo podemos utilizarlo.

Cufón es una librería JavaScript que te permite insertar de manera limpia cualquier tipografía en una página web, reemplazando mediante JavaScript los textos indicados por imágenes, con la única desventaja de que será dificil seleccionar el texto reemplazado y en consecuencia es casi imposible copiarlo al portapapeles.
En este tutorial aprenderás cómo usar cufón, algunas recomendaciones y ejemplos reales donde lo hemos utilizado.

Hoy te voy a presentar un software gratuito y open source para poner marcas de agua a una imagen. Lo que tienes que hacer es simplemente seleccionar la imagen, la marca de agua y listo.

Tabla de contenidos:
1 Marca de agua con PHP y JavaScript
2 Apartado técnico
3 Funciones útiles
4 API para colocar imagen
5 Lado del cliente
6 Poniendo todo junto

En este artículo vamos a hablar sobre el manejo de fechas con javaScript.

En este tutorial te mostraré cómo usar JavaScript y el canvas como medios para mostrar información numérica en la forma de gráficas de pastel y gráficas de dona.

En este tutorial te mostraré cómo usar JavaScript y el canvas de HTML5 como un modo de mostrar gráficamente datos usando gráficas de barras.

En este tutorial aprenderemos cómo usar el objeto XMLHttpRequest para hacer peticiones mediante Ajax en JavaScript. Veremos ejemplos con texto, xml y json.

¿Intentas que el renderizado del lado del servidor funcione con PHP para renderizar tu aplicación Vue.js pero se atasca?

Hay un montón de grandes recursos por ahí, pero hasta ahra no has encontrado nada que funcione de inmediato sin tener que investigar. Con suerte, después de esta entrada tendrás una mejor idea de cómo realizar el renderizado del lado del servidor para tu aplicación Vue.js!

Como ya sabes, hemos cubierto React y Angular.js en anteriores artículos, pero existe una nueva librería frontend que de seguro te interesará. Se llama Vue.js y cuenta con una gran comunidad de entusiastas desarrolladores detrás.

La filosofía de Vue.js es proporcionarnos una API lo más simple posible para crear proyectos de tal manera que la vista (HTML) y el modelo (Javascript) fluyan en perfecta sincronía. Como verás en los siguientes ejemplos, la librería se mantiene fiel a esa idea y es por eso que es muy sencillo trabajar con ella, sin comprometer ninguna otra funcionalidad.

El tema de la imágenes y JavaScript puede ser muy escueto o muy extenso. Si nos ceñimos a las propiedades esenciales del objeto Image a las que podemos acceder con este lenguaje, el manual resultaría muy corto, pero si nos adentramos en explicaciones de los múltiples script que se pueden construir basándose en estos elementos, el manual resultaría un libro. Vamos pués a buscar un término medio, limitándonos a comentar las propiedades, métodos y eventos propios, y ampliaremos un poco el tema viendo un par de aplicaciones prácticas.
- El objeto Image - La matriz images
- Propiedades del objeto Image
- Eventos en imágenes - El método constructor de objetos Image
- Aplicación práctica: Rollover simple
- Aplicación práctica: Rollover múltiple
- Conclusiones

Este artículo analiza JavaScript Object Notation (JSON), un formato de intercambio de datos abierto y basado en texto, que ofrece un intercambio estandarizado de datos, más conveniente para aplicaciones web de estilo Ajax.

Javascript Flash Detection Library es otra librería desarrollada en Javascript con la que podremos obtener información muy interesante sobre el plugin flash instalado en nuestro navegador.

Existen varios obstáculos que evitan que las aplicaciones interesantes se extrapolen (es decir, de implementaciones principalmente de servidor) a JavaScript del cliente. Algunas de estas aplicaciones incluyen compatibilidad de navegadores, escritura estática, accesibilidad y rendimiento. Afortunadamente, el rendimiento se está convirtiendo rápidamente en algo del pasado, pues los desarrolladores de navegadores mejoran con gran rapidez la velocidad de los motores JavaScript de estos.

De hecho, uno de los obstáculos que aún se mantienen en JavaScript es el lenguaje en sí. JavaScript es un entorno de subproceso único, es decir, que no se pueden ejecutar varias secuencias de comandos al mismo tiempo. Por ejemplo, imagina un sitio que necesite gestionar eventos de interfaz de usuario, solicitar y procesar grandes cantidades de datos de API y manipular los DOM. Algo muy común, ¿verdad? Desafortunadamente, todo esto no puede realizarse de forma simultánea debido a las limitaciones en el tiempo de ejecución de los navegadores de JavaScript. La ejecución de secuencias de comandos se realiza en un único subproceso.

Los desarrolladores imitan la "simultaneidad" utilizando técnicas como setTimeout(), setInterval() y XMLHttpRequest, así como gestores de eventos. Sí, todas estas funciones se ejecutan de forma asíncrona; sin embargo, que no se bloqueen unas a otras no significa necesariamente que tengan lugar de forma simultánea. Los eventos asíncronos se procesan después de haber generado la secuencia de comandos que se esté ejecutando en ese momento. La buena noticia es que HTML5 nos ofrece algo mejor que este tipo de trucos de hacker.

Cuando uno busca información sobre cómo optimizar un código, lo que esperamos encontrar es una serie de sencillas recetas y con un impacto muy significativo en la velocidad de nuestro programa. Lamentablemente, la optimización es algo bastante complejo y pocas veces es algo tan sencillo como cambiar una instrucción por otra o utilizar un sencillo truco. Las optimizaciones dependen mucho del contexto de ejecución, del objetivo de nuestro programa, de las restricciones con las que nos encontremos, etc.

En general, la optimización no es un área que permita una aproximación teórica, ya que los modernos motores de Javascript realizan una optimización muy intensiva en la ejecución del código y aquello que a primera vista podría parecer un código más complejo y con mayor número de instrucciones, en la práctica puede resultar más rápido al ejecutarse.

Vamos a dar 12 pistas prácticas sobre técnicas de optimización que se pueden aplicar en Javacript. Para ello vamos a utilizar un caso práctico: la función equal() que venimos explicando en los últimos artículos y que permite comparar cualquier tipo de dato. Vamos a ver que optimizaciones realizamos desde el principio del desarrollo, que pruebas hemos realizado para conocer que instrucciones eran más o menos rápidas y cómo hemos mejorado su velocidad desde unas 135.000 ejecuciones por segundo hasta conseguir 320.000 ejecuciones por segundo (2,3 veces más rápido).

Índice de Contenidos:
- ¿Qué es datatables?
- ¿Cómo usar?
- Aplicar Estilos
- Aplicar distintos idiomas