/**
* @function genMatrix
* @description Funkcija za generisanje random matrice, uzima broj
* kolona i redova iz tekst fieldova po id. Zatim generiše tabelu,
* koju popunjava random brojevima izmedju 0 i 50.
* generisanu tabelu dodaje u document zajedno sa adekvatnim naslovom.
*/
function genMatrix() {
//uzimanje vrijednosti colona i redova iz textField
let _col = document.getElementById('mat-col');
let _row = document.getElementById('mat-row');
//provjeravanje da li su broj i da li su prazne
if (!_col.checkValidity() || !_row.checkValidity() || _col.value === "" || _row.value === "") {
alert("Redovi ili kolone nisu ispravno unesene!");
} else {
removeOld('matrix');
//kreiranje elementa <table>
let table = document.createElement('table');
for (let i = 0; i < _row.value; i++) {
//ubacivanje redova <tr> ut <table>
let row = table.insertRow(i);
for (let j = 0; j < _col.value; j++) {
//ubacivanje <td> , popunjavamo red kolonama
let cell = row.insertCell(j);
//generisanje random broja izmedju 0 i 50
let randNumber = Math.floor(Math.random() * Math.floor(50));
//dodavanje vrijednosti u <td>
cell.appendChild(document.createTextNode(randNumber));
//dodavanje <td> na <tr>
row.appendChild(cell);
}
}
let title = document.createElement('h3');
title.appendChild(document.createTextNode('Matrica'));
//dodavanje title containeru za matrice i samu matricu kao tabelu
document.getElementById("matrix").appendChild(title);
document.getElementById("matrix").appendChild(table);
}
}
/**
* @function genCustomMatrix
* @description Funkcija za generisanje prozivoljnih matrica, uzima broj
* kolona i redova iz tekst fieldova po id. Zatim generise dvije tabele,
* koje popunjava textfieldovima sa odgovarajucim id u formatu Aij .
* generisanu tabelu dodaje u document zajedno sa adekvatnim naslovom.
*/
function genCustomMatrix() {
let _col1 = document.getElementById('mat1-col');
let _row1 = document.getElementById('mat1-row');
let _col2 = document.getElementById('mat2-col');
let _row2 = document.getElementById('mat2-row');
if (!_col1.checkValidity() || !_row1.checkValidity() || _col1.value === "" || _row1.value === "" ||
!_col2.checkValidity() || !_row2.checkValidity() || _col2.value === "" || _row2.value === ""
) {
alert("Redovi ili kolone nisu ispravno unesene!");
} else {
//obrisi ako postoje stare, da bi mogli samo prelijepit u konteinerskim elementima
removeOld('matrix1');
removeOld('matrix2');
//kreiraj dvije nove tabele
let table1 = document.createElement('table');
let table2 = document.createElement('table');
//postavi im id
table1.setAttribute('id', 'matrix1');
table2.setAttribute('id', 'matrix2');
/*
svaku tebelu dodaj novi row,
zatim za svaki rov dodaj niz celija
svaka celija zasebno dodaj text
*/
for (let i = 0; i < _row1.value; i++) {
//dodaj novi red u tabelu i zakaci referencu za "let row"
let row = table1.insertRow(i);
for (let j = 0; j < _col1.value; j++) {
//dodaj celiju i zakaci za referencu za "let cell"
let cell = row.insertCell(j);
//kreiraj element text field
let textField = document.createElement('input');
//dodaj mu atribute
textField.setAttribute('type', 'number');
textField.setAttribute('id', 'a' + i + j);
//dodaj textfield u celiu
cell.appendChild(textField);
//dodaj celiju u row
row.appendChild(cell);
}
}
//postupak se ponavlja isto kao prethodna petlja
for (let i = 0; i < _row2.value; i++) {
let row = table2.insertRow(i);
for (let j = 0; j < _col2.value; j++) {
let cell = row.insertCell(j);
let textField = document.createElement('input');
textField.setAttribute('type', 'number');
textField.setAttribute('id', 'b' + i + j);
cell.appendChild(textField);
row.appendChild(cell);
}
}
//kreiraj heading <h3> i dodaj mu sadrzaj i zakaci ga u konteiner
//zajedno sa tabelom
let title1 = document.createElement('h3');
title1.appendChild(document.createTextNode('Matrica A'));
document.getElementById("matrix1").appendChild(title1);
document.getElementById("matrix1").appendChild(table1);
//kreiraj heading <h3> i dodaj mu sadrzaj i zakaci ga u konteiner
//zajedno sa tabelom
let title2 = document.createElement('h3');
title2.appendChild(document.createTextNode('Matrica B'));
document.getElementById("matrix2").appendChild(title2);
document.getElementById("matrix2").appendChild(table2);
//nakon sto generisu se tabele i dodaju u konteinere
//ispod konteinera dodaj <button> ako ne postoje
//da se nebi imali nove button za svaki put kad generisemo matrice
//ili ih prelijepimo
//3 buttona.. za sabiranje ,oduzimanje i mnozenje
if (!document.getElementById('add') &&
!document.getElementById('add') &&
!document.getElementById('add')) {
document.getElementById('matrix-container').appendChild(document.createElement('br'));
document.getElementById('matrix-container').appendChild(document.createElement('hr'));
let add = document.createElement('button');
add.setAttribute('onclick', 'addMatrix()');
add.setAttribute('id', 'add');
add.appendChild(document.createTextNode('Add'));
let sub = document.createElement('button');
sub.setAttribute('onclick', 'subMatrix()');
sub.setAttribute('id', 'subtract');
sub.appendChild(document.createTextNode('Subtract'));
let mult = document.createElement('button');
mult.setAttribute('onclick', 'multMatrix()');
mult.setAttribute('id', 'mmultiply');
mult.appendChild(document.createTextNode('Multiply'));
document.getElementById('matrix-container').appendChild(add);
document.getElementById('matrix-container').appendChild(sub);
document.getElementById('matrix-container').appendChild(mult);
}
}
}
/**
* @function addMatrix
* @description Funkcija za sabiranje 2 matrice. Koja generiše novu tabelu
* i dodaje u document ili mijenja sa postojećim rezultatom (prelijepi).
*/
function addMatrix() {
let matrix = [];
let _col1 = document.getElementById('mat1-col').value;
let _row1 = document.getElementById('mat1-row').value;
let _col2 = document.getElementById('mat2-col').value;
let _row2 = document.getElementById('mat2-row').value;
//provjeri da li su istog foramata matrice da bi mogli sabrati
if (_col1 !== _col2 || _row1 !== _row2)
alert('Matrice nisu istog formata!');
else {
//saberi dvije matrice, elemente svaki sa svakim
//popunjavanje matrice rezultata je po kolonama
for (let i = 0; i < _row1; i++) {
matrix.push([]);
for (let j = 0; j < _col1; j++) {
let elementA = Number(document.getElementById('a' + i + j).value);
let elementB = Number(document.getElementById('b' + i + j).value);
//nakon sabiranja dodaj rezultat u matricu
matrix[i].push(elementA + elementB);
}
}
removeOld('matrix-result-add');
genResultMatrix('Rezultat sabiranja matrica A i B', _col1, _row1, matrix, 'matrix-result-add');
}
}
/**
* @function subMatrix
* @description Funkcija za oduzimanje 2 matrice. Koja generiše novu tabelu
* i dodaje u document ili mijenja sa postojećim rezultatom (prelijepi).
*/
function subMatrix() {
let matrix = [];
let _col1 = document.getElementById('mat1-col').value;
let _row1 = document.getElementById('mat1-row').value;
let _col2 = document.getElementById('mat2-col').value;
let _row2 = document.getElementById('mat2-row').value;
//provjeri da li su istog foramata matrice da bi mogli oduzeti
if (_col1 !== _col2 || _row1 !== _row2)
alert('Matrice nisu istog formata!');
else {
//oduzmi dvije matrice, elemente svaki sa svakim
//popunjavanje matrice rezultata je po kolonama
for (let i = 0; i < _row1; i++) {
matrix.push([]);
for (let j = 0; j < _col1; j++) {
let elementA = Number(document.getElementById('a' + i + j).value);
let elementB = Number(document.getElementById('b' + i + j).value);
//nakon oduzimanja dodaj rezultat u matricu
matrix[i].push(elementA - elementB);
}
}
removeOld('matrix-result-sub');
genResultMatrix('Rezultat oduzimanja matrica A i B', _col1, _row1, matrix, 'matrix-result-sub');
}
}
/**
* @function multMatrix
* @description Funkcija za množenje 2 matrice. Koja generiše novu tabelu
* i dodaje u document ili mijenja sa postojećim rezultatom (prelijepi).
*/
function multMatrix() {
let matrix = [], result = 0;
let _col1 = document.getElementById('mat1-col').value;
let _row1 = document.getElementById('mat1-row').value;
let _col2 = document.getElementById('mat2-col').value;
let _row2 = document.getElementById('mat2-row').value;
//provjeri da li se mogu uopste mnozit
if (_col1 !== _row2)
alert('Matrice nisu odgovarajućih formata!');
else {
//matrica se popunjava po kolonama
for (var k = 0; k < _row1; k++) {
matrix.push([]);
for (let i = 0; i < _col2; i++) {
result = 0;
for (let j = 0; j < _row2; j++) {
let elementA = Number(document.getElementById('a' + k + j).value);
let elementB = Number(document.getElementById('b' + j + i).value);
result += elementA * elementB;
}
//u petljama iznad se izmnozi red i kolona zatim dodaj rezultat u kolonu
//tako se ponavlja za svaku kolonu
matrix[k].push(result);
}
}
//ako postoji prethodna tabela sa rezultatom obrisi je
removeOld('matrix-result-mult');
//generisi tabelu za rezultat operacije i dodaj je u document
genResultMatrix('Rezultat množenja matrica A i B', _col2, _row1, matrix, 'matrix-result-mult');
}
}
/**
* @function genResultMatrix
* @param {string} titleText - Tekst za heading iznad matrice
* @param {number} _cols - Broj kolona proslijeđene matrice
* @param {number} _rows - Broj redova proslijeđene matrice
* @param {array} resMatrix - Matrica rezultatata za koju generisemo tabelu
* @param {string} id - id konteinera u koji dodajemo generisanu tabelu ili generisemo ga ako ne postoji
* @description Funkcija generiše tabelu i konteiner (ako ne postoji) i dodaje u document
*/
function genResultMatrix(titleText, _cols, _rows, resMatrix, id) {
//kreira <table> i konteiner <div>
let table = document.createElement('table');
let container = document.getElementById(id);
/*
Unutar ove dvije petlje se kreiraju redovi, dodaju na tabelu
zatim se dodaju u svaki rov celije ,a za svaku celiju
se insertuje sadrzaj te celije (resultText)
*/
for (let i = 0; i < _rows; i++) {
//dodaj red red u tabelu i smjesti referencu u varijablu row
let row = table.insertRow(i);
for (let j = 0; j < _cols; j++) {
//dodaj novu celiju u row i vrati referencu na celiju
let cell = row.insertCell(j);
//kreiraj sadrzaj te celije
let resultText = document.createTextNode(resMatrix[i][j]);
//dodaj sadrzaj u celiju
cell.appendChild(resultText);
//doaj celiju u red
row.appendChild(cell);
}
}
// kreiraj i dodaj naslov za matiruc
let title = document.createElement('h3');
title.appendChild(document.createTextNode(titleText));
//provjeri da li ima konteiner, ako ne kreiraj ga i dodaj naslov i tabelu na njega
//zatim dodaj u document (konteiner id="matrix-res")
if (!container) {
container = document.createElement('div');
container.setAttribute('id', id);
container.appendChild(title);
container.appendChild(table);
container.appendChild(document.createElement('br'));
document.getElementById("matrix-res").appendChild(container);
} else {
//ako postoji taj kontainer, tada samo dodaj u njega
//ovo je za slucaj ako smo vec radili jednom operaciju pa da prelijepo preko
//novo dobijeni rezultat
document.getElementById(id).appendChild(title);
document.getElementById(id).appendChild(table);
document.getElementById(id).appendChild(document.createElement('br'));
}
}
/**
* @function removeOld
* @param {string} id - id matrice
* @description Funkcija prima parametar elementa cij sadrzaj zelimo uklonit.
* @description Zatim provjerava da li taj elemenat postoji, ako postoji obrise sve
* @description child elemente iz datog elementa (koristit za kontenjerske elemente).
*/
function removeOld(id) {
//dobavlja kontainer sa matricom
let matrix = document.getElementById(id);
//provjeri da li uopste postoji
if (!matrix) return;
//ako postoji provjerava dali ima child elemenata
if (matrix.firstChild) {
//ako ima i sve dok ih ima, brise ih
while (matrix.firstChild) {
matrix.removeChild(matrix.firstChild);
}
}
}
/* TODO: dodati funkciju za provjeru da li su matrice prazne ili ne.
Sad za sad se podrazumijeva da korisnik nije levat */