javascript

Saber si es dígito en JavaScript

Hoy voy a mostrarte una función de JavaScript para saber si una cadena o carácter es un dígito, es decir, un número del 0 al 9. Para ello vamos a usar el código ASCII y la función charCodeAt.

Al final tendremos una función que nos permitirá saber si un carácter de JavaScript es un dígito, la cual funciona del lado del cliente y del servidor.

Voy a basarme en el funcionamiento de isalpha del buen C.

Continue reading…

Cargar JSON desde PHP usando jQuery y AJAX

AJAX, PHP y jQuery: carga de datos

AJAX, PHP y jQuery si bien no están ligados, se relacionan para crear aplicaciones web dinámicas usando tecnologías libres.

En este post te mostraré cómo usar la librería jQuery para traer datos HTML y JSON desde PHP, todo eso sin refrescar la página.

Para ello haremos una petición HTTP GET usando el método $.get de jQuery; de este modo vamos a poder usar la técnica de AJAX usando jQuery y PHP.

Continue reading…

Formulario enviado a PHP usando Ajax, diseño Bootstrap 4

Enviar formulario con AJAX y PHP

Enviar datos a PHP usando AJAX

En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX.

Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita.

Continue reading…

Enfocar input o textarea con JavaScript

En este post te mostraré a enfocar o darle focus a un elemento de un formulario de HTML usando JavaScript, ya sea un input o un textarea.

Enfocar un elemento en JavaScript es hacer que, cuando el usuario comience a escribir usando el teclado, el texto aparezca en el campo de texto, en pocas palabras que se enfoque el input o textarea.

Para esto vamos a usar querySelector, pues necesitamos una referencia al DOM.

Continue reading…

Documento modificado con querySelector y querySelectorAll en JavaScript

querySelector y querySelectorAll en JavaScript

Explicación de querySelector y querySelectorAll en JavaScript

Introducción a querySelector y querySelectorAll en JS.

En este post te explicaré dos funciones de JavaScript que funcionan para obtener referencia a un elemento del DOM. Estoy hablando de:

  • document.querySelector
  • document.querySelectorAll

Que bien son un remplazo de document.getElementById y otras funciones un poco complejas.

Continue reading…

Asociar información a elementos dinámicos con JavaScript

JavaScript – Asociar información a elementos dinámicos con data-*

Uso de los atributos data en HTML y JavaScript

Los atributos data de HTML son atributos personalizados que ayudan a asociar información a un elemento HTML (incluso si es creado de manera dinámica) con JavaScript.

Estos atributos vienen de maravilla cuando tenemos elementos dinámicos y queremos acceder a ellos en el click de un botón o de ellos mismos.

Lo que haremos hoy es ver cómo asociar información de una variable de JavaScript a un elemento HTML para después recuperarla en el click del botón:

Asociar información a elementos dinámicos con JavaScript

Demostración de click del botón al agregar información con los atributos data

Accede a la demostración aquí.

Continue reading…

Dibujar tabla HTML con JavaScript - Tabla dinámica de productos

Dibujar tabla HTML dinámica con JavaScript

Renderizar o dibujar una tabla HTML con JavaScript

En este post te mostraré a crear una tabla dinámica o elemento <table> de HTML con JavaScript. Es decir, con JavaScript puro dibujar una tabla, agregarle filas y columnas.

Para ello no usaremos ningún framework. Las funciones que veremos son:

  • document.createElement – Para crear un elemento, en este caso el tr y el td
  • document.querySelector – Obtener referencia a elementos del DOM
  • elemento.appendChild – Adjuntar un elemento hijo a otro elemento

Lo que vamos a dibujar en la tabla es un arreglo. Es decir, a partir del arreglo vamos a dibujar una tabla HTML con JavaScript de manera dinámica.

Continue reading…