JavaScript

Grenzen von HTML

Hypertext Markup Language ist eine Sprache, mit der Informationen (z.B.: Texte, Bilder) in Form einer Webseite strukturiert und formatiert werden können.

Das Grundgerüst einer Seite sieht wie folgt aus:

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
  </body>
</html>

Im Grunde genommen kann man sich eine HTML-Seite als ein Buch vorstellen, in dem Informationen in Texten, Tabellen, Bildern und Grafiken strukturiert, formatiert und durch Verweise(z.B.: „Siehe Kapitel 3“) miteinander verknüpft sind.

HTML bietet nur rudimentäre Möglichkeiten zur Nutzerinteraktion. So kann zum Beispiel nicht auf eine Benutzereingabe reagiert werden.

JavaScript

JavaScript ist eine Programmiersprache, durch die HTML-Seiten (inter)aktiv gemacht werden können. So kann unter anderem ein Taschenrechner durch JavaScript programmiert und auf einer HTML-Seite dargestellt werden.

Durch JavaScript, HTML (und CSS) werden viele iPhone oder Android-Apps erstellt.

Wie funktioniert JavaScript?

Das Grundprinzip einer Programmiersprache – in diesem Fall JavaScript – ist das EVA-Prinzip.

JavaScript macht im Prinzip nichts anderes. Auf eine Aktion (z.B. Drücken eines Knopfes), wird ein Code verarbeitet (z.B.: Hintergrundfarbe=Blau) und das Ergebnis ausgegeben (z.B.: Laden der neuen Hintergrundfarbe).

Wichtige Fakten:

  • JavaScript ist eine Clientseitige-Script-Sprache. Sie läuft also auf dem Client (dem PC/Computer des Benutzers) und nicht auf dem Server (wo die Homepage gespeichert ist) ab.
  • Da das Script, welches durch den Browser interpretiert wird, leider nicht zu 100% von allen Browsern gleich verstanden wird, empfehle ich die Nutzung des kostenlosen Browsers „Firefox“.
  • JavaScript ist nicht Java.

Der Grundaufbau

Ein Währungsrechner in Javascript

<html>
   <head>
      <title>Euro2Dollar</title>
   </head>
      <script language="JavaScript">
         function euro2dollar()
            {
               // Variablen
               var dollar, euro;
              //Eingabe/Einlesen
               euro=Number(window.document.formular.euro.value);
               //Verarbeitung
               dollar = euro * 1.3886;	      // !!! Punkt nicht Komma!!!
              //Ausgabe
               window.document.formular.dollar.value=dollar;
            }
     </script>
   <body>
      <h1>Waehrungsumrechner</h1>
      <form name="formular">
         <p>EURO <input type="Text" name="euro"></p>
         <input type="Button" value="Euro2Dollar" class="button" onClick="euro2dollar()">
         <p>Dollar <input type="Text" name="dollar"></p>
      </form>
   </body>
</html>

HTML-Kopf

<html>
   <head>
      <title>Euro2Dollar</title>
   </head>

Die Zeile 2-4 bildet den HTML-Kopf mit dem Titel der HTML-Seite.

JavaScript-Block

<script language="JavaScript">
…
</script>

Der JavaScript-Block steht in einem HTML-Dokument zwischen dem HEAD und dem BODY. In der Zeile 5 wird der JavaScript-Block begonnen und in der Zeile 17 wieder geschlossen.

HTML-Body

   <body>
...
   </body>
</html>

Der Body beinhaltet neben einer Überschrift ein Formular, welches im Folgenden erläutert wird.

Das Formular

<form name="formular">
  <p>EURO <input type="Text" name="euro"></p>
  <input type="Button" value="Euro2Dollar" class="button" onClick="euro2dollar()">
  <p>Dollar <input type="Text" name="dollar"></p>
</form>

Kommentar

  • 1 Anfangstag – Beginn des Formulars mit dem Namen „formular"
  • 2 Textbox mit dem Namen „euro“.
  • 3 Button der die JavaScript-Funktion „euro2dollar()“ ausführt.
  • 4 Textbox mit dem Namen „dollar“.
  • 5 Endtag – Ende des Formulars

Die JavaScript-Funktion - euro2dollar

         function euro2dollar()
            {
               ...
            }

Die JavaScript-Funktion beginnt in den Zeilen 6 und 7 und endet mit der Klammer in Zeile 16.

Kommentar

// Variablen

Der Kommentar wird mit „//“ eingeleitet. Ein Kommentar hat eine erklärende Funktion und wird nicht von JavaScript ausgeführt.

Variablen

var dollar, euro;

Durch die Zeile 9 werden die beiden Variablen dollar und euro erstellt.

Eine Variable kann man sich als einen Karton vorstellen in dem Werte abgelegt und wieder aufgerufen werden können.

Eingabe/Einlesen

euro=Number(window.document.formular.euro.value);

Durch die Zeile 11 wird der Wert des Textfeldes „euro“ in die Variable „euro“ eingelesen.

Verarbeitung

dollar = euro * 1.3886;

In Zeile 13 findet die Verarbeitung statt.

Wenn Beispielsweise der Benutzer in das Feld Euro eine 7 eingibt, so wird folgende Rechnung ausgeführt:

dollar = euro * 1.3886;

dollar = 7 * 1.3886;

dollar = 9.7202

Nach der Verarbeitung hat die Variable dollar den Wert 9.7202

Ausgabe

window.document.formular.dollar.value=dollar;

Der Wert der Variable „dollar“ (9.7202) wird in der Textbox dollar ausgegeben.

Der Währungsrechner

Aufgaben:

  1. Öffne den Quellcode Währungsrechner und kommentiere den Quelltext.
  2. Drücke oben einmal auf Save und schreibe Dir die Url vom Browser ab.
  3. Problemstellung: Das Programm soll die Umrechnung von Dollar nach Euro beherrschen.
  4. Vergleiche Deine Programm mit der Lösung.

Lösung zum Kontrollieren

<html>

  <head>
    <title>Dollar2Euro</title>
  </head>
  <script language="JavaScript">
    function dollar2euro() {
      // Variablen								
      var dollar, euro;

      //Eingabe/Einlesen
      dollar = Number(window.document.formular.dollar.value);

      //Verarbeitung					
      euro = dollar / 1.3886; // PUNKT NICHT KOMMA

      //Ausgabe
      window.document.formular.euro.value = euro;
    }

  </script>

  <body>
    <h1>Waehrungsumrechner</h1>
    <form name="formular">
      <p>Dollar <input type="Text" name="dollar"></p>
      <input type="Button" value="Dollar2Euro" class="button" onClick="dollar2euro()">
      <p>Euro <input type="Text" name="euro"></p>
    </form>
  </body>

</html>

Taschenrechner

Aufgaben:

  1. Öffne den Quellcode Taschenrechner.
  2. Drücke oben einmal auf Save und schreibe Dir die Url vom Browser ab.
  3. Problemstellung: Der Taschenrechner soll die Grundrechenoperationen Subtraktion, Multiplikation und Division beherrschen.
  4. Vergleiche Deine Programm mit der Lösung.
<html>

  <head>
    <title>Taschenrechner</title>
  </head>
  <script language="JavaScript">
  
    function addition() {
      // Variablen			
      var ergebnis, zahl1, zahl2;

      //Eingabe/Einlesen					
      zahl1 = Number(window.document.formular.zahl1.value);
      zahl2 = Number(window.document.formular.zahl2.value);

      //Verarbeitung
      ergebnis = zahl1 + zahl2;

      //Ausgabe
      window.document.formular.ergebnis.value = ergebnis;
    }

    function subtraktion() {
      // Variablen			
      var ergebnis, zahl1, zahl2;

      //Eingabe/Einlesen					
      zahl1 = Number(window.document.formular.zahl1.value);
      zahl2 = Number(window.document.formular.zahl2.value);

      //Verarbeitung
      ergebnis = zahl1 - zahl2;

      //Ausgabe
      window.document.formular.ergebnis.value = ergebnis;
    }

    function multiplikation() {
      // Variablen			
      var ergebnis, zahl1, zahl2;

      //Eingabe/Einlesen					
      zahl1 = Number(window.document.formular.zahl1.value);
      zahl2 = Number(window.document.formular.zahl2.value);

      //Verarbeitung
      ergebnis = zahl1 * zahl2;

      //Ausgabe
      window.document.formular.ergebnis.value = ergebnis;
    }

    function division() {
      // Variablen			
      var ergebnis, zahl1, zahl2;

      //Eingabe/Einlesen					
      zahl1 = Number(window.document.formular.zahl1.value);
      zahl2 = Number(window.document.formular.zahl2.value);

      //Verarbeitung
      ergebnis = zahl1 / zahl2;

      //Ausgabe
      window.document.formular.ergebnis.value = ergebnis;
    }

  </script>

  <body>
    <h1>Taschenrechner</h1>
    <form name="formular">
      <p>Zahl1 :<input type="Text" name="zahl1"></p>
      <p>Zahl2 :<input type="Text" name="zahl2"></p>
      <input type="Button" value="+" class="button" onClick="addition()">
      <input type="Button" value="-" class="button" onClick="subtraktion()">
      <input type="Button" value="*" class="button" onClick="multiplikation()">
      <input type="Button" value="/" class="button" onClick="division()">
      <p>Ergebnis:<input type="Text" name="ergebnis"></p>
    </form>
  </body>

</html>

Rechteckberechnung

Problemstellung:

  1. Schreibe ein Programm, welches den Umfang und die Fläche eines beliebigen Rechtecks berechnet.