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>

<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:

Tabla de multiplicar

El código:

comentarios sobre el código:

Buscar

Entradas recientes

Archivos

Categorías

Meta

Seguir “Recursos didácticos”

Tabla de multiplicar

El código:

comentarios sobre el código:

Share this:

Me gusta:

Buscar

Entradas recientes

Archivos

Categorías

Meta

Seguir “Recursos didácticos”