# Javascript mit Arrays



## Alibistudent (18. Mai 2011)

Hallo alle zusammen ich habe eine Hausaufgabe in Informatik auf und habe sie schon fast gelöst nur hab ich irgendwo einen Fehler drin ob ihr nicht mal einen Blick mit eurem geschulten Auge drauf werfen könnt unsere Hausaufgabe lautet:

_Erstellen Sie ein HTML-Formular und ein zugehöriges JavaScript-Programm, das einen in einem textarea-Eingabefeld (z.B. mit Copy & Paste) eingegebenen Text auswertet:

1.Ermitteln Sie die Anzahl der in dem Text vorkommenden Wörter und geben Sie diese in einem Ausgabefeld aus.
2.Ermitteln Sie für jedes in dem Text vorkommende Wort, wie oft es vorkommt und geben Sie die zehn häufigsten Wörter mit ihrer prozentualen Häufigkeit in Ausgabefeldern aus.

*Hinweise zur Lösung*

1.HTML-Formular konstruieren
2.Den Text mit Hilfe der vordefinierte JavaScript-Funktion split in einen Array von Wörtern konvertieren: wortArray = text.split(" ")
3.Alle Wörter normalisieren: Umwandlung in Kleinschreibung, Satzzeichen entfernen, etc.(function normalisiertesWort(s) gegeben)
4.Um Mehrfacheinträge zu erkennen, den Wort-Array lexikographisch ordnen - am einfachsten mit der vordefinierten Prozedur sort, die man folgendermaßen aufruft: wortArray.sort()
5.Aus dem geordneten Wort-Array eine 2-spaltige Worthäufigkeitstabelle erzeugen (als 2-dimensionalen Array, in der ersten Spalte die Wörter und in der zweiten Spalte den zugehörigen Häufigkeitszähler)
6.Die Worthäufigkeitstabelle nach Worthäufigkeit ordnen (mit dem Selection-Sort-Verfahren)
7.Die geordnete Worthäufigkeitstabelle im HTML-Formular ausgeben

*Als Testfall kann folgender Text verwendet werden:*

Herr Bundespräsident, Herr Ministerpräsident, Herr Landtagspräsident, Herr Kardinal, lieber Herr Zehetmair und lieber Freund Theo Waigel! Während ich mir die Reden anhöre, gingen meine Gedanken in vergangene Zeiten zurück, und ich fragte mich: "Wann warst du zum ersten Mal in München?" Wenn ich mich recht entsinne, war das Ende März 1945. Ich war damals gerade 15 Jahre alt und ich befand mich als Flaghelfer in Berchtesgaden. Wir fuhren an einem Tag von Berchtesgaden nach München, um etwas dorthin zu transportieren. Ich kannte München noch nicht und meine erste Begegnung mit der Stadt war ein Schock, denn sie war ein einziger Trümmerhaufen. Angesichts dieses Elends sahen weder wir Kinder noch die Erwachsenen eine positive Zukunft. Doch wir haben es geschafft! Diese großartige Generation meiner Eltern, der Großeltern und vielleicht der Urgroßeltern verzweifelte trotz allem nicht. Sie sagten sich: "Wir wollen es packen!". 

Damit sollten sich 141 Wörter (davon 105 verschiedene) mit folgenden Häufigkeiten ergeben:

Wort Häufigkeit
ich 6
herr 5
und 5
war 4
wir 4
der 3
in 3
mich 3
münchen 3
berchtesgaden 2_

mein Quelltext sieht so aus:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ticketpreis</title>
<script type="text/javascript">
//<![CDATA[

function textstring(){
	var einstring=document.forms['f1'].t1.value;
	var wortArray = einstring.split(" ");//string in array umwandeln
	var	normalo=new Array();
	for(var i=0;i<wortArray.length;i++){//woerter rausfiltern
		normalo[i]=normalisiertesWort(wortArray[i]);
	}
	document.forms['f1'].anzahl.value = i;
	
	normalo.sort();//sortieren nach alphabet und kleinbuchstaben
	var k=1;
	array=new Array();
	var p=0;
	for(var j=0;j<normalo.length;j++){//ermitteln wie oft die einzelnen woerter vorkommen
		if(normalo[j]===normalo[j+1]){
			k++;
		}
		else{
			array[p]=new Array(2);
			array[p][0]=normalo[j];
			array[p][1]=k;
			p++;
			k=1;
		}
	}
	var tausch1, tausch2;
	for(p=0;p<array.length-1;p++){//sortieren des Arrays nach haeufigkeit des vorkommen der woerter
		if(array[p][1]<array[p+1][1]){//da ist ein fehler er nimmt nicht ich mit 6 als erstes sondern 15 mit 1
			tausch1=array[p+1][1];
			tausch2=array[p+1][0];
			array[p+1][1]=array[p][1];
			array[p+1][0]=array[p][0];
			array[p][1]=tausch1;
			array[p][0]=tausch2;
			p=0;
		}
	}
	//Ausgabe
	document.forms['f1'].wo1.value = array[0][0]+("  ")+(array[0][1]*100/i).toFixed(1);
	document.forms['f1'].wo2.value = array[1][0]+("  ")+(array[1][1]*100/i).toFixed(1);
	document.forms['f1'].wo3.value = array[2][0]+("  ")+(array[2][1]*100/i).toFixed(1);
	document.forms['f1'].wo4.value = array[3][0]+("  ")+(array[3][1]*100/i).toFixed(1);
	document.forms['f1'].wo5.value = array[4][0]+("  ")+(array[4][1]*100/i).toFixed(1);
	document.forms['f1'].wo6.value = array[5][0]+("  ")+(array[5][1]*100/i).toFixed(1);
	document.forms['f1'].wo7.value = array[6][0]+("  ")+(array[6][1]*100/i).toFixed(1);
	document.forms['f1'].wo8.value = array[7][0]+("  ")+(array[7][1]*100/i).toFixed(1);
	document.forms['f1'].wo9.value = array[8][0]+("  ")+(array[8][1]*100/i).toFixed(1);
	document.forms['f1'].wo10.value = array[9][0]+("  ")+(array[9][1]*100/i).toFixed(1);
}

function normalisiertesWort(s) {//woerter aus dem text rausfiltern 
	var satzZeichen = "\",;:.!?-";  //herauszufilternde Zeichen
	var w = ""; 
	s = s.toLowerCase();  // Umwandlung in Kleinbuchstaben
	for (var i=0; i < s.length; i++) { 
		if (satzZeichen.indexOf( s.charAt(i)) == -1) {  // kein Satzzeichen 
			w = w + s.charAt(i);  // also in den Wortstring übernehmen
		} 
	} 
	return w 
}
//]]>
</script>
</head>
<body>
<form id="f1" action="hello.html">
    <p>
      <label for="einstring">Text: </label><br />
	  <textarea type="text" id="text" name="t1" cols="75" rows="12"></textarea><br />
      <button type="button" onclick="textstring()">Auswerten des Textes</button><br />
	  <label for="anzahl">Anzahl der Woerter: </label>
      <input type="text" id="anzahl" name="anzahl" readonly="readonly" /><br/><br/>
	  <label for="woerter">Haeufigste Woerter: </label><br/>
	  <label for="wo1">1.</label>
      <input type="text" id="wo1" name="wo1" readonly="readonly" /><br/>
	  <label for="wo2">2.</label>
      <input type="text" id="wo2" name="wo2" readonly="readonly" /><br/>
	  <label for="wo3">3.</label>
      <input type="text" id="wo3" name="wo3" readonly="readonly" /><br/>
	  <label for="wo4">4.</label>
      <input type="text" id="wo4" name="wo4" readonly="readonly" /><br/>
	  <label for="wo5">5.</label>
      <input type="text" id="wo5" name="wo5" readonly="readonly" /><br/>
	  <label for="wo6">6.</label>
      <input type="text" id="wo6" name="wo6" readonly="readonly" /><br/>
	  <label for="wo7">7.</label>
      <input type="text" id="wo7" name="wo7" readonly="readonly" /><br/>
	  <label for="wo8">8.</label>
      <input type="text" id="wo8" name="wo8" readonly="readonly" /><br/>
	  <label for="wo9">9.</label>
      <input type="text" id="wo9" name="wo9" readonly="readonly" /><br/>
	  <label for="wo10">10.</label>
      <input type="text" id="wo10" name="wo10" readonly="readonly" /><br/>
    </p>
  </form> 
</body>
</html>
```

bei mir gibt er in der ausgabe erst das wort "15" mit häufigkeit 1 bzw. 0,7% und danach erst das häufigste wort "ich" mit häufigkeit 6 bzw 4,3% ich konnte nicht herausfinden woran das liegt:rtfm: ich dachte vllt er macht beim sortieren der variablen was falsch nur kann ich mir nicht vorstellen was bzw. ich finde es einfach nicht;( könnte heulen
hoffe ihr könnte mir helfen danke im voraus:toll:


----------



## XHelp (18. Mai 2011)

Ohne jetzt den dezenten roten Text genauer zu lesen:
Du sortierst nicht bzw. nur so halb:
aus 
	
	
	
	





```
6 5 2 4 8 3
```
 würde bei dir nach der Schleife 
	
	
	
	





```
5 2 4 6 3 8
```
 sein. Da ist quasi noch eine Schleife drumherum zu wenig: Bubblesort ? Wikipedia oder YouTube - Bubble-sort with Hungarian ("Csángó") folk dance


----------



## Alibistudent (18. Mai 2011)

dankeschön bubblesort war echt eine große hilfe! ich weiß nicht wieso er es nicht vorher gemacht hat dachte ich kann in einer for-schlefe den parameter auf null setzen damit er wieder von vorne beginnt...wahr wohl nicht so naja hab jetzt noch paar schönheitsfehler ich würde gerne das er in der ausgabe z.B. bei wort "ich" häufigkeit "6" und in meinem fall als prozentzahl "4,3" hinter die 4,3 ein prozentzeichen "%" hinklatscht aber ich weiß nicht wie ich es in formularbasierter ausgabe machen soll. danke im voraus:toll:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ticketpreis</title>
<script type="text/javascript">
//<![CDATA[

function textstring(){
	var einstring=document.forms['f1'].t1.value;
	var wortArray = einstring.split(" ");//string in array umwandeln
	var	normalo=new Array();
	for(var i=0;i<wortArray.length;i++){//woerter rausfiltern
		normalo[i]=normalisiertesWort(wortArray[i]);
	}
	document.forms['f1'].anzahl.value = i;
	
	normalo.sort();//sortieren nach alphabet und kleinbuchstaben
	var k=1;
	array=new Array();
	var p=0;
	for(var j=0;j<normalo.length;j++){//ermitteln wie oft die einzelnen woerter vorkommen
		if(normalo[j]===normalo[j+1]){
			k++;
		}
		else{
			array[p]=new Array(2);
			array[p][0]=normalo[j];
			array[p][1]=k;
			p++;
			k=1;
		}
	}
	var tausch1, tausch2;
	var unsortiert=true;
	while(unsortiert){
		unsortiert=false;
		for(p=0;p<array.length-1;p++){
			if(array[p][1]<array[p+1][1]){
				tausch1=array[p+1][1];
				tausch2=array[p+1][0];
				array[p+1][1]=array[p][1];
				array[p+1][0]=array[p][0];
				array[p][1]=tausch1;
				array[p][0]=tausch2;
				unsortiert=true;
			}
		}
	}
	//Ausgabe
	document.forms['f1'].wo1.value = array[0][0]+("  ")+(array[0][1]*100/i).toFixed(1);
	document.forms['f1'].wo2.value = array[1][0]+("  ")+(array[1][1]*100/i).toFixed(1);
	document.forms['f1'].wo3.value = array[2][0]+("  ")+(array[2][1]*100/i).toFixed(1);
	document.forms['f1'].wo4.value = array[3][0]+("  ")+(array[3][1]*100/i).toFixed(1);
	document.forms['f1'].wo5.value = array[4][0]+("  ")+(array[4][1]*100/i).toFixed(1);
	document.forms['f1'].wo6.value = array[5][0]+("  ")+(array[5][1]*100/i).toFixed(1);
	document.forms['f1'].wo7.value = array[6][0]+("  ")+(array[6][1]*100/i).toFixed(1);
	document.forms['f1'].wo8.value = array[7][0]+("  ")+(array[7][1]*100/i).toFixed(1);
	document.forms['f1'].wo9.value = array[8][0]+("  ")+(array[8][1]*100/i).toFixed(1);
	document.forms['f1'].wo10.value = array[9][0]+("  ")+(array[9][1]*100/i).toFixed(1);
}

function normalisiertesWort(s) {//woerter aus dem text rausfiltern 
	var satzZeichen = "\",;:.!?-";  //herauszufilternde Zeichen
	var w = ""; 
	s = s.toLowerCase();  // Umwandlung in Kleinbuchstaben
	for (var i=0; i < s.length; i++) { 
		if (satzZeichen.indexOf( s.charAt(i)) == -1) {  // kein Satzzeichen 
			w = w + s.charAt(i);  // also in den Wortstring übernehmen
		} 
	} 
	return w 
}
//]]>
</script>
</head>
<body>
<form id="f1" action="hello.html">
    <p>
      <label for="einstring">Text: </label><br />
	  <textarea type="text" id="text" name="t1" cols="75" rows="12"></textarea><br />
      <button type="button" onclick="textstring()">Auswerten des Textes</button><br />
	  <label for="anzahl">Anzahl der Woerter: </label>
      <input type="text" id="anzahl" name="anzahl" readonly="readonly" /><br/><br/>
	  <label for="woerter">Haeufigste Woerter: </label><br/>
	  <label for="wo1">1.</label>
      <input type="text" id="wo1" name="wo1" readonly="readonly" /><br/>
	  <label for="wo2">2.</label>
      <input type="text" id="wo2" name="wo2" readonly="readonly" /><br/>
	  <label for="wo3">3.</label>
      <input type="text" id="wo3" name="wo3" readonly="readonly" /><br/>
	  <label for="wo4">4.</label>
      <input type="text" id="wo4" name="wo4" readonly="readonly" /><br/>
	  <label for="wo5">5.</label>
      <input type="text" id="wo5" name="wo5" readonly="readonly" /><br/>
	  <label for="wo6">6.</label>
      <input type="text" id="wo6" name="wo6" readonly="readonly" /><br/>
	  <label for="wo7">7.</label>
      <input type="text" id="wo7" name="wo7" readonly="readonly" /><br/>
	  <label for="wo8">8.</label>
      <input type="text" id="wo8" name="wo8" readonly="readonly" /><br/>
	  <label for="wo9">9.</label>
      <input type="text" id="wo9" name="wo9" readonly="readonly" /><br/>
	  <label for="wo10">10.</label>
      <input type="text" id="wo10" name="wo10" readonly="readonly" /><br/>
    </p>
  </form> 
</body>
</html>
```


----------



## benjib77 (18. Mai 2011)

Du müsstest für das Prozentzeichen einfach ein String mit entsprechendem Inhalt anfügen. Die Häufigkeit hast du ja auch bereits im jeweiligen Array gespeichert. Deine neue Ausgabe sieht dann stets so aus:

```
document.forms['f1'].wo1.value = array[0][0]+(" ")+array[0][1] + " " + (array[0][1]*100/i).toFixed(1) + " %";
```


----------



## Alibistudent (18. Mai 2011)

danke funktioniert wunderbar...ging irgendwie nicht als ich das das letzte mal gemacht hab...hab wahrscheinlich das + vergessen oder so könnte man eigentlich ein  einziges ausgabefeld erstellen in form einer textarea wo man die arrays hintereinander mit einem zeilensprung ausgibt ohne jetzt 10 einzelne ausgabefelder zu erstellen oder existiert diese möglichkeit bei formularen nicht?:rtfm:


----------



## benjib77 (19. Mai 2011)

Du könntest deinen Code mit einem Loop über sämtliche Inputs verkürzen:

```
//Ausgabe
	var textfeld = document.getElementsByTagName('input');
	for(var k=0; k<textfeld.length; k++){	// Loop über sämtliche Textfelder
		// Textfeld [k+1], da dein erstes Textfeld (Index=0) für die Anzahl Wörter gebraucht wird
		textfeld[k+1].value = array[k][0]+(" ")+array[k][1] + " " + (array[k][1]*100/i).toFixed(1) + " %";
	}
```
Du kannst deine Ausgabe der Auswertung natürlich auch problemlos in einer TextArea erstellen. Deine Lösung würde dann wiefolgt aussehen:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ticketpreis</title>
<script type="text/javascript">
//<![CDATA[
 
function textstring(){
    var einstring=document.forms['f1'].t1.value;
    var wortArray = einstring.split(" ");//string in array umwandeln
    var normalo=new Array();
    for(var i=0;i<wortArray.length;i++){//woerter rausfiltern
        normalo[i]=normalisiertesWort(wortArray[i]);
    }
    document.forms['f1'].anzahl.value = i;
    
    normalo.sort();//sortieren nach alphabet und kleinbuchstaben
    var k=1;
    array=new Array();
    var p=0;
    for(var j=0;j<normalo.length;j++){//ermitteln wie oft die einzelnen woerter vorkommen
        if(normalo[j]===normalo[j+1]){
            k++;
        }
        else{
            array[p]=new Array(2);
            array[p][0]=normalo[j];
            array[p][1]=k;
            p++;
            k=1;
        }
    }
    var tausch1, tausch2;
    var unsortiert=true;
    while(unsortiert){
        unsortiert=false;
        for(p=0;p<array.length-1;p++){
            if(array[p][1]<array[p+1][1]){
                tausch1=array[p+1][1];
                tausch2=array[p+1][0];
                array[p+1][1]=array[p][1];
                array[p+1][0]=array[p][0];
                array[p][1]=tausch1;
                array[p][0]=tausch2;
                unsortiert=true;
            }
        }
    }
	//Ausgabe
	for(var a=0; a<wortArray.length; a++){
		var temp = document.forms['f1'].te1.value;
		var text = array[a][0]+(" ")+array[a][1] + " " + (array[a][1]*100/i).toFixed(1) + " %";
		document.forms['f1'].result.value = temp + text + "\n";
	}
	
}
 
function normalisiertesWort(s) {//woerter aus dem text rausfiltern 
    var satzZeichen = "\",;:.!?-";  //herauszufilternde Zeichen
    var w = ""; 
    s = s.toLowerCase();  // Umwandlung in Kleinbuchstaben
    for (var i=0; i < s.length; i++) { 
        if (satzZeichen.indexOf( s.charAt(i)) == -1) {  // kein Satzzeichen 
            w = w + s.charAt(i);  // also in den Wortstring übernehmen
        } 
    } 
    
    return w 
}
//]]>
</script>
</head>
<body>
<form id="f1" action="hello.html">
    <p>
      <label for="einstring">Text: </label><br />
      <textarea type="text" id="text" name="t1" cols="75" rows="12"></textarea><br />
      <button type="button" onclick="textstring()">Auswerten des Textes</button><br />
      <label for="anzahl">Anzahl der Woerter: </label>
      <input type="text" id="anzahl" name="anzahl" readonly="readonly" /><br/><br/>
      <label for="woerter">Haeufigste Woerter: </label><br/>
      <textarea id="te1" name="result" readonly="readonly" rows="15" cols="40"></textarea>
    </p>
  </form> 
</body>
</html>
```


----------



## Jo.Mo. (21. Mai 2011)

...warum bubbleSort? Lt. aufgabenstellung soll es mit selection sort gemacht werden...? ;-)

Ausserdem soll eine 2-spaltige Tabelle erzeugt werden, weiss jemand wie man das macht? Da bin ich mir selbst nicht sicher (also wie man der ersten Spalte das Wort zuordnet und der 2. dann den Wert)... 



Und das:


```
<label for="einstring">Text: </label><br />
      <textarea type="text" id="text" name="t1" cols="75" rows="12"></textarea><br />
```

...wirft einen Fehler... 


```
<label for="einstring">Text: </label><br />
         <textarea cols="75" rows="12" name="t1"></textarea><br /><br />
```

...ist besser.


----------



## Jo.Mo. (21. Mai 2011)

...jemand eine Idee wegen dem selectionSort und der 2-spaltigen tabelle...?

das selectionSort müsste doch so gehen...


```
function selectionSort( a) {
  var j;
  for (var bG=0; bG < a.length; bG=bG+1) {
    j = minIndex( a, bG);
    vertausche( a, bG, j);
  }
}
function minIndex( a, i0) {
 var min = i0;
 for (var i=i0+1; i < a.length; i=i+1) {
  if (a[i] < a[min]) min = i;
 }
 return min;
}
```


----------



## Jo.Mo. (22. Mai 2011)

...die mehrspaltige Tabelle war kein Problem allerdings habe ich noch ein Problem mit diesem SelectionSort. Denke es liegt daran, dass ich den beim sortierverfahren die mehreren Spalten (im gegensatz zum single Array) mit tauschen muss...hat einer einen Tip dazu?

Gerne auch am o.g. Beispiel...


----------

