HTML.js

/*
 * Dynamische Veränderungen des HTML, 
 * Aufbau und Wertzuweisungen des Daten-Objektes, das die Matrix repräsentiert (s. math.js)
 * 
 * Es ist bei dem Programm wichtig, dass man unterscheidet zwischen der Matrix 
 * 1) in Tabellenform und
 * 2) in Object-Form.
 * 
 * Elemente von 1) werden immer in HTML-Schreibweise wie thisTD, thisTABLE etc. benannt,
 * wobei Elemente von 2) immer mit Matrix-Begriffen wie thisMatrix, thisRow, thisCol etc. bezeichnet werden.
 * 
 * Ich habe versucht, alle HTML-Operationen in diese Datei zu legen und alle
 * Object-Operationen in math.js. Es ist jedoch nicht immer praktisch, diese Trennung
 * rigoros durchzuziehen, weshalb manchmal beide Objekte (das HTML- und das JavaScript-Object)
 * in einer Datei angesprochen werden.
 */

	var
	allMatrices = document.getElementsByClassName ('matrix'),
	OperationsDIV =
	// die Box mit den elementaren Umformungen
	{
		Box : document.getElementById ('row-operations'),
		show : function ()
		// zeigt die Box neben einer Matrix an
		{
			var
			MatrixNr = parseInt(this.getAttribute ('data-matrix'));
		
			// der Box die Matrix.ID zuweisen
			OperationsDIV.Box.setAttribute ('data-matrix', MatrixNr);
					
			// die Box neben der Matrix anzeigen
			OperationsDIV.Box.style.left = this.offsetLeft + this.offsetWidth + 10 + 'px';
			OperationsDIV.Box.style.top = this.offsetTop + 'px';
			OperationsDIV.Box.style.visibility = 'visible';
			TweenLite.to (OperationsDIV.Box, 0.5, {opacity: 0.9});
		},
		hide : function ()
		// versteckt die Box
		{
			OperationsDIV.Box.style.opacity = 0;
			OperationsDIV.Box.style.visibility = 'hidden';
		}
	}; // OperationsDIV -----------------------------------------------------
	
	for (i = 0; allMatrices[i]; i++)
	{
		var inputs = allMatrices[i].getElementsByTagName('input');
		// jedem Matrix-Input Event-Handler zuweisen
		for (j = 0; inputs[j]; j++) {
			inputs[j].value = "0";
			inputs[j].addEventListener ('keydown', buildMatrix);
			inputs[j].addEventListener ('keydown', function ()
			// passt die Größe des Inputs dynamisch an
			{
				this.style.width = Math.sqrt(this.value.length) * 2 + 'em';
				// verschiebt die row-operations Box dynamisch
				this.parentNode.parentNode.parentNode.parentNode.onmouseover();
			});
			inputs[j].addEventListener ('keydown', OperationsDIV.hide);
			// das Daten-Objekt updaten
			inputs[j].onblur = Matrix.update; 
		}
	}

function buildMatrix (event) 
// erweitert die HTML- und die Daten-Objekt-Matrix um Zeilen und Spalten
{
	var
	buildCol = function (row, col)
	// erstellt für jede vorhandene Zeile eine neue Spalte mit Element
	{
		var
		/* falls row/col als Argument übergeben wurde, Werte übernehmen. 
		*  Sonst die Werte aus dem Daten-Objekt nehmen */
		dataRow = row || thisMatrix.rows,
		dataCol = col || thisMatrix.cols,
		
		// HTML-Element erstellen
		TD = document.createElement ('td'),
		INPUT = document.createElement ('input');
		
		// Wertzuweisung an die neue Spalte des Daten-Objektes
		thisMatrix[row][col] = 0;
		
		// Attribute setzen
		INPUT.addEventListener ('keydown', buildMatrix);
		INPUT.addEventListener ('keydown', function ()
		{
			// passt die Größe des Inputs dynamisch an
			this.style.width = Math.sqrt(this.value.length) * 2 + 'em';
			// verschiebt die row-operations Box dynamisch
			thisTABLE.onmouseover();
		});
		INPUT.onblur = Matrix.update;
		INPUT.value = "0";
		
		// neues Element zusammenbauen und zurückgeben
		TD.appendChild (INPUT);
		TD.setAttribute ('data-matrix', MatrixID);
		TD.setAttribute ('data-row', dataRow);
		TD.setAttribute ('data-col', dataCol);
		TD.focus ();
		
		return TD;
	}, // buildMTD () 
	
	buildRow = function ()
	// neue Matrix-Zeile erzeugen
	{
		var
		row = thisMatrix.rows,
		col = thisMatrix.cols,
		TD,
		TR = document.createElement ('tr');
		
		// neue Zeile im Daten-Objekt erstellen
		thisMatrix[row] = {};
		
		for (i = 1; i <= col; i ++)
		// alle Spalten erzeugen und an neue Zeile anhängen
		{
			TD = buildCol (row, i);
			TR.appendChild (TD);
		}
		return TR;
	}, // buildMTR () 
	
	Key = event.keyCode;
	
	if (Key == 32 || Key == 13) // Leertaste oder Enter gedrückt
	// Matrizeneinträge erstellen und löschen
	{
		// Leerzeichen verhindern
		event.preventDefault ();
		
		var
		MatrixID = parseInt(this.parentNode.getAttribute('data-matrix')),
		thisMatrix = Matrix[MatrixID], // aktuelles Matrix-Objekt
		thisRow = parseInt(this.parentNode.getAttribute('data-row')), // aktuelle Zeile
		thisCol = parseInt(this.parentNode.getAttribute('data-col')), // aktuelle Spalte
		thisTABLEBODY = this.parentNode.parentNode.parentNode;
		thisTABLE = thisTABLEBODY.parentNode;

		switch (Key) 
		{
			case 32: // Leertaste 
				if (event.ctrlKey && thisMatrix.cols > 1)
				// Spalte löschen
				{ 
					var colTDs = thisTABLE.getElementsByTagName ('td'); // alle TDs in dieser Spalte
					for ( i = 0; colTDs[i]; i++)
					// die Spalte aus der Tabelle löschen
					{ 
						if (parseInt(colTDs[i].getAttribute('data-col')) == thisCol)
							colTDs[i].parentNode.removeChild (colTDs[i]);
					}
					
					// Matrix-Objekt aktualisieren
					thisMatrix.delCol (thisCol);
					//~ console.log (thisMatrix);
				}
				else
				// neue Spalte
				{
					var 
					allTRs = thisTABLE.getElementsByTagName ('tr');
					
					thisMatrix.cols += 1;
					for (i = 1; i <= thisMatrix.rows; i++)
					// in jeder Zeile, eine Spalte anhängen
					{
						var newTD = buildCol (i, thisMatrix.cols);
						allTRs[i-1].appendChild (newTD);					
					}
				}
			break;
			
			case 13: // Enter
				if (event.ctrlKey && thisMatrix.rows > 1)
				// Zeile löschen
				{ 
					thisTR = this.parentNode.parentNode;
					thisTR.parentNode.removeChild (thisTR);
					// Matrix-Objekt
					thisMatrix.delRow (thisRow);
					//~ console.log (thisMatrix);
				}
				else
				// neue Zeile
				{
					thisMatrix.rows += 1;
					var newTR = buildRow ();
					// am Ende neue Zeile an's Markup anhängen
					thisTABLEBODY.appendChild (newTR);
					// neues Input fokussieren
					newTR.firstChild.lastChild.focus ();
				}
			break;
		}
		// Box für elementare Zeilenumformungen richtig ausrichten
		thisTABLE.onmouseover ();
	} // Enter oder Leertaste gedrückt
	
} // buildMatrix ()  -----------------------------------------------------

function outputHTML (Matrix)
// eine Matrix in MathML bauen
{
	var
	TABLE = document.createElement ('table'),
	TR,
	TD,
	value,
	protocol = document.getElementById('protocol');
	
	for (i = 1; i <= Matrix.rows; i++)
	{
		TR = document.createElement ('tr');
		for (j = 1; j <= Matrix.cols; j++)
		{
			TD = document.createElement ('td');
			if (typeof Matrix[i][j] == 'number')
				// es liegt eine Zahl vor
				value = Matrix[i][j];
			else
				// es liegt ein Bruch in Array-Form vor
				value = Matrix[i][j][0] + "/" + Matrix[i][j][1];
				
			TD.innerHTML = value;
			TR.appendChild (TD);
		}
		TABLE.appendChild (TR);
	}
	TABLE.className = "matrix";
	TABLE.setAttribute ('data-matrix', Matrix.ID);
	TABLE.onmouseover = OperationsDIV.show;
	// die Box für die Zeilenumfomung verstecken
	OperationsDIV.hide ();
	// neue Tabelle an's Protokoll anheften
	protocol.insertBefore (TABLE, protocol.firstChild);
	// Tabelle einfaden
	TABLE.style.opacity = 0;
	TweenLite.to (TABLE, 0.8, {opacity: 1});
} // outputHTML () -----------------------------------------------------


(function ()
{
	var
	matrixTABLES = document.getElementsByClassName ('matrix'),
	ABbtn = document.getElementById('AB-btn'),
	BAbtn = document.getElementById('BA-btn'),
	swapLines = document.getElementById ('swap-lines'),
	swapLinesBtn = swapLines.getElementsByTagName ('button')[0],
	addToLine = document.getElementById ('add-to-line'),
	addToLineBtn = addToLine.getElementsByTagName ('button')[0],
	multiplyLine = document.getElementById ('multiply-line'),
	multiplyLineBtn = multiplyLine.getElementsByTagName ('button')[0],
	closeOperations = document.getElementById('close-operations');
	
	// zwei Matrizen-Objekte erzeugen für die bereits bestehenden Tabellen der Matrix A und B
	for (i = 1; i <= 2; i++)
		Matrix.newMatrix ();
	
	for (i = 0; matrixTABLES[i]; i++)
		matrixTABLES[i].onmouseover = OperationsDIV.show;
		
	ABbtn.onclick = function ()
	{
		MatrixMultiplication (Matrix[1], Matrix[2]);
		outputHTML (Matrix[Matrix.MaxID]); // letzte Matrix ausgeben
	}

	BAbtn.onclick = function ()
	{
		MatrixMultiplication (Matrix[2], Matrix[1]);
		outputHTML (Matrix[Matrix.MaxID]);  // letzte Matrix ausgeben
	}

	swapLinesBtn.onclick = function ()
	{
		var
		MatrixNr = parseInt(swapLines.parentNode.getAttribute ('data-matrix')),
		inputs = swapLines.getElementsByTagName ('input'),
		ln1 = parseInt(inputs[0].value),
		ln2 = parseInt(inputs[1].value);
		
		if (!parseInt(inputs[0].value) || !parseInt(inputs[1].value))
		{
			alert ('Bitte zwei Zahlen eingeben!')
			return;
		}
		ElemRowOperations.swapRows (Matrix[MatrixNr], ln1, ln2);
		outputHTML (Matrix[Matrix.MaxID]); // letzte Matrix ausgeben
	}
	
	multiplyLineBtn.onclick = function ()
	{
		var
		MatrixNr = parseInt(swapLines.parentNode.getAttribute ('data-matrix')),
		inputs = multiplyLine.getElementsByTagName ('input'),
		ln = parseInt(inputs[0].value),
		s = parseInt(inputs[1].value);
		
		ElemRowOperations.multiplyRow (Matrix[MatrixNr], ln, s);
		outputHTML (Matrix[Matrix.MaxID]); // letzte Matrix ausgeben
	}
	
	addToLineBtn.onclick = function ()
	{
		var
		MatrixNr = parseInt(swapLines.parentNode.getAttribute ('data-matrix')),
		inputs = addToLine.getElementsByTagName ('input'),
		s = parseInt(inputs[0].value),
		ln1 = parseInt(inputs[1].value),
		ln2 = parseInt(inputs[2].value);
		
		ElemRowOperations.addToRow (Matrix[MatrixNr], ln1, ln2, s);
		outputHTML (Matrix[Matrix.MaxID]); // letzte Matrix ausgeben		
	}
	
	closeOperations.onclick = OperationsDIV.hide;
	
}) ();

math.js

/*
 * Mathematische Operationen mit den Matrizen
 */
var
ElemRowOperations =
// elementare Zeilenumformungen
{
	swapRows : function (M, row1, row2)
	// vertauscht row1 und row2 in M
	{
		Matrix.E.setN (M.rows);
		// Zeilen ln1 und ln2 vertauschen
		Matrix.nullRow (Matrix.E, row1);
		Matrix.E[row1][row2] = 1;
		Matrix.nullRow (Matrix.E, row2);
		Matrix.E[row2][row1] = 1;
		MatrixMultiplication (Matrix.E, M);
	},
	
	multiplyRow : function  (M, row, s)
	// Multipliziert die Zeile row der Matrix M mit s
	{
		// Neue Elementarmatrix bauen
		Matrix.E.setN (M.rows);
		Matrix.E[row][row] = s;
	},
	
	addToRow : function (M, row1, row2, s)
	// addiert das s-fache der Zeile row1 zur Zeile row2
	{
		// Neue Elementarmatrix bauen
		Matrix.E.setN (M.rows);
		// alle Zeilen von E zu Nullzeilen machen
		for (i = 1; i <= Matrix.E.rows; i++)
			Matrix.nullRow (Matrix.E, i);
		// die Position (row2, row1) = s setzen. 
		// Dadurch werden bei der Multiplikation 1. die Zeile row1 mal s genommen und 2. die Zeilen vertauscht
		Matrix.E[row2][row1] = s;
		// Neue Matrix anlegen, die nur die Zeile row1 hat und sonst aus Nullen besteht
		MatrixMultiplication (Matrix.E, M);
		// Matrix M mit der zu letzt erzeugten Matrix addieren
		MatrixAddition (M, Matrix[Matrix.MaxID]);
	}
}, // ElemRowOperations -----------------------------------------------------

Fraction =
// Hilfsfunktionen für Brüche
{
	parseFrac : function (str)
	// wandelt a, b in einen Bruch ein. Rückgabe: Array[Zähler, Nenner]
	{
		var
		fracLinePos = str.indexOf("/"),
		// alles vor dem Bruchstrich = Zähler
		numerator = parseInt (str.slice(0, fracLinePos)),
		// alles nach dem Bruchstrich = Nenner
		denominator = parseInt (str.slice(fracLinePos + 1, str.length)),
		Frac = [numerator, denominator];
		return Frac;
	},
	
	// Der Rückgabewert c der folgenden Funktionen ist immer eine rationale Zahl in Form eines Arrays
	multiply : function (a, b)
	// Multiplikation. a, b = Integer oder Bruch.
	{
		var
		numerator,
		denominator,
		c = []; // Rückgabebruch
		if (typeof a == 'number')
			// a ist eine ganze Zahl
			c = [a * b[0], b[1]];
		else if (typeof b == 'number')
			// b ist eine ganze Zahl
			c = [b * a[0], a[1]];
		else
			// beides sind Brüche
			c = [a[0] * b[0], a[1] * b[1]];
			
		return c;
	},
	
	add : function (a, b) 
	// Addition. a, b = Integer oder Bruch.
	{
		var c = [];
		if (typeof a == 'number')
			// a zu einem passenden Bruch umformen und mit b addieren
			c = [a * b[1] + b[0], b[1]];
		else if (typeof b == 'number')
			// b umformen und mit a addieren
			c = [b * a[1] + a[0], a[1]];
		else
			// beide sind ein Bruch-Array
			c = [a[0] * b[1] + b[0] * a[1], a[1] * b[1]];
		
		//~ console.log (a);
		//~ console.log (b);
		//~ console.log (c);
		
		return c;
	},
	
	reduce : function (inFrac)
	// Bruch kürzen
	{
		var
		x = inFrac[0],
		y = inFrac[1],
		outFrac = [];
		
		if (x < 0)
		// Zähler vorübergehend positiv machen
			x = x * (-1);
			
		if (y < 0)
		// Nenner positiv machen
			y = y * (-1);
		
		if (x == 0)
			return 0;
		else if (x == y)
			return 1;
		else
			// größten gemeinsamen Teiler ermitteln
			while ((x != y) && (x != 1))
			{
				if (y > x)
					y = y - x;
				else
					x = x - y;
			}
			
		if (x != 0)
			// Bruch kürzen
			outFrac = [inFrac[0] / x, inFrac[1] / x];
		
		if (outFrac[0] == outFrac[1])
			outFrac = 1;
		else if (outFrac[1] == 1) // Nenner ist 1 => Rückgabewert ist nur der Zähler
			outFrac = outFrac[0];
			
		return outFrac;
	}
};

function MatrixMultiplication (A, B)
// Matrizenmultiplikation mit zwei Matrix-Objekten A und B
{
	var
	SumOf = function (ZeileA, SpalteB)
	{
		var
		Sum = 0,
		a,
		b,
		c;
		
		for (k = 1; k <= B.rows; k++) // Laufindex k: Spalten von A, Zeilen von B
		{
			a = A[ZeileA][k];
			b = B[k][SpalteB];
			if (typeof a != 'object' && typeof b != 'object')
				// Normalfall: weder a noch b noch Sum sind Brüche
				c = a * b;
			else
			// mindestens einer der drei ist ein Bruch
				// a mit b multiplizieren
				c = Fraction.multiply (a, b);
			
			// c zu Sum addieren
			if (typeof Sum != 'object' && typeof c != 'object')
				Sum += c;
			else
				// Ggf. wird hier Sum vom Integer zum Array
				Sum = Fraction.add (Sum, c);
		}
		
		// ggf. Bruch kürzen
		if (typeof Sum == 'object')
			Sum = Fraction.reduce (Sum);
			
		return Sum;
	},
	C; // die resultierende Matrix
	
	// Zum Anfang überprüfen, ob die Matrizenmultiplikation für AB definiert ist 
	if (A.cols != B.rows) 
	{
		if (A.cols > B.rows)
			alert ('Matrizenmultiplikation ist nicht definiert, da Matrix 1 mehr Spalten hat als Matrix 2 Zeilen');
		else
			alert ('Matrizenmultiplikation ist nicht definiert, da Matrix 1 weniger Spalten hat als Matrix 2 Zeilen');
		return;
	}
	
	Matrix.newMatrix (); // Neues Datenobjekt erzeugen
	C = Matrix[Matrix.MaxID];
	C.rows = A.rows;
	C.cols = B.cols;
	
	for (i = 1; i <= A.rows; i++)
	// Jede Zeile aus A …
	{
		// neue Zeile erzeugen
		C[i] = {}; 
		for (j = 1; j <= B.cols; j++)
			// … mit jeder Spalte aus B multiplizieren.
			C[i][j] = SumOf (i, j);
	}
} // MatrixMultiplication () -----------------------------------------------------

function ScalarMultiplication (s, M)
// multipliziert Matrix M mit einem Skalar s
{
	var
	C;
	
	Matrix.newMatrix ();
	C = Matrix[Matrix.MaxID];
	C.rows = M.rows;
	C.cols = M.cols;
	
	for (i = 1; i <= M.rows; i++)
	{
		C[i] = {};
		for (j = 1; j <= M.cols; j++)
			C[i][j] = M[i][j] * s;
	}
			
} // ScalarMultiplication ()  -----------------------------------------------------

function MatrixAddition (A, B)
// Matrizenaddition
{
	var
	newMatrix;
	
	Matrix.newMatrix ();
	newMatrix = Matrix[Matrix.MaxID];
	newMatrix.rows = A.rows;
	newMatrix.cols = A.cols;
			
	for (i = 1; i <= A.rows; i++)
	{
		newMatrix[i] = {};
		for (j = 1; j <= A.cols; j++)
			newMatrix[i][j] = A[i][j] + B[i][j];
	}
} // MatrixAddition ()  -----------------------------------------------------

Matrizenmultiplikation.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Matrizenmultiplikation</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="GreenSock/TweenLite.min.js"></script>
	<script type="text/javascript" src="GreenSock/CSSPlugin.min.js"></script>
	<script type="text/javascript" src="GreenSock/CSSRulePlugin.min.js"></script>
	<script type="text/javascript" src="GreenSock/EasePack.min.js"></script>
</head>
<body>
	<div id="Main">
		<h1>Matrizenmultiplikation</h1>
		<div class="hint">
			<h4>Hinweise</h4>
			Zum Bearbeiten der Matrix A oder B, auf eine Zahl klicken. <br />
			Mit der <kbd>Leertaste</kbd> können Sie neue Spalten erzeugen. <br />
			Mit <kbd>Enter</kbd> erstellen Sie eine neue Zeile. <br />
			<kbd>Strg</kbd>+<kbd>Enter</kbd> löscht die aktuelle Spalte. <kbd>Strg</kbd>+<kbd>Enter</kbd> löscht die aktuelle Zeile.
			<br /><br />
			<math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
					
            <mfenced open="(" close=")">
               <mtable>
                  <mtr>
                    <mtd>
												<msub>
												<mi>a</mi>
												<mrow><mn>1</mn><mn>1</mn></mrow>
											</msub>
										</mtd>
                    <mtd>
												<msub>
												<mi>a</mi>
												<mrow><mn>1</mn><mn>2</mn></mrow>
											</msub>
										</mtd>
                  </mtr>
                  <mtr>
                    <mtd>
												<msub>
												<mi>a</mi>
												<mrow><mn>2</mn><mn>1</mn></mrow>
											</msub>
										</mtd>
										 <mtd>
												<msub>
												<mi>a</mi>
												<mrow><mn>2</mn><mn>2</mn></mrow>
											</msub>
										</mtd>
                  </mtr>
               </mtable>
            </mfenced>
            
            <mfenced open="(" close=")">
               <mtable>
                  <mtr>
                    <mtd>
												<msub>
												<mi>b</mi>
												<mrow><mn>1</mn><mn>1</mn></mrow>
											</msub>
										</mtd>
                    <mtd>
												<msub>
												<mi>b</mi>
												<mrow><mn>1</mn><mn>2</mn></mrow>
											</msub>
										</mtd>
                  </mtr>
                  <mtr>
                    <mtd>
												<msub>
												<mi>b</mi>
												<mrow><mn>2</mn><mn>1</mn></mrow>
											</msub>
										</mtd>
										 <mtd>
												<msub>
												<mi>b</mi>
												<mrow><mn>2</mn><mn>2</mn></mrow>
											</msub>
										</mtd>
                  </mtr>
               </mtable>
            </mfenced>
            
            <mo>=</mo>
            
            <mfenced open="(" close=")">
     <mtable>
      <mtr>
       <mtd>
        <mrow>
				<mstyle displaystyle="true">  
         <munderover>
          <mo stretchy="false">∑</mo>
          <mrow>
           <mi>i</mi>
           <mo stretchy="false">=</mo>
           <mn>1</mn>
          </mrow>
          <mn>2</mn>
         </munderover>
         </mstyle>
         <mrow>
          <msub>
           <mi>a</mi>
           <mrow>
            <mn>1</mn>
            <mi>i</mi>
           </mrow>
          </msub>
          <msub>
           <mi>b</mi>
           <mrow>
            <mi>i</mi>
            <mn>1</mn>
           </mrow>
          </msub>
         </mrow>
        </mrow>
       </mtd>
       <mtd>
        <mrow>
				<mstyle displaystyle="true">
         <munderover>
          <mo stretchy="false">∑</mo>
          <mrow>
           <mi>i</mi>
           <mo stretchy="false">=</mo>
           <mn>1</mn>
          </mrow>
          <mn>2</mn>
         </munderover>
         </mstyle>
         <mrow>
          <msub>
           <mi>a</mi>
           <mrow>
            <mn>1</mn>
            <mi>i</mi>
           </mrow>
          </msub>
          <msub>
           <mi>b</mi>
           <mrow>
            <mi>i</mi>
            <mn>2</mn>
           </mrow>
          </msub>
         </mrow>
        </mrow>
       </mtd>
      </mtr>
      <mtr>
       <mtd>
        <mrow>
					<mstyle displaystyle="true">
         <munderover>
          <mo stretchy="false">∑</mo>
          <mrow>
           <mi>i</mi>
           <mo stretchy="false">=</mo>
           <mn>1</mn>
          </mrow>
          <mn>2</mn>
         </munderover>
         </mstyle>
         <mrow>
          <msub>
           <mi>a</mi>
           <mrow>
            <mn>2</mn>
            <mi>i</mi>
           </mrow>
          </msub>
          <msub>
           <mi>b</mi>
           <mrow>
            <mi>i</mi>
            <mn>1</mn>
           </mrow>
          </msub>
         </mrow>
        </mrow>
       </mtd>
       <mtd>
        <mrow>
					<mstyle displaystyle="true">
         <munderover>
          <mo stretchy="false">∑</mo>
          <mrow>
           <mi>i</mi>
           <mo stretchy="false">=</mo>
           <mn>1</mn>
          </mrow>
          <mn>2</mn>
         </munderover>
         </mstyle>
         <mrow>
          <msub>
           <mi>a</mi>
           <mrow>
            <mn>2</mn>
            <mi>i</mi>
           </mrow>
          </msub>
          <msub>
           <mi>b</mi>
           <mrow>
            <mi>i</mi>
            <mn>2</mn>
           </mrow>
          </msub>
         </mrow>
        </mrow>
       </mtd>
      </mtr>
     </mtable>
            </mfenced>
                        
         </mrow>
      </math>
		</div>
		<div class="box width100">
			
			<table class="matrix floatleft" data-matrix="1">
				<tr>
					 <td data-matrix="1" data-row="1" data-col="1"><input></td>
				</tr>
      </table>
      
			<table class="matrix floatright" data-matrix="2">
				<tr>
					 <td data-matrix="2" data-row="1" data-col="1"><input></td>
				</tr>
      </table>
      
     <div class="width100">
			<button id="AB-btn">A · B</button>&nbsp;
			<button id="BA-btn">B · A</button>
		</div>
		</div><!-- box -->
		
		
		<ul id="row-operations">
			<h4>Matrix elementar umformen <img id="close-operations" src="close.png" alt="close"></h4>
			<li id="swap-lines">Zeile <input type="text"> mit Zeile <input type="text"> <button>vertauschen!</button></li>
			<li id="multiply-line">Zeile <input type="text"> mit <input type="text"> <button>multiplizieren!</button></li>
			<li id="add-to-line">Das (<input type="text">)-fache von Zeile <input type="text"> zu Zeile <input type="text"> <button>addieren!</button></li>
		</ul><!-- box -->
		
		<h2>Protokoll</h2>
		<div id="protocol" class="box width100">
    </div> <!-- protocol --> 
	</div> <!-- Main -->
	
	<!-- Reihenfolge wichtig wegen Definitionen: erst maths.js, dann HTML.js -->
	<script src="math.js"></script>
	<script src="Object.js"></script>
	<script src="HTML.js"></script>
</body>
</html>

Object.js

var
Matrix =
// Das Daten-Objekt, in dem alle Matrizen gespeichert sind
{
	MaxID : 0, // Anzahl der Matrizen
	
	newMatrix : function ()
	// neue Matrix anhängen
	{
		this.MaxID += 1; 
		this[this.MaxID] = 
		{
			ID : this.MaxID,
			rows : 1,
			cols : 1,
			delCol : function (theCol)
			// Spalte löschen
			{
				for (i = 1; i <= this.rows; i++)
				// die Spalte aus dem Matrix-Objekt löschen
				{
					/* alle Spalten ab der aktuellen Spalte eins nach vorne rücken. 
					 * So wird die aktuelle Spalte überschrieben */
					if (theCol < this.cols)
					// falls es nicht die letzte Spalte der Matrix ist
						for (j = theCol; j < this.cols; j++)
							this[i][j] = this[i][j + 1];
					// zu letzt, die letze Spalte löschen
					delete this[i][this.cols];
				}
				// Laufindex anpassen
				this.cols -= 1;
			},
			delRow : function (theRow)
			// Zeile löschen
			{
				if (theRow < this.rows)
				/* wenn es sich nicht um die letze Zeile handelt,
				 * alle Zeilen, die auf diese folgen, eins weiter nach vorne rücken
				 * und damit die aktuelle überschreiben */
					for (i = theRow; i < this.rows; i++)
						this[i] = this[i + 1];
				
				// zum Schluss, letzte Zeile löschen
				delete this[this.rows];
				this.rows -= 1;
			},
			
			1 : {1 : 0}
		}
	}, // newMatrix ()
	
	update : function (that)
	// neue Werte zu Elementen aus einer Matrix zuweisen
	{
		var
		thisMatrix = Matrix[parseInt(this.parentNode.getAttribute('data-matrix'))],
		row = parseInt(this.parentNode.getAttribute('data-row')),
		col = parseInt(this.parentNode.getAttribute('data-col')),
		value = this.value;
		
		if (value.indexOf("/") > 0) 
		// es liegt ein Bruch als String vor -> String in Bruch-Array umwandeln
			value = Fraction.parseFrac (value);
		else
		// sonst String in eine ganze Zahl umwandeln
			value = parseInt (value);
			
		thisMatrix[row][col] = value; // Wert updaten
		console.log(thisMatrix);
	},

	nullRow : function (M, row)
	// macht die Zeile row der Matrix M zur Nullzeile
	{
		for (j = 1; j <= M.cols; j++)
			M[row][j] = 0;
	},
	
	E : // Elementarmatrix
		{
			setN : function (n)
			// Matrix zurücksetzen und Zeilen- & Spaltenanzahl festlegen
			{
				this.rows = n;
				this.cols = n;
				
				for (i = 1; i <= n; i++)
				{
					// falls Zeile noch nicht existiert, neu anlegen
					if(!this[i]) this[i] = {};
					for (j =1; j <= n; j++)
						// Diagonalelemente = 1, Rest = 0
						this[i][j] = i == j ? 1 : 0;
				}
			},
			rows : 1,
			cols : 1,
			1 : {1 : 1}
		}
}; // Matrix  -----------------------------------------------------

// Beispiel: neue Zeile mit Wert 1 in der ersten Spalte einer Matrix hinzufügen
//~ var
//~ row = {1 : 1};
//~ Matrix[1][2] = row;

// Beispiel des Zugriffs: der erste Index ist die Matrix, der zweite ist die Zeile, der dritte die Spalte
//~ console.log(Matrix[1][2][1]);

style.css

body {
	line-height: 1.525rem;
	text-align: center;
	margin: 0px;
	height: 100%;
	position: absolute;
	width: 100%;
	font-family: Sans;
}

h1 {
	font-weight: 100;
	color: rgb(206, 203, 203);
	font-size: 2.5rem;
}

h2 {
color: rgb(170, 165, 165);
font-weight: 300;
}

input {
	border: 1px solid rgb(220,220,220);
	width: 30px;
	text-align: center;
	font: inherit;
	height: 1.3em;
}

input:hover, input:focus {
	box-shadow: 0px 0px 2px 3px rgb(242, 95, 95);
}

button {
 font: inherit;
}

button:hover {
 color: black;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.width100 {
	width: 100%;
	clear: both;
}

kbd {
	border: 1px solid rgb(200, 200, 200);
	background: rgb(255, 255, 255) none repeat scroll 0% 0%;
	padding: 1px 3px;
	box-shadow: 0px 1px 1px 0px rgb(84, 84, 84);
	border-radius: 3px;
}

#Main {
	width: auto;
	min-width: 500px;
	margin: 10px auto;
	text-align: left;
/*
	box-shadow: 0px 0px 10px -6px;
*/
	padding: 10px 40px;
	top: 0px;
	bottom: 0px;
	display: inline-block;
	height:100%;
/*
	border: 1px solid rgb(220,220,220);
*/
}	

.box {
	margin: 0 auto 3rem;
	display:block;
}

.matrix {
	border-style: none solid none solid;
	border-color: black;
	border-width: 2px;
	border-radius: 10px;
	margin: 2rem 0;
}

.matrix td {
	padding: 10px;
}

.matrix input {
	background: none;
	border: none;
	margin: -5px;
}

.hint {
	position: absolute;
	margin-left: -400px;
	width: 340px;
	padding: 10px;
	font-size: 0.9rem;
	line-height:1.7rem;
	box-shadow: 0px 2px 3px -1px black;
	background-color: rgb(254, 255, 201);
	background: -moz-linear-gradient(top,  rgb(252, 239, 148) 0%, rgb(255, 251, 218) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(252, 239, 148)), color-stop(100%,rgb(255, 251, 218)));
	background: -webkit-linear-gradient(top, rgb(252, 239, 148) 0%,rgb(255, 251, 218) 100%);
	background: -o-linear-gradient(top,  rgb(252, 239, 148) 0%,rgb(255, 251, 218) 100%);
	background: -ms-linear-gradient(top,  rgb(252, 239, 148) 0%,rgb(255, 251, 218) 100%);
	background: linear-gradient(to bottom,  rgb(252, 239, 148) 0%,rgb(255, 251, 218) 100%);
}

#row-operations {
	box-shadow: 1px 2px 7px -3px rgb(0, 0, 0);
	padding: 10px 20px;
	border: 1px solid rgb(220,220,220);
	position: absolute;
	background-color: white;
	font-size: 0.9rem;
	list-style-type:none;
	visibility: hidden;
	margin-top: 0px;
	opacity:0;
}

#row-operations > li:first-of-type {
	border-top: none;
}

#row-operations > li {
	border-top: 1px solid rgb(230, 230, 230);
	padding: 10px 20px 0px;
	margin: 10px -20px;
}

#close-operations {
	float:right;
	width: 14px;
	cursor: pointer;
}

#protocol {
	margin-top: 0;
border-top: 1px solid rgb(220,220,220);
padding-top: 20px;
}