Saltar al contenido

Tabla de multiplicar

El presente ejemplo mezcla HTML, CSS y JavaScript con el objetivo de gestionar una tabla en la que aparezcan las tablas de multiplicar para practicar sobre ellas y aprendérselas.

Aquí puedes ver su funcionamiento.

El código:

<html>
<head>
<title>Tablas de multiplicar (JBFB)</title>
<style type="text/css"> 
 body { background-color:#b0c4de; text-align:center;}
 h1 {text-align:center; color:#0E049B;}
 #tabla_mul { border: 2px inset; margin:auto;}
 td { color:black; font-family:Verdana; text-align:center;
 width:70px; border:1px inset;}
</style>
<script type="text/javascript">
onload = function() {
 if (!document.getElementsByTagName || !document.createTextNode) return;
 var operacion = ""; 
 var resultado = ""; 
 var valor = 0; 
 var tablasel = ""; 
 for (i = 0; i < 10; i++) {
 var celdas = document.getElementById('tabla_mul').getElementsByTagName('tr')[i].getElementsByTagName('td');
 for (j = 0; j < 10; j++) { 
 celdas[j].innerHTML= (j+1) +" x " + (i+1); 
 celdas[j].name= (j+1) *(i+1)
 celdas[j].onclick=function() {
 if (operacion.substring(0, 2)>9) {
 valor =operacion.substring(0, 2); 
 }
 else {
 valor =operacion.substring(0, 1); 
 }
 tablasel="Tabla del: " + valor + "\n" + "\n";
 for (var k=1;k<11;k++){
 tablasel= tablasel + valor + " x " + k + " = " + valor * k + "\n" + "\n";
 }
 alert(tablasel);
 }
 celdas[j].onmouseover=function() {
 this.style.fontWeight="bold";
 this.style.color='blue';
 this.style.backgroundColor="yellow";
 operacion=this.innerHTML;
 nombre=this.name;
 this.innerHTML=nombre;
 }
 celdas[j].onmouseout=function() {
 this.style.fontWeight="normal";
 this.style.color='black';
 this.style.backgroundColor="#b0c4de";
 this.innerHTML=operacion;
 }
 }
 }
}
</script>
</head>
<body>
<h1>Tablas de MULTIPLICAR</h1>
<br>
<table id="tabla_mul" >
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<p> Si quieres repasar una tabla, haz clic en cualquiera de las casillas de la columna de la tabla deseada.</p>
<p> Para practicar, piensa en el resultado de una operación y a continuación pon sobre ella el cursor para comprobarlo.</p>
</body>
</html>

comentarios sobre el código:

<html>

<head>

<title>Tablas de multiplicar (JBFB)</title>

<!–Encierra el código CSS “insertado en el HTML”
(Así se indican los comentarios multilinea en HTML) –>
<style type=“text/css”>
/* Se establece el formato de cada elemento
(Así se hace un comentario multilinea en CSS */

body { background-color:#b0c4de; text-align:center;}
h1 {text-align:center; color:#0E049B;}
#tabla_mul { border: 2px inset; margin:auto;}
td { color:black; font-family:Verdana; text-align:center;
width:70px; border:1px inset;}
</style>

<!–Encierra el código JavaScript “insertado en el HTML” –>
<script type=“text/javascript”>

/* Se ejecutará esta función “function() { }” cuando la página haya sido
cargada completamente “onload” (Así se indican los comentario multilinea
en JavaScript) */
onload = function() {

          // Si la página Web no tiene etiquetas “o” nodos, se sale de la función sin más “return”
          // (Así se indican los comentarios de una sola línea en JavaScript)
          //Este if es de una sola línea no icluye llaves “{}”
          if (!document.getElementsByTagName || !document.createTextNode) return;

                 //Se definen las variables: (“los cajones” que se van a utilizar para guardar “datos”)

                 //Guardará la operación de cada celda; por ejemplo “4 x 5″ si es la fila “4″ y celda “5″
                var operacion = “”; //Se inicializa con un valor vacío

                 //Guardará el resultado de cada operación; por ejemplo “20″ siguiendo el ejemplo anterior
                 var resultado = “”; //Se inicializa con un valor vacío

                  //Contendrá el 1er ó 1er y 2º valor de la operación; por ejemplo “4 ” ó “10″
                 //según la columna en la que se haga clic “4 x …” ó “10 x …”
                 //De la 1 a la 9, un dígito, en la 10, dos dígitos.
                 var valor = 0; //Se inicializa con un valor de 0

                /*Guardará todas las líneas de la tabla de multiplicar que se quiera mostrar,
                incluidos los retornos de carro y avances de línea “\n”. Por ejemplo
                2 x 1 = 2

                2 x 2 = 4

                …

                2 x 10 = 20
                 */
                var tablasel = “”;

      /*Realiza el bloque siguiente 10 veces, una para cada fila “tr” [i] de la 
      tabla “tabla_mul”. Desde i= 0, hasta 9 “i<10″, incrementando a cada pasada
      la “i++” en una unidad: 0, 1, 2, …, 9 */
      for (i = 0; i < 10; i++) { //El +1 es porque las matrices comienzan en 0, no en 1

             /*Guardará en la variable del tipo matriz “celdas” el conjunto de todas las celdas 
             “td” (10) en la fila “tr” [i] que esté barriendo de la tabla “tabla_mul”*/
              var celdas = document.getElementById(‘tabla_mul’).getElementsByTagName(‘tr’)[i].getElementsByTagName(‘td’);

              /*Realiza este bloque 10 veces, una por cada celda de la fila “tr” [i]
               barrida por la variable “j”: 0, 1, …, 9*/
               for (j = 0; j < 10; j++) {

                      /*En la celda por la que pase [j], escribe “innerHTML” la OPERACIÓN 
                      oportuna: “3 x 4″, “8 x 8″, “5 x 7″, etc. según la fila y celda barridas (j , i) */
                      celdas[j].innerHTML= (j+1) +” x ” + (i+1);

                       /*Coloca como nombre de la celda [j], el RESULTADO de la operación
                       oportuna: “12″, “64″, “35″, etc. (j * i) siguiendo el ejemplo anterior*/
                       celdas[j].name= (j+1) *(i+1)

                       /*La siguiente operación, graba en cada celda [j] la función que se ejecutará
                        al hacer CLIC sobre ella “onclick” (eventos) — mostraría la tabla de multiplicar
                        del número de la columna correspondiente — */
                        celdas[j].onclick=function() {

                                 /*Comprueba si el valor de la columna sobre la que se hizo clic 
                                 es de uno o dos dígitos. 
                                 De la variable “operación” extrae la subcadena “substring” que comienza
                                 en el primer elemento por la izquierda “0″ con una longitud de “2″ dos
                                 caracteres */
                                  if (operacion.substring(0, 2)>9) { //si es mayor que 9, entonces son dos dígitos
                                        //Guarda en valor el dato “10″ que es la tabla que queremos representar
                                        valor =operacion.substring(0, 2); 
                                        }//fin del if
                                  else { //en caso contario, es de solo un digito
                                          // Guarda en valor el dato entre “1″ y “9″ de la tabla a representar
                                          valor =operacion.substring(0, 1); 
                                          }//fin del else

                                  /*Escribe en la variable tablasel el encabezado que indica la tabla de
                                  multiplicar que se va a mostrar, incluyendo dos línea en blanco*/
                                  tablasel=“Tabla del: “ + valor + “\n” + “\n”;

                                  /*Hace un barrido desde k=1 hasta k=10 para obtener en cada pasada
                                  cada una de las líneas de la tabla de multiplicar que marque “valor”,
                                  añadiendo dos línea en blanco “\n” para separarlas */
                                  for (var k=1;k<11;k++){
                                         //En cada pasada se añade una de las líneas de la tabla de multiplicar
                                         tablasel= tablasel + valor + ” x “ + k + ” = “ + valor * k + “\n” + “\n”;
                                         }//fin del for

                                         //Concluido el barrido y obtenida la tabla, se muestra por pantalla
                                         alert(tablasel);
                                  }//fin del onclick

                        /*Graba en cada celda [j] las acciones a realizar cuando sobre ella se
                        presente el evento “onmouseover”; es decir, cuando pasemos por ENCIMA el 
                        cursor — Sobre la celda se verá el resultado de la multilicación — */
                        celdas[j].onmouseover=function() {
                                 this.style.fontWeight=“bold”; //El contenido de la celda se pone en negrilla
                                 this.style.color=‘blue’; //Con las letras de color azul
                                 this.style.backgroundColor=“yellow”; //Con el fondo de color amarillo

                                 /*Guarda en la variable “operación” el contenido actual “innerHTML” que figure
                                 en la celda “this”, para restituirlo cuando quitemos el cursor de encima de
la celda*/
                                 operacion=this.innerHTML;

                                 /*Obtiene el nombre de la celda que es el resultado de la
                                 operación. Si “operación” era “7 x 9″, en “nombre” habrá “63″ */
                                 nombre=this.name;

                                 /*Hace que sobre la celda que se pone el cursor se muestre el resultado
                                 correspondiente, en este caso se verá el número “63″ en color azul, negrilla
                                 sobre fondo amarillo*/
                                 this.innerHTML=nombre;
                                 }//fin de onmouseover

                        /*Graba en cada celda [j] las acciones a realizar cuando sobre ella se
                        presente el evento “onmouseout”; es decir, cuando SAQUEMOS el cursor de ella*/
                        celdas[j].onmouseout=function() {
                                 this.style.fontWeight=“normal”; //quita la negrilla
                                 this.style.color=‘black’;//Escribe las letras en negro
                                 this.style.backgroundColor=“#b0c4de”;//Restituye el color del fondo

                                 /*Recupera el valor de la operación para mostrarlo en la celda. En este caso
                                 escribiría el valor que al entrar guardo; es decir, “7 x 9″ para que la celda
                                 quede como antes de entrar en ella, mostrando la operación a averiguar*/
                                 this.innerHTML=operacion;
                                 }//fin de onmouseout
               }//fin del for [j]
      }//fin del for [i]
}//fin del onload

</script>

</head>

<body>

<h1>Tablas de MULTIPLICAR</h1>

<br>

<table id=“tabla_mul” >

<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>

</table>

<p> Si quieres repasar una tabla, haz clic en cualquiera de las casillas de la columna de la tabla deseada.</p>

<p> Para practicar, piensa en el resultado de una operación y a continuación pon sobre ella el cursor para comprobarlo.</p>

</body>

</html>

Para consultas:

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: