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: