Kleiner JavaScript Kurs

Arrays (Datenfelder)

In einer Variablen lassen sich auch mehr als eine Information speichern. Alle Speicher haben dann den gleichen Namen und müssen über einen Index unterschieden werden.

Name=["Ulli", "Bjarne", "Kjell", "Linus", "Jannik"];
alert(Name[2]);

Im Beispiel wird die Variable "Name" mit 5 Namen gefüllt. Um auf einen einzelnen Namen zuzugreifen scheibt man z.B. Name[2] (die Zahl in eckigen Klammern ist der sogenannte Index; Achtung: der Index beginnt immer bei 0!). Welcher Name wird mit alert(Name[2]) ausgegeben?

Im nächsten Beispielprogramm wollen wir einen Würfel programmieren und damit den Zufallsgenerator testen. Wir wollen sehr oft würfeln (z.B. 6000 mal). Nach der Wahrscheinlichkeitsrechnung müsste jede Zahl gleich oft gewürfelt werden (also bei 6000 Würfen jede Zahl 1000 mal). Um die Würfe zu zählen verwenden wir ein Array mit 6 Speicherplätzen (für jede Würfelzahl einen).

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Zufallsgenerator - Test</title>                
    </head>
        <script>
  			function wuerfeln(){
              var wuerfe=[0,0,0,0,0,0];
              var anzWuerfe=document.getElementById("wuerfe").value;
              var wurf;
              for(i=1; i<=anzWuerfe; i++){
                wurf=Math.floor(Math.random()*6)+1;
                wuerfe[wurf-1]=wuerfe[wurf-1]+1;
              }
              var ausgabe=document.getElementById("ausgabe");
              for(i=0; i<=5; i++){
                ausgabe.innerHTML+="<br>" + (i+1) + ":" + wuerfe[i] ;
              }  
            }
  		</script>               
    <body>
		<h1>Zufallsgenerator Test</h1>
        <label>Anzahl Würfe:</label><input type"number" id="wuerfe">
        <button onClick="wuerfeln();">Würfeln</button>
        <h3 id="ausgabe">Ergebnis des Tests</h3>
    </body>
</html>

So könnte es aussehen: JS_Kurs_B08a_1.html

Mehrdimensionale Arrays (Vokabelabfrage)

Arrays lassen sich auch ineinander verschachteln. Für ein Vokabel - Abfrageprogramm verwenden wir ein Array, in dem es für jede Vokabel ein Array mit 3 Einträgen gibt ([deutsch, englisch, "richtig/falsch-Zähler"] also z.B. ["aber", "but", 0]. Achtung: da wir einige Variable in mehreren Modulen benötigen (z.B. wird das Vokabel - Array in den Funktionen

function vokabelTrainer(){}
function pruefen(){}

verwendet), müssen diese als globale Variable außerhalb der Funktionen deklariert werden.

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Vokabeltrainer</title>                
    </head>
        <script>
          var vokabeln;
          var vokabelNr;
          var de=0;
          var en=1;
          function vokabelTrainer(){
          	vokabeln=[['aber', 'but',0],
              ['Abfall', 'waste',0],
              ['Abrechnung; Buchen; Buchung', 'accounting',0],
              ['Einfahrt', 'gateway',0],
              ['Eingabetaste', 'enter key',0],
              ['Laufwerk; Gerät', 'device',0],
              ['Einkauf' ,'shopping',0],
              ['Einlass', 'admission',0],
              ['Eisenbahn' ,'railway',0],
              ['Grill', 'barbecue',0],
              ['Großmutter' ,'grandma',0],
              ['Großpapa' ,'grandpa',0],
              ['Gruppenarbeit' ,'group work',0],
              ['Haar, Haare','hair',0],
              ['Hampelmann', 'jumping jack',0]];
              var anzVokabeln=vokabeln.length;
              var ausgabe=document.getElementById("deutsch");  
              var eingabe=document.getElementById("englisch").value;
              vokabelNr=Math.floor(Math.random()*(anzVokabeln));
              ausgabe.innerHTML=vokabeln[vokabelNr][de];
          }
          function pruefen(){
            var ergebnis=document.getElementById("richtig_falsch");
            eingabe=document.getElementById("englisch").value;
            
            if(eingabe==vokabeln[vokabelNr][en]){
              ergebnis.innerHTML="richtig";
            	}
            else{ergebnis.innerHTML="falsch, ( " + vokabeln[vokabelNr][en] +" )";
                }
          }   
  		</script>                
    <body>
      <h1>Vokabeltrainer</h1>
      <button onClick="vokabelTrainer();">Start</button>
      <h3>Übersetze auf Englisch:</h3><h2 id="deutsch"></h2>
      <input type="text" id="englisch" style="font-size:14pt;">
      <button onClick="pruefen();">OK?</button>
	  <h3 id="richtig_falsch">richtig oder falsch</h3>
    </body>
</html>

So könnte es aussehen: Vokabeln_4.html

Einige Ideen zur Weiterentwicklung des Programms:

Den "Richtig/Falsch-Zähler könnte man nach oben (+1=richtig) oder unten (-1=falsch) zählen. Vokabeln, die mehrfach richtig eingegeben wurden werden nicht mehr abgefragt.
In ein input-Feld wird eingegeben, wie viele Vokabeln abgefragt werden sollen (das Feld mit einer Zahl, z.B. 10, vorbelegen). Danach bekommt man eine Statistik, wie viele Antworten richtig bzw. falsch waren, alle noch nicht gewussten Vokabeln, ...
Die Vokabeln stehen nicht im Programm, sondern werden aus einer Textdatei eingelesen
Mit dem Programm kann man natürlich auch anderen "Wissensstoff" lernen. Sind die Antwortmöglichkeiten zu schwierig zum eintippen, kann man auch mehrere Antorten vorgeben (wie bei "Wer wird Millionär") und die richtige Antwort per Optionsschaltfläche auswählen lassen.

Weitere Arrays für Quiz - Programme

Bundesländer und Hauptstädte

var landStadt=[['Baden-Württemberg','Stuttgart'],
     ['Bayern','München'],
     ['Berlin','Berlin'],
     ['Brandenburg','Potsdam'],
     ['Bremen','Bremen'],
     ['Hamburg','Hamburg'],
     ['Hessen','Wiesbaden'],
     ['Mecklenburg-Vorpommern','Schwerin'],
     ['Niedersachsen','Hannover'],
     ['Nordrhein-Westfalen','Düsseldorf'],
     ['Rheinland-Pfalz','Mainz'],
     ['Saarland','Saarbrücken'],
     ['Sachsen','Dresden'],
     ['Sachsen-Anhalt', 'Magdeburg'],
     ['Schleswig-Holstein','Kiel'],
     ['Thüringen','Erfurt']];

So könnte ein Landeshauptstädte - Quiz mit Antwort - Texteingabe aussehen: Quiz_Landeshauptstaedte_V1.html
So könnte ein Landeshauptstädte - Quiz mit Optionsschaltflächen (Radiobuttons) aussehen: Quiz_Landeshauptstaedte_radio_V2.html

EU Staaten und Flaggen ("<img src='"+pfad+landFlagge[i][1]+"'>")

var pfad="images/";
var landFlagge=[['Italien','f_italien.gif'],
     ['Deutschland','f_deutschl.gif'],
     ['Polen','f_polen.gif'],
     ['Portugal','f_portug.gif'],
     ['Schweden','f_schwed.gif'],
     ['Irland','f_irland.gif'],
     ['Finnland','f_finnland.gif'],
     ['Zypern','f_zypern.gif'],
     ['Österreich','f_oesterr.gif'],
     ['Belgien','f_belgien.gif'],
     ['Slowakei','f_slowakei.gif'],
     ['Slowenien','f_slowenien.gif'],
     ['Lettland','f_lettland.gif'],
     ['Spanien', 'f_spanien.gif'],
     ['Luxemburg','f_luxemb.gif'],
     ['Rumänien','f_rumaen.gif'],
     ['Griechenland','f_griechenl.gif'],
     ['Estland','f_estland.gif'],
     ['Ungarn', 'f_ungarn.gif'],
     ['Litauen','f_litau.gif'],
     ['Malta','f_malta.gif'],            
     ['Niederlande','f_niederl.gif'],
     ['Bulgarien','f_bulgar.gif'],
     ['Dänemark', 'f_daenem.gif'],
     ['Tschechien','f_tschech.gif'],
     ['Frankreich','f_frankr.gif'],
     ['Kroatien', 'f_kroatien.gif']];

Ein Flaggen - Quiz könnte so aussehen: Quiz_Flaggen_radio_V0.html