Skip to content

Instantly share code, notes, and snippets.

@DoctypeRosenthal
Last active August 29, 2015 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DoctypeRosenthal/d5b65a7df22a79b6819f to your computer and use it in GitHub Desktop.
Save DoctypeRosenthal/d5b65a7df22a79b6819f to your computer and use it in GitHub Desktop.
/*
* 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;
}) ();
/*
* 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 () -----------------------------------------------------
<!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>
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]);
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment