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.

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.

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.

Hace un par de días llegó a CódigoFacilito una pregunta acerca de web. La pregunta iba algo por el estilo. Con input, ¿Cómo puedo llamar a una función en Go cuando se haga clic sobre un botón y de esta forma pintar el resultado en pantalla?, en otras palabras, lo que se desea es un buscador simple, un buscador que no necesite recargar la página para mostrar el resultado.

Lo primero que se vino a mi mente fue, utiliza Ajax, sin embargo, después de un par de segundos caí en cuenta que existen diferentes formas en las cuales desde el cliente, con Javascript, es posible realizar peticiones a un servidor. Así que me di a la tarea de escribir este pequeño post para todas aquellas personas que se encuentran comenzando con el desarrollo web, esto con la finalidad que tengan un panorama más amplio y sepan elegir qué forma se adapta mejor a sus necesidades; Espero les sea de ayuda.

Articulo que te detalla todos los eventos relacionados con una imagen.

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

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.

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.

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

JSON es la abreviatura de Javascript Objecto Notation y se trata de una forma de almacenar información de forma organizada y de fácil acceso. Veamos cómo.

Uno de los errores más comunes que observamos en las herramientas de análisis de optimización web como GTMetrix, Pingdom Tools o Google PageSpeed es el denominado “Defer Parsing JavaScript“, que traducido vendría a ser algo así como “Aplazar la carga de JavaScript“.

Índice de Contenidos:
1 ¿Qué es eso de Defer Parsing JavaScript?
2 ¿Por qué es importante aplazar la carga de JavaScript?
3 Cómo aplazar la carga de JavaScript (Defer Parsing Javascript) en WordPress
4 Más maneras de aplazar la carga de JavaScript en WordPress
4.1 Añade el atributo ‘defer’ a tus JavaScripts
4.2 Cambiar la ubicación por defecto de JavaScripts de WordPress
4.3 Crea un JavaScript aparte
4.4 Lo que de verdad importa

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

Los formularios son un componente a veces esencial en una página web, ya que permiten la interacción con el usuario, pudiendo conseguir mediante ellos recoger información particular sobre sus gustos, opiniones, datos personales, etc, información que luego deberemos procesar en el servidor web para su correcta interpretación y uso. En este artículo hay una amplia explicación acerca de este tema.

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

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

En tanto tú puedes siempre validar datos en tu servidor, el tener validación adicional de datos en la página web tiene múltiples beneficios. En muchas formas, a los usuarios les molestan los formularios. Si validamos los datos de un formulario mientras el usuario lo llena, el usuario puede saber inmediatamente si ha cometido algún error; esto le ahorra tiempo de espera a una respuesta HTTP y le evita al servidor lidiar con entradas incorrectas en el formulario. Este artículo cubre la validación de datos de formulario dentro del contenido Web de un formulario.

Este artículo te enseñará en profundidad como abrir ventanas secundarias y configurar su forma.

Watermark es una librería jquery que nos permite crear marcas de aguas para nuestras imágenes de forma muy sencilla, y que utiliza para ello el nuevo concepto de Canvas que incluye HTML.

Todo lo necesario para entender el objeto Array en JavaScript lo encontrarás en este artítulo. Creación, longitud, concatenación, inserción y eliminación de elementos, modificar el orden de los elementos, convertir en cadena de texto y rango de los elementos. Realizado por Francisco J. Martín Mateos, Universidad de Sevilla

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.

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.

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

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

Dreamweaver contiene una utilidad para validar formularios en JavaScript sin necesidad de programar el código. Lo único que debemos hacer es crear el formulario en cuestión, y con unos simples clics, validar uno a uno los campos del mismo.

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.

Desarrollar aplicaciones en Javascript puede convertirse en todo un desafío una vez que empieza a crecer tanto la aplicación como el equipo, originalmente se pensó como un lenguaje para hacer efectos sencillos en la páginas estáticas, y estamos intentándolo usar para hacer aplicaciones mucho más complejas de lo que se pensó originalmente posible.

Aunque Javascript está avanzando a pasos agigantados, la compatibilidad con navegadores antiguos es todavía un problema, por ello la gente de Microsoft creó Typescript, un lenguaje Open Source basado en Javascript y que se integra perfectamente con otro código Javascript, solucionando algunos de los principales problemas que tiene Javascript

El navegador Internet Explorer 10 fue el primero que añadió soporte para "copiar y pegar" contenidos mediante el método Document.execCommand() de JavaScript. El resto de navegadores también han añadido soporte para esta funcionalidad, como por ejemplo Google Chrome, que lo soporta desde la versión 43.
seleccionado en el navegador se puede cortar o copiar en el portapapeles. Combinándola con otras técnicas, como la API Selection de JavaScript, puedes crear un botón llamado Copiar para copiar al portapapeles cualquier contenido de una página.

En este artículo veremos cómo crear un sistema de delegación de eventos del DOM en JavaScript.