Generador de tablas de multiplicar PHP y JavaScript

Hoy les traigo dos generadores de tablas de multiplicar elaborados el primero con: jQuery, AJAX y PHP; y el segundo solo con JavaScript y jQuery. Estos códigos resultaran sencillos para gente con conicimientos más avanzados, pero ayudarán a mucha gente a aprender a utilizar y a compreder los bucles.

Tabla de multiplicar generada con ese código

El código lo que hará es generar tablas de multiplicar a partir de dos rangos de números que proporcionará el usuario mediante un formulario

Como siempre, al final tendréis los enlaces para descargar los archivos completos.

Opción 1 (PHP, jQuery y AJAX)

Demo: Click aquí

Esta opción es la más completa si estás aprendiendo ya que tiene un poco de todo, pero también consume más ancho de banda CPU. Esto es por que en el que está hecho solo en JavaScript todo el trabajo corre a cargo del navegador del usuario, mientras que en este cada vez que se pulsa el botón de generar se envía una petición al servidor.

El script estará dividido en dos archivos: index.html que contendrá el formulario y la petición AJAX, y generar.php que generará la tabla.

Index.html

Código JavaScript

Código HTML

Código CSS

Para dar estilo a la tabla

 

Generar.php

 

Opción 2 (Javascript y jQuery)

Demo: Click aquí

Esta es la opción recomendada en caso de querer instalar el generador en un servidor para uso público ya que todo el trabajo correrá a cargo del navegador del usuario y no de tu servidor. Por lo que podríamos permitir crear tablas más grandes sin miedo a que nuestro servidor sufra ningún daño. Aunque de esta forma también pueden sacar el código completo usando Inspeccionar elemento.

En este caso el script tendrá un único archivo: index.html que contendrá el formulario y el generador.

Código Javascript

Código CSS

El código CSS es exactamente igual al del código anterior.

Código HTML

Muy parecido al de la opción anterior pero cambiamos el aviso.

 

Aquí os dejo los dos códigos completos para descargar:
https://drive.google.com/open?id=0B1Tle40_yEIOQ2FCNTVSNlRkTkE

¡Hasta la próxima!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *