2017-10-12 14:30:49 +02:00
<!DOCTYPE html>
< html lang = "de" >
< head >
< title > Bubblesort< / title >
< meta charset = "utf-8" >
< meta name = "generator" content = "Bluefish 2.2.5" >
< meta name = "author" content = "Clemens" >
< meta name = "date" content = "2017-10-12T14:27:56+0200" >
< meta name = "copyright" content = "Clemens Riese https://milchinsel.de" >
< script type = "text/javascript" >
2017-10-12 18:10:59 +02:00
var counter = 0;
var marked = 0;
2017-10-12 14:30:49 +02:00
function getArray(ignore = 0) {
var array = [];
if (counter > 0) {
var arrayItem = 0;
for (var i = 1; i < = counter; i++) {
if (ignore != i) {
array[arrayItem] = parseInt(document.getElementById('item-' + i).value);
arrayItem = arrayItem + 1;
}
}
}
return array;
}
function showMenu(items) {
var output = '';
for (var i=0; i< items.length ; i + + ) {
output = output + '< input type = "number" id = "item-' + (i+1) + '" value = "' + items[i] + '" > < button onclick = "remove(' + (i+1) + ')" > - < / button > ';
if (items[i] == marked) {
output = output + '< button onclick = "mark(' + items[i] + ')" class = "highlite" > < b > * < / b > < / button > ';
}
else {
output = output + '< button onclick = "mark(' + items[i] + ')" > * < / button > ';
}
output = output + '< br > ';
}
if (counter > 10) {
output = output + '< small class = "highlite" > Größere Listen beanspruchen beim sortieren mehr Leistung und können deshalb in der Verarbeitung länger dauern.< / small > ';
}
document.getElementById('items').innerHTML = output;
}
function add() {
var items = getArray();
counter = counter + 1;
items[counter-1] = '';
showMenu(items);
}
function remove(item) {
var items = getArray(item);
counter = counter - 1;
showMenu(items);
}
function mark(item) {
marked = item;
showMenu(getArray());
}
function randArray(maxItems, maxValue) {
var items = [];
for (var i=0; i < Math.floor ( ( Math . random ( ) * 10 ) + 1 ) ; i + + ) {
items[i] = Math.floor((Math.random() * 100) + 1);
}
return items;
}
function random() {
var items = [];
var output = '';
while (items.length < 5 ) {
var items = randArray();
}
counter = items.length;
showMenu(items);
}
function bubblesort() {
var array = getArray();
var n = array.length;
var getauscht = true;
var swapped = false;
var zwischenspeicher = 0;
printAddCaption(array);
while (n > 1 & & getauscht) {
getauscht = false;
for (var i=0; i < n-1 ; i + + ) {
swopped = false;
if (array[i] > array[i+1]) {
zwischenspeicher = array[i];
array[i] = array[i+1];
array[i+1] = zwischenspeicher;
getauscht = true;
swopped = true;
}
printAdd(array, i, swopped);
}
n = n - 1;
}
printAddCaption(array);
printOut();
}
var printarray = '';
function printAddCaption(array) {
var output = '';
output = output + '< tr > ';
for (var i=0; i < array.length ; i + + ) {
output = output + '< th class = "';
if (array[i] == marked) {
output = output + 'highlite ';
}
output = output + '">';
output = output + array[i];
output = output + '< / th > ';
}
output = output + '< / tr > ';
printarray = printarray + output;
}
function printAdd(array, active, swapped) {
var output = '';
output = output + '< tr > ';
for (var i=0; i < array.length ; i + + ) {
output = output + '< td class = "';
if (i == active || i == active+1) {
output = output + 'active ';
}
if (array[i] == marked) {
output = output + 'highlite ';
}
output = output + '">';
if ((i == active || i == active+1) & & swapped) {
output = output + '< b > ';
}
output = output + array[i];
if ((i == active || i == active+1) & & swapped) {
output = output + '< / b > ';
}
output = output + '< / td > ';
}
output = output + '< / tr > ';
printarray = printarray + output;
}
function printOut() {
var output = '';
output = output + '< table > ';
output = output + printarray;
output = output + '< / table > ';
document.getElementById('output').innerHTML = output;
printarray = '';
}
< / script >
< style type = "text/css" >
table {
width:100%;
text-align: center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table tr td.active {
background-color: lightgray;
}
table tr th {
background-color: gray;
}
.highlite {
color: red;
}
< / style >
< / head >
< body >
2017-10-12 18:10:59 +02:00
< aside >
< a href = "https://github.com/clerie/bubblesort_js" > < img style = "position: fixed; top: 0; right: 0; border: 0;" src = "https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt = "Fork me on GitHub" data-canonical-src = "https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" > < / a >
< / aside >
2017-10-12 14:30:49 +02:00
< header >
< h1 > Bubblesort< / h1 >
< / header >
< section >
< fieldset >
< legend > Anleitung:< / legend >
< p > Sortieren von Zahlen mittels Bubblesort < small > < a href = "https://de.m.wikipedia.org/wiki/Bubblesort" > (WIKIPEDIA)< / a > < / small > .< / p >
< ul >
< li > < b > +< / b > Listenelement hinzufügen< / li >
< li > < b > -< / b > Listenelement entfernen< / li >
< li > < b > *< / b > Element markieren < br > < small > (wird bei der Sortierausgabe < span class = "highlite" > rot< / span > hervorgehoben)< / small > < / li >
< li > < b > Random< / b > zufällige Liste< / li >
< li > < b > Sortieren< / b > Liste sortieren lassen< / li >
< / ul >
< / fieldset >
< br >
< fieldset >
< legend > Eingabe:< / legend >
< div id = "items" > < / div >
< hr >
< button onclick = "add();" > + < / button > < button onclick = "random();" > Random < / button >
< / fieldset >
< br >
< fieldset >
< legend > Ausgabe:< / legend >
< button onclick = "bubblesort();" > Sortieren < / button >
< hr >
< div id = "output" >
< / div >
< / fieldset >
< / section >
< footer >
< p > © 2017 < a href = "https://milchinsel.de" > milchinsel.de< / a > Clemens Riese< / p >
< / footer >
< / body >
< / html >