Einführung Javascript

Was ist das?

Im Gegen­satz zu HTML ist Java­script (Java­Script, JS) eine rich­ti­ge Pro­gram­mier­spra­che, mit der man Web­sei­ten inter­ak­tiv gestal­ten kann. So las­sen sich etwa Ein­ga­ben in HTML-For­mu­la­ren über­prü­fen, Dia­log­fens­ter mit Nach­rich­ten anzei­gen, die Rech­te von soge­nann­ten Coo­kies ver­wal­ten usw. Des Wei­te­ren ist es mög­lich, Spie­le in Java­script zu pro­gram­mie­ren.

Hallo Welt

Wenn man eine Pro­gram­mier­spra­che erlebt, ist es üblich, sich zunächst ein Hal­lo-Welt-Bei­spiel anzu­schau­en. 

<html>
  <head>
    <meta charset="utf-8"/>
    <title>Hallo Welt JS!</title>
  </head>
  <body>
    <script>
      document.write("Hallo Welt!");
    </script>
  </body>
</html>

Zunächst ein­mal stel­len wir fest, dass es sich um eine ganz nor­ma­le HTML-Datei mit der typi­schen Struk­tu­rie­rung han­delt. Hier haben wir im Body-Bereich zusätz­lich ein neu­es Tag <script>. Die­ses teilt dem Brow­ser mit, dass Java­script-Code inter­pre­tiert wer­den muss. In unse­rem Bei­spiel ist es die Aus­ga­be eines kur­zen Tex­tes: Hal­lo Welt!

Wir kön­nen auch alle mög­li­chen Tags anfü­gen, um unse­re Text­aus­ga­be zu for­ma­tie­ren. So kön­nen wir in der Zei­le 8 auch schrei­ben document.write(„document.write(„Hallo Welt!“); und Hal­lo Welt! wird als Über­schrift 1. Ord­nung aus­ge­ge­ben.

Variablen und Datentypen

Varia­blen wer­den in Java­script mit let oder, nach alter Kon­ven­ti­on, mit var defi­niert:

<script>
  let begruessung;

  begruessung = 'Hallo Welt';
  document.write(begruessung);

  begruessung = 'Guten Tag';
  document.write(begruessung);
</script>

Der Varia­ble begrues­sung wur­de hier der Wert ‚Hal­lo‘ zuge­wie­sen. Jetzt kann der Wert der Varia­ble mit document.write aus­ge­ge­ben wer­den. Wir kön­nen aber natür­lich auch spä­ter­hin einen ande­ren Wert zuwei­sen, wie hier das förm­li­che­re ‚Guten Tag‘ und das dann wie­der­um auch aus­ge­ben.

In Java­script kön­nen die Varia­blen drei Typen anneh­men, näm­lich String, Num­ber und Boolean. Strings, also Varia­blen die­ses Daten­typs, sind Zei­chen­ket­ten, die von Gän­se­füß­chen oder Hoch­kom­mas ein­ge­schlos­sen wer­den, also etwa let s=“Hund“ oder let s=’Hund‘. Varia­blen des Daten­typs Num­ber sind Zah­len, also z.B. let x=3.14 oder let x=300. Bool­sche Varia­blen neh­men ent­we­der den Wert true (1) oder fal­se (0) anneh­men.

<script>
  // String
  let s1 = 'Hund'; 
  let s2 = "Katze";

  // Number
  let x1 = 3.14; // Dezimal-Punkt beachten
  let x2 = 300;

  // Boolean
  let b1 = true;
  let b2 = false;
</script>

Mit dem +-Zei­chen las­sen sich Strings mit Strings und ande­ren Daten­ty­pen kom­bi­nie­ren, wobei immer wie­der ein String ent­steht.

<script>
  let vorname = 'Till'; 
  let nachname = 'Lindemann'

  document.write(vorname + ' ' + nachname);
  // Till Lindemann

  document.write(vorname + 666);
  // Till666

  document.write(vorname + true);
  // Tilltrue
</script>

Wei­ter­hin gibt es noch die Daten­ty­pen Array und Object. In einem Array kön­nen ver­schie­de­ne Wer­te gespei­chert wer­den, z.B. alle Spiel­ergeb­nis­se oder alle Noten, was zuge­ge­be­ner­ma­ßen manch­mal nicht so weit aus­ein­an­der liegt. Ein Objekt kann in Java­script so ziem­lich alles sein. Auf Array und Objek­te wer­den wir spä­ter noch zurück­kom­men.

Rechenoperationen

Über­ra­schen­der­wei­se kön­nen Zah­len mit dem Plus­zei­chen addiert wer­den:

<script>
  // Addition
  let x = 600 + 60;
  document.write(x);
  // 660

  // Sonderfall Addition zu sich selbst
  x += 6;
  document.write(x);
  // 666

  // Sonderfall Addition + 1
  x++;
  document.write(x);
  // 667
</script>

Mit dem Minus­zei­chen wird ana­log dazu sub­tra­hiert:

<script>
  // Subtraktion
  let x = 40 + 60;
  document.write(x);
  // 100

  // Sonderfall Subtraktion von sich selbst
  x -= 25;
  document.write(x);
  // 75

  // Sonderfall Subtraktion - 1
  x--;
  document.write(x);
  // 74
</script>

Mul­ti­pli­ka­tio­nen und Divi­si­on las­sen sich mit * bzw. / vor­neh­men:

<script>
  // Multiplikation
  let x = 4 * 7;
  document.write(x);
  // 28

  // Division
  x = x/8;
  document.write(x);
  // 3.5
</script>

Math ist ein Stan­dard­ob­jekt von Java­script, das ver­schie­de­ne mathe­ma­ti­sche Funk­tio­nen ent­hält. Objek­te kön­nen mit der Punkt­no­ta­ti­on ange­spro­chen wer­den, so gibt Math.PI die Zahl π zurück. Mit Math kön­nen natür­lich auch Poten­zen und Wur­zeln berech­net wer­den.

<script>
  // Potenz
  let x1 = Math.pow(2,4);
  document.write(x1);
  // 16

  let x2 = Math.sqrt(x1);
  document.write(x2);
  // 4

  // dekadischer Logarithmus
  let x3 = Math.log10(100);
  document.write(x3);
  // 2
</script>

Rund und zufällig

Bei vie­len Anwen­dun­gen, z.B. bei Spie­len, spie­len Zufalls­zah­len eine gro­ße Rol­le. Hier­mit eng ver­bun­den sind ver­schie­de­ne Mög­lich­kei­ten des Run­dens und ande­rer Zah­len­ma­ni­pu­la­tio­nen in Java­script. Las­sen Sie uns an einem vir­tu­el­lem Wür­fel bas­teln und wir wol­len drei­mal wür­feln.

Betrach­ten wir zunächst ein­mal die Funk­ti­on Math.round(), mit der Zufalls­zah­len erzeigt wer­den:

<script>
  let x1 = Math.random();
  let x2 = Math.random();
  let x3 = Math.random();
  document.write(x1 + '<br/>' + x2 + '<br/>' + x3)
  /* 
  Beispielausgabe
  0.974125066007409
  0.58397573132058
  0.03397469871429004
  */
</script>

Jedes Mal, wenn die Funk­ti­on auf­ge­ru­fen wird erhal­te ich einen ande­ren zufäl­li­gen Wert. Aller­dings sind die Wer­te alle klei­ner 1. Beim Wür­feln möch­te ich mich aber auf die gan­zen Zah­len 1 bis 6 beschrän­ken.

Daher mul­ti­pli­zie­re ich die Aus­ga­be mit dem Fak­tor 6.

<script>
  let x1 = 6 * Math.random();
  let x2 = 6 * Math.random();
  let x3 = 6 * Math.random();
  document.write(x1 + '<br/>' + x2 + '<br/>' + x3)
  /* 
  Beispielausgabe
  5.844750396044450
  3.503854387923480
  0.203848192285740
  */
</script>

Im fol­gen­den Schritt run­de ich mit Math.floor die Zufalls­wer­te ab und addie­re die Zahl 1, da die kleins­te Zahl nicht 0 sein darf:

<script>
  let x1 = Math.floor(6 * Math.random()) + 1;
  let x2 = Math.floor(6 * Math.random()) + 1;
  let x3 = Math.floor(6 * Math.random()) + 1;
  document.write(x1 + '<br/>' + x2 + '<br/>' + x3)
  /* 
  Beispielausgabe
  6
  4
  1
  */
</script>

Da ich immer wie­der wür­feln möch­te, ist es nicht sinn­voll, wenn ich jedes Mal eine lan­ge Zei­le auf­schrei­ben muss. Daher kann ich das Gan­ze auch in einer Funk­ti­on wuer­fel() unter­brin­gen, die mir mit return mei­nen gewür­fel­ten Wert zurück­gibt.

<script>
  function wuerfel() {
    return Math.floor(6 * Math.random()) + 1;
  }
  
  document.write(wuerfel() + '<br/>' + wuerfel() + '<br/>' + wuerfel());
</script>

Wei­te­re Run­dungs­mög­lich­kei­ten stel­len Math.round, Math.trunc und Math.ceil dar. Der ganz­zah­li­ge Wert wird mit Math.trunc zurück­ge­ge­ben. Math.round run­det zur nächs­ten gan­zen Zahl. Math.ceil run­det zur nächs­ten gan­zen Zahl auf, also 8.2 zu 9 und -7.1 zu -7.

<script>
  let x1 = Math.PI;
  document.write('pi = ' + x1 + '<br/>');

  let x2 = Math.round(x1);
  document.write('round: ' + x2 + '<br/>');

  let x3 = Math.floor(x1);
  document.write('floor: ' + x3 + '<br/>');

  let x4 = Math.ceil(x1);
  document.write('ceil: ' + x4 + '<br/>');

  let x5 = Math.trunc(x1);
  document.write('trunk: ' + x5);

  /* Ausgabe:
  pi = 3.141592653589793
  round: 3
  floor: 3
  ceil: 4
  trunc: 3
  */
</script>

Arrays

In Array las­sen sich Wer­te vom glei­chen Daten­typ abspei­chern. Im fol­gen­den Bei­spiel sind das einer­seits die Vor­na­men der ers­ten vier Prä­si­den­ten der USA (ich woll­te ein­fach nicht hin­ten begin­nen) und ande­rer­seits die Jah­re des jewei­li­gen Amts­an­tritts.

Die Wer­te im Array kön­nen jetzt ein­zeln ange­spro­chen wer­den, wobei zu beach­ten ist, dass wir nicht bei 1 son­dern bei 0 begin­nen. Dem­nach ist vornamen[0]=George und jahre[2]=1801. Die Anzahl der Ele­men­te in einem Array kann ich über die Eigen­schaft length ermit­teln, so ist vornamen.length=4.

Mit einer soge­nann­ten for-Schlei­fe kann ich ein Array durch­lau­fen, wobei eine bestimm­te Syn­tax zu beach­ten ist. Hin­ter das Wort for kommt eine run­de Klam­mer mit drei Aus­drü­cken, die durch Semi­ko­lons getrennt sind.

Der ers­te Aus­druck ist eine Zähl­va­ria­ble, hier ist das i, für die ein Anfangs­wert defi­niert wird. Die­ser ist zumeist 0. Der zwei­te Aus­druck stellt die Bedin­gung dar, bis zu der eine Schlei­fe durch­lau­fen wird. In unse­rem Bei­spiel ist das die Län­ge des Arrays vor­na­men. Der drit­te Aus­druck ist die soge­nann­te Inkre­ment-Anwei­sung. Hier wird fest­ge­legt, um wie­viel die Zähl­va­ria­ble bei jedem Durch­lauf hoch­ge­zählt wer­den soll. Bei uns steht i++, also wird immer eine 1 dazu addiert. 

<script>
  let vornamen = ["George", "John", "Thomas", "James"];
  let jahre = [1789, 1797, 1801, 1809];

  for (let i=0; i<vornamen.length; i++) {
   document.write(vornamen[i] + ': ' + jahre[i] + '<br/>');
  }
  /* 
  Ausgabe
  George: 1789
  John: 1797
  Thomas: 1801
  James: 1809
  */
</script>

Inhalte verändern

Mit Java­script lässt sich der Inhalt einer Web­sei­te ver­än­dert, ohne dass die­se neu gela­den wer­den muss. Hier­zu müs­sen ledig­lich Ele­men­te vor­han­den sein, die ein­deu­tig ange­spro­chen wer­den kön­nen. Das erfolgt dann mit document.getElementById.

<html>
  <head>
    <meta charset="utf-8"/>
    <title>Text ändern</title>
  </head>
  <body>
    <h1 id="meine_ueberschrift">Hallo</h1>
    <div id="mein_div">hallo</div>
    <script>
    let elem1 = document.getElementById("meine_ueberschrift");
    elem1.style.color = "red";
    elem1.innerHTML = "Das ist neu";
    let elem2 = document.getElementById("mein_div");
    elem2.innerHTML = "Das ist ein neuer Absatz";
    </script>
  </body>
</html>
Ergeb­nis

Hallo

hal­lo

Formulare und Javascript

Auf HTML-Sei­ten ist es mög­lich, For­mu­la­re zu plat­zie­ren. Die­se die­nen zur Ein­ga­be von Daten, z.B. in einem Kon­takt­for­mu­lar, und zum Aus­lö­sen von Aktio­nen, z.B. dem Ver­schi­cken eben die­ser Kon­takt­da­ten. Ein For­mu­lar wird mit dem Tag <form> defi­niert.

Einfache Ausgabe

<html>
<head>
  <meta charset="utf-8">
  <title>Formular</title>
  <script>
    function ausgabe() {
      let s = document.getElementById("name").value;
      alert(s);
    }
  </script>
</head>
<body>
  <form>
    <input type="text" id="name"></input>
    <button type="button" onClick="ausgabe()">Ausgabe</button>
  </form>
</body>
</html>

Im For­mu­lar gibt es ein Input­feld, das ein­deu­tig über die id=“name“ ange­spro­chen wer­den kann. Wei­ter­hin gibt es einen But­ton, der mit Aus­ga­be beschrif­tet ist. Drückt man die­sen But­ton, wird eine Akti­on aus­ge­löst, hier wird die Java­script-Funk­ti­on aus­ga­be() auf­ge­ru­fen. In die­ser Funk­ti­on wird zunächst der Wert des Fel­des über die Eigen­schaft value ermit­telt und schließ­lich mit alert aus­ge­ge­ben, d.h. es erscheint ein klei­nes Mel­dungs­fens­ter.

Würfel mit Button

Wir wol­len unser Wür­fel-Pro­gramm neu auf­grei­fen und den Wür­fel mit einem But­ton star­ten. Dazu defi­nie­ren wir ein Aus­ga­be­feld <out­put>, das wir mit­tels CSS auf­hüb­schen. Wir ver­än­dern die Schrift­grö­ße auf 400 Pixel und die Schrift­far­be auf rot, also doch sehr dezent. Die­ses Aus­ga­be­feld kön­nen wir über die id=“output“ anspre­chen.

Des Wei­te­ren haben wir einen But­ton, der mit Wür­feln beschrif­tet ist. Wenn die­ser But­ton ange­klickt wird, also das Ereig­nis onClick aus­ge­löst wird, so erfolgt der Auf­ruf der Funk­ti­on wuer­fel(). Inner­halb der Funk­ti­on wird zunächst ein­mal wie­der die Zufalls­zahl im Bereich 1…6 erzeugt. Anschlie­ßend erfolgt die Aus­ga­be über das Set­zen des Attri­buts innerHTML des Aus­ga­be­felds.

Die Zahl wird hier­bei als Son­der­zei­chen aus­ge­ge­ben, näm­lich tat­säch­lich in der Form eines Wür­fels. Hier­bei hat der Wür­fel mit einem Auge das Uni­code-Son­der­zei­chen U+9856, was als soge­nann­te HTML-Enti­tät als &#9856; aus­ge­drückt wird. Wir set­zen also die HTML-Enti­tä­ten zusam­men, indem wir die gewür­fel­te Zahl zu 9855 addie­ren.

<html>
<head>
  <meta charset="utf-8">
  <title>Würfeln</title>
  <script>
    function wuerfel() {
      let w = Math.floor(6 * Math.random()) + 1;
        /*
        1 - #9856, 2 - #9857, 3 - #9858
        4 - #9859, 5 - #9860, 6 - #9861
        */
        let zeichen = "&#" + (9855+w) + ";"
        document.getElementById("output").innerHTML = zeichen;
    }
  </script>
</head>
<body>
  <form>
    <output id="output" style="font-size: 400px; color:red">_</output>
    <button type="button" onClick="wuerfel()">Würfeln</button>
  </form>
</body>
</html>

Quadratische Funktion

Wir wol­len in einem For­mu­lar die Funk­ti­ons­wer­te einer qua­dra­ti­schen Funk­ti­on $y=a x^2 + b x + c$ berech­nen. Hier­zu benö­ti­gen wir Input die Fak­to­ren a, b und c sowie die Gren­zen, in denen die Berech­nung erfol­gen soll. Das wird mit ganz nor­ma­len <input>-Feldern vom Typ text rea­li­siert, und die Fel­der wer­den mit IDs ver­se­hen, sodass man die­se über Java­script bequem anspre­chen kann.

Die eigent­li­che Berech­nung wird über ein onClick-Ereig­nis eines But­tons gestar­tet, den wir mit Berech­nen beschrif­ten.

Für die Aus­ga­be haben wir ein <text­area> vor­ge­se­hen. Das ist nichts ande­res als ein Text­feld, wel­ches sich über meh­re­re Zei­len erstreckt. Die Anzahl der Zei­len kann über das Attri­but Rowe ein­ge­stellt wer­den. Bei uns ist rows=“20″, also sind stan­dard­mä­ßig 20 Zei­len sicht­bar. Über cols kann die Anzahl der Spal­ten beein­flusst wer­den. Im Brow­ser lässt sich die Dimen­si­on des Text­be­reichs mit der Maus anpas­sen.

In der Funk­ti­on berech­nen wer­den zunächst die ein­ge­ge­be­nen Wer­te mit document.getElementById aus­ge­le­sen. Mit der Funk­ti­on par­se­Float wird sicher­ge­stellt, dass die Wer­te auch tat­säch­lich als Zah­len inter­pre­tiert wer­den.

Die Funk­ti­ons­wer­te wer­den in einer for-Schlei­fe berech­net. Oben haben wir bereits gelernt, dass eine der­ar­ti­ge Schlei­fe über drei Aus­drü­cke defi­niert wird. Hier beginnt die Schlei­fe bei der unte­ren Gren­ze, geht bis ein­schließ­lich der obe­ren Gren­ze und der Zäh­ler i wird immer um 1 her­auf­ge­setzt.

Eine Varia­ble vom Typ String wird inner­halb der for-Schlei­fe suk­zes­si­ve erwei­tert, näm­lich jeweils um den Wert von x gefolgt von einem Tabu­la­tor \t, dem berech­ne­ten Funk­ti­ons­wert und einem Zei­len­en­de­zei­chen \n.

<html>
<head>
  <meta charset="utf-8">
  <title>Quadratische Funktion</title>
  <script>
    function berechnen() {
      let s = "";
      let a = document.getElementById("a").value;
      let b = document.getElementById("b").value;
      let c = document.getElementById("c").value;
      let von = document.getElementById("von").value;
      let bis = document.getElementById("bis").value;

      a = parseFloat(a);
      b = parseFloat(b);
      c = parseFloat(c);
      von = parseFloat(von);
      bis = parseFloat(bis);

      for (let i=von; i<=bis; i++) {
        s += i + "\t" + (a*i*i + b*i +c) + "\n";
      }

      document.getElementById("ausgabe").innerHTML = s;
    }
  </script>
</head>
<body>
  <h1>Funktionswerte einer quadratischen Funktion</h1>
  <h2>y = a x<sup>2</sup> + b x + c </h2>
  <form>
    a <input type="text" id="a"> <br/>
    b <input type="text" id="b"> <br/>
    c <input type="text" id="c"> <br/>
    Grenzen: <br/>
    von <input type="text" id="von"> <br/>
    bis <input type="text" id="bis"> <br/>

    <button type="button" onClick="berechnen()">Berechnen</button>
    <br/>
    <textarea  cols="20" rows="20" id="ausgabe"></textarea>
  </form>
</body>
</html>