HTML CON JAVASCRIPT

MATRICES

 

PRODUCTO DE DOS MATRICES 3x3

 

Vamos a construir un documento en formato HTML, visualizable con un navegador, que incluya una pequeña aplicación JavaScript y permita multiplicar dos matrices cualesquiera de dimensión 3x3. Al introducir las matrices A y B, y pulsar un botón, debe calcular y mostrar la matriz producto C=AxB.

Pretendemos un resultado como el de la siguiente figura:

 

 

JavaScript puede manejar matrices con un tipo de variables que denomina arrays. Pero sólo permite una dimensión , por lo que una matriz hay que tratarla como un vector o array cuyos elementos (las filas)  son a su vez otros vectores o arrays (las columnas).

En el caso del producto reiterado de una matriz por sí misma obtenemos la potencia de una matriz.

 

 

Si es preciso consulta la introducción a HTML que figura en el archivo intro.

 

CÓDIGO

 

A continuación se propone el siguiente código en HTML . Introdúcelo en el Bloc de notas (Notepad) o utiliza el procedimiento de “copiar y pegar”. Puedes guardarlo en formato “solo texto” con nombre matrices.htm. No olvides la extensión .htm para que sea interpretado como un documento en formato HTML y puedas visualizarlo en tu navegador (Explorer o similar).

 

<html>   

 <head>

  <title>Producto de matrices

</title>

   <script >

     var a=new Array(3);b=new Array(3);c=new Array(3)

     function producto()

     {

      for(i=1;i<=3;i++)

       {   a[i]=[0,0,0,0];b[i]= [0,0,0,0];c[i]= [0,0,0,0]

            for(j=1;j<=3;j++)

             {  a[i][j]=parseFloat(document.matriza[3*i+j-4].value)

                 b[i][j]=parseFloat(document.matrizb[3*i+j-4].value)    }    }

      for(i=1;i<=3;i++)

       {   for(j=1;j<=3;j++)

              { c[i][j]=0

                     for(k=1;k<=3;k++)

                       {c[i][j]=c[i][j]+a[i][k]*b[k][j]  }

                document.matrizc[3*i+j-4].value=c[i][j]  }    }

      }

    </script>

 </head>

<body text=white bgcolor=blue>

Producto de matrices (3x3)

<form name="matriza">

A=<BR> <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">     

            <input type="text" size="3">

</form>

<form name="matrizb">

B=<BR> <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">     

            <input type="text" size="3">

            <input type="button" value="Hallar producto" onClick=" producto()">

</form>

 

<form name="matrizc">

Matriz producto C=AxB<BR>

            <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">     

            <input type="text" size="3">

  </form>

 </body>

</html>

 

DESCRIPCIÓN:

 

Hay que distinguir dos partes:

·        La primera es la cabecera ( incluida entre <head> y </head>) y contiene un título del documento y una construcción con JavaScript ( incluida entre <script> y </script>) donde se define una función producto( ).

Esta función producto( ) lee los elementos de las matrices A y B que hayamos introducido, los almacena en las variables a[i][j] y b[i][j] y a continuación halla el producto elemento a elemento y lo almacena en la variable c[i][j]. Por último , muestra el resultado en el formulario correspondiente asignando el valor de cada elemento c[i][j] a la propiedad value de cada casilla del formulario matrizc con la expresión document.matrizc[...].value=c[i][j] .

Los elementos de la matriz A se van a almacenar en una variable a para los cálculos posteriores: a[1] contendrá la primera fila, a[2] la segunda y a[3] la tercera. Cada a[i] contendrá a su vez los tres elementos de la columna i. Estos valores se denominarán a[i][1], a[i][2], a[i][3]. De igual forma se almacena la matriz B. Antes de empezar conviene inicializar o asignar un valor inicial a las variables a y b ( también c )para evitar entre otras cosas que conserven valores previos. Ello se consigue con la asignación a[i]=[0,0,0]. Pero JavaScript empieza las series con 0 como primer elemento en vez de con 1. Por ello asignamos a[i]=[0,0,0,0] aunque a[0] no lo utilicemos. También inicializamos b[i] y c[i].

En primer lugar hay que “leer” los datos que el usuario introduce en las 9 casillas del formulario matriza. Lo hacemos asignando a a[i][j] el elemento de la fila i y columna j de la matriz a.

Dentro de cada formulario las 9 casillas se numeran de 0 a 8. Por ello el elemento j de la fila i sería en principio [3i+j] ya que cada fila tiene 3 elementos (piensa en algún valor concreto de i y j). Sin embargo como el primer elemento es 0 en vez de 1 sería en realidad [3(i-1)+(j-1)] que podríamos simplificar como [3i+j-4].

En resumen la asignación correspondiente se obtiene con la expresión:

 

a[i][j]=document.matriza[3*i+j-4].value

 

Conviene añadir parseFloat para que el valor sea tomado como un número en vez de cómo un “texto”. De no ser así 5+3 aparecería como 53 en lugar de 8.

De igual forma se trata la matriz B.

 

·        La parte final ( incluida entre <body> y </body>) contiene lo que realmente se visualiza en pantalla. Tras un título aparecen tres “formularios” ( definidos entre <form> y </form>) que contienen cada uno 9 casillas (numeradas de [0] a [8]) para albergar los elementos de las matrices A, B y C .

El primer formulario es matriza y contiene casillas ( definidas con <input type="text" size="3"> )para introducir los 9 elementos de A.

El segundo formulario es matriz b .Además de las 9 casillas para albergar los elementos de B se añade una casilla 10 para contener un botón “Hallar producto” que al ser pulsado invoca la función producto( ) y la ejecuta.

El tercer formulario es matrizc y contiene los elementos de la matriz producto C=AxB hallados por la función producto( ).

 Las etiquetas <BR> provocan un salto de línea. La instrucción size=3 establece un tamaño para las casillas.

 

UTILIZACIÓN:

 

Una vez abierto el documento en tu navegador ( basta hacer doble clic sobre el archivo prodmatrices.htm) sitúa el cursor en la primera casilla de a matriz A e introduce el primer elemento. Pulsando la tecla tabulador irás pasando a la casilla siguiente. Tras introducir todos los elementos de las matrices A y B con sus signos pulsa el botón “Hallar producto” y el resultado se mostrará en las casillas del formulario inferior.

 

PRÁCTICA:

 

Para probar introduce como matriz A la matriz identidad y como B una cualquiera. Comprueba que el producto coincide con B.

 

Efectúa el siguiente producto:

Comprueba que la matriz producto tiene su primera fila igual al doble de la de B, su segunda fila igual a la primera de B y su tercera fila igual a la suma de las tres filas de B. Relaciónalo con los elementos de cada fila de A.

Sitúa el cursor en la primera casilla de B, modifica su valor y pulsa el botón “Hallar producto” ( no es preciso reintroducir la matriz A). Repite la práctica cambiando la matriz B.

 

Halla los siguientes productos:

 

          

 

          ¿Es commutativo el producto de matrices?

 

             ¿Son A y B inversas?

 

     Relaciona la matriz B con el método de Gauss.

 

          ¿A2?                         ¿A3?


AMPLIACIÓN

 

Puedes elaborar un documento análogo para el producto de matrices de dimensión 4x4 sin más que aumentar los contadores (por ejemplo for(i=1;i<=4;i++) ) y añadir una fila y una columna más de casillas a los formularios.

 

En lugar de matriza, matrizb y matrizc podemos denominar los formularios como form[0], form[1], y form[2] aludiendo al primer, segundo y tercer formulario del documento, independientemente del nombre asignado con name=. Esta forma de nombrarlo es más general y permite, entre otras cosas, aprovechar parte de un código en otro documento mediante la técnica de “cortar y pegar” facilitando su adaptación.

 

Una manipulación en el documento te permitiría comprobar la propiedad asociativa del producto de matrices (para tres matrices cualesquiera). Deberías incluir tres formularios para las matrices A, B, C y otros dos para los resultados de (AxB)xC y Ax(BxC). Además deberías aplicar la función producto varias veces. El código sería muy extenso pero tiene muchas partes similares que pueden “copiarse y pegarse” para después modificarlas levemente. Se puede evitar la repetición de la función producto incluyendo “argumentos” e invocándola varias veces con argumentos distintos.

 

Unas sencillas modificaciones te permitirán elaborar un documento que obtenga la potencia enésima de una matriz A. Para ello eliminamos el formulario de la matriz B y añadimos una casilla al formulario de A para introducir el exponente (que convertiremos en un número entero con la función ParseInt) y otra para invocar a la función correspondiente. Dicha función no sería más que la función producto repetida n veces,  tomando en cada repetición el producto anterior como nueva matriz B.

A continuación se muestra una propuesta de elaboración que puedes “copiar y pegar” para después guardarla como potmatriz.htm (no olvides la extensión .htm).

 

 

<html>   

 <head>

  <title>Potencia de matrices

</title>

   <script >

     var a=new Array(3);b=new Array(3);c=new Array(3)

  function potencia()

  {  n=parseInt(document.matriza[9].value)

     for(i=1;i<=3;i++)

       {   a[i]=[0,0,0,0];b[i]=[0,0,0,0];c[i]=[0,0,0,0]

            for(j=1;j<=3;j++)

             {  a[i][j]=parseFloat(document.matriza[3*i+j-4].value)

                b[i][j]=a[i][j]    } }  

     for (e=1;e<n;e++)

       { for(i=1;i<=3;i++)

         { for(j=1;j<=3;j++)

           { c[i][j]=0

                  for(k=1;k<=3;k++)

                   {c[i][j]=c[i][j]+a[i][k]*b[k][j] } } }

             for(i=1;i<=3;i++)

         { for(j=1;j<=3;j++)

           { b[i][j]=c[i][j] } } }

     for(i=1;i<=3;i++)

         { for(j=1;j<=3;j++)

           { document.matrizan[3*i+j-4].value=c[i][j] } }

   }

    </script>

 </head>

<body text=white bgcolor=blue>

Potencia de una matriz(3x3)

<form name="matriza">

A=<BR>         <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">     

            <input type="text" size="3">

exponente n=<input type="text" size="3">

<input type="button" value="Hallar potencia" onClick="potencia()">

</form>

<form name="matrizan">

Matriz A^n<BR><input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">

            <input type="text" size="3"><BR>

            <input type="text" size="3">

            <input type="text" size="3">     

            <input type="text" size="3">

  </form>

 </body>

</html>

 

Pruébalo con algunas matrices fáciles de comprobar y luego con otras cualesquiera.

Considera A=. Halla A2, A3 y A9.

 

Considera A=. Halla An calculando A2, A3 , A4....