www.r-krell.de
Webangebot für Schule und Unterricht, Software, Fotovoltaik und mehr

Willkommen/Übersicht  >  Informatik  >  



Einige JavaScript-Beispiel-Programme
zum Ausprobieren und Ansehen



In Ergänzung meiner Ausführungen über den aktuellen Grundkurs 11 auf meiner Informatik-Hauptseite stelle ich hier einige JavaScript-Programme vor:

Achtung: Damit die Programme ausgeführt werden können, muss Javascript aktiviert sein. Erscheint beim Internet-Explorer oben eine gelbe Warnleiste in diesem Fenster, muss auf die Leiste geklickt und müssen dann geblockte Inhalte zugelassen werden!


zum Seitenanfang / zum Seitenende

A. Euro-Rechner

Euro-DM-Umrechner

Bitte in eines der beiden Felder einen Geld-Betrag (mit Punkt statt Komma) eingeben und ins andere Feld klicken! Das Programm entspricht den offiziellen Umrechnungs-Regeln. Da die Interpretation des Skripts und die Rechengenauigkeit aber von Ihrem Browser abhängt, kann keine Garantie für richtige Ergebnisse übernommen werden.

DM       =    Euro
NaN (not a number)? - Sie haben keine richtige Zahl oder vielleicht doch ein Komma anstelle des Dezimalpunkts eingetippt. Versuchen Sie es nochmal!
B. Bestellung mit Rechnung

Ihre Rechnung

Bitte tragen Sie in das Rechnungsformular die gewünschten Anzahlen ein. Klicken Sie dann irgendwo anders hin und alles wird berechnet!

Anzahl  Artikel          Einzelpreis    Preis
-------------------------------------------------------
  HTML-Tipps       à 5.30 Euro  =  Euro
  CSS-Tipps        à 4.80 Euro  =  Euro
  JavaScript-Tipps à 6.10 Euro  =  Euro
-------------------------------------------------------
                               Summe  =  Euro
C. Bestellung mit Versandkosten

Ihre Rechnung mit preisabhängigem Porto

Bitte tragen Sie in das Rechnungsformular die gewünschten Anzahlen ein!

Anzahl  Artikel          Einzelpreis    Preis
-------------------------------------------------------
  HTML-Tipps       à 5.30 Euro  =  Euro
  CSS-Tipps        à 4.80 Euro  =  Euro
-------------------------------------------------------
                       ZwischenSumme     Euro
   Porto (entfällt bei über 50 Euro)  +  Euro
                         GesamtSumme  =  Euro
D. Kantinen-Menü

Was wollen Sie essen?

Stellen Sie sich durch Anklicken Ihr Menü zusammen. Klicken Sie zum Schluss in das Betragsfeld und halten Sie bitte den angezeigten Betrag für die Kasse bereit! 
    Suppe              (1.50 Euro)
    kleiner gem. Salat (2.10 Euro)
    Hauptgericht       (3.45 Euro)
    Nachtisch          (1.80 Euro)
   ----------------------------------
      Ihr Menü kostet  Euro
E. Prüfe dein Gewicht

Berechne dein Normalgewicht!

Nach der Eingabe von Geschlecht und Größe bitte ins Ergebnisfeld klicken. Aber nicht vergessen: Wohlfühlen ist wichtiger als fragwürdige Ideale!

Geschlecht: männlich weiblich
Größe: cm

Dein Normalgewicht wäre kg
NaN oder negatives Ergebnis? Bitte die Größe ohne Komma in ganzen Zentimetern angeben -- Das Programm ist nur für Erwachsene über 100 cm Größe geeignet.
F. Bitte recht freundlich

Guten Tag!

Nach der Eingabe von Geschlecht und Vornamen bitte den Knopf drücken:

Geschlecht: männlich weiblich
Name:



G. Fit im Einmaleins?

Einige Mathe-Übungen

Jetzt wird der Computer veranlasst, einige Rechenaufgaben zu lösen. Das ist nicht neu: er hat auch schon bei den Programmen A bis E gerechnet. Neu ist, dass hier nur mit einer Funktion (dafür aber mit Parametern und Rückgabewert) gearbeitet wird!

1.)     *      
2.)     *      
3.)     *      
H. Zeitvertreib für zwei menschliche Spieler

Tic-Tac-Toe

Bei diesem Spiel drücken zwei Spieler abwechselnd auf die Tasten, um jeweils ein "X" oder ein "O" zu erzeugen. Ziel ist es, drei gleiche Zeichen in einer Zeile, einer Spalte oder einer Diagonalen zu erreichen. Das Programm zeigt (noch) nicht den Gewinn an -- hier bleibt noch ein Betätigungsfeld für Nachwuchsprogrammierer...

   

   

   
Hier folgt später vielleicht mehr..

zum Seitenanfang / zum Seitenende

A. Euro-Rechner (erste Funktionen, Textfelder)

<html>
  <head>
    <title>A. Euro-Rechner</title>
    <meta name="author" content="R. Krell (www.r-krell.de)">
    <SCRIPT language="JavaScript">
      <!--
       //-------------- A. Eurorechner ---------------
       var EUROKURS = 1.95583;

       function BerechneEuro()
       {
         var DMBetrag = document.a.DMFeld.value;
         var EuBetrag = Math.round(100*DMBetrag/EUROKURS)/100;
         document.a.EuFeld.value = EuBetrag;
       }

       function BerechneDM()
       {
         var EuBetrag = document.a.EuFeld.value;
         var DMBetrag = Math.round(100*EuBetrag*EUROKURS)/100;
         document.a.DMFeld.value = DMBetrag;
       }

      //-->
    </SCRIPT>
  </head>

  <body>
    <h2>Euro-DM-Umrechner</h2>
    Bitte in eines der beiden Felder einen Geld-Betrag (mit Punkt statt Komma) eingeben und
    dann ins andere Feld klicken! Das Programm entspricht den offiziellen Umrechnungs-
    Regeln. Da die Interpretation des Skripts und die Rechengenauigkeit aber von Ihrem
    Browser abhängt, kann keine Garantie für richtige Ergebnisse übernommen werden.<br>

    <FORM name="a">
      <P ALIGN="CENTER">
        <INPUT name="DMFeld" size=10 onchange="BerechneEuro()" type=text>
        DM       =   
        <INPUT name="EuFeld" size=10 onchange="BerechneDM()" type=text>
        Euro
      </P>
    </FORM>

    NaN (not a number)? - Sie haben keine richtige Zahl oder vielleicht doch ein Komma
    anstelle des Dezimalpunkts eingetippt. Versuchen Sie es nochmal!
  </body>
</html>

zum Seitenanfang / zum Seitenende

B. Bestellung mit Online-Rechnung (Funktionen rufen sich untereinander auf)

<html>
  <head>
    <title>B. Rechnung mit Rechnung</title>
    <meta name="author" content="R. Krell (www.r-krell.de)">
    <SCRIPT language="JavaScript">
      <!--
      //-------------- B. Rechnung ---------------
        function Gesamt()
        {
          var p = 1*document.b.Preis1.value + 1*document.b.Preis2.value
                  + 1*document.b.Preis3.value ;
          document.b.Rechnung.value = p;
        }

        function Rechnung1()
        {
          var p1 = document.b.Anz1.value * 5.3;
          document.b.Preis1.value = p1;
          Gesamt(); //Aufruf einer anderen Funktion
        }

        function Rechnung2()
        {
          var p2 = document.b.Anz2.value * 4.8;
          document.b.Preis2.value = p2;
          Gesamt();
        }

        function Rechnung3()
        {
          var p3 = document.b.Anz3.value * 6.1;
          document.b.Preis3.value = p3;
          Gesamt();
        }
      //-->
    </SCRIPT>
  </head>

  <body>
    <h2>Ihre Rechnung</h2>
    Bitte tragen Sie in das Rechnungsformular die gewünschten Anzahlen ein. Klicken Sie
    dann irgendwo anders hin und alles wird berechnet!<br>

    <form name="b">
      <pre><!-- erzeugt Monotype-Schrift, schreibt Mehrfach-Leerzeichen und Zeilenenden wie hier-->
Anzahl  Artikel          Einzelpreis    Preis
-------------------------------------------------------
<input type="Text" name="Anz1" size="5" onChange="Rechnung1()">  HTML-Tipps       à 5.30 Euro  = <input type="Text" name="Preis1" size="10"> Euro
<input type="Text" name="Anz2" size="5" onChange="Rechnung2()">  CSS-Tipps        à 4.80 Euro  = <input type="Text" name="Preis2" size="10"> Euro
<input type="Text" name="Anz3" size="5" onChange="Rechnung3()">  JavaScript-Tipps à 6.10 Euro  = <input type="Text" name="Preis3" size="10"> Euro
-------------------------------------------------------
                               Summe  = <input type="Text" name="Rechnung" size="10"onChange="Gesamt()"> Euro
      </pre>
    </form>
 </body>
</html>

zum Seitenanfang / zum Seitenende

C. Bestellung mit bestellwertabhängigen Versandkosten (if-Anweisung)

<html>
  <head>
    <title>C. Bestellung mit Versandkosten</title>
    <meta name="author" content="R. Krell (www.r-krell.de)">
    <SCRIPT language="JavaScript">
      <!--
      //-------------- C. Rechnung mit Porto ---------------

        function Gesamt()
        {
          var zw = 1*document.c.Preis1.value + 1*document.c.Preis2.value;
          document.c.ZwiSu.value = zw;
          var zustell = "3.50";
          if (zw>=50)
            { zustell = "" }
          document.c.Porto.value = zustell;
          document.c.Rechnung.value = 1*zw + 1*zustell;
        }

        function Rechnung1()
        {
          var p1 = document.c.Anz1.value * 5.3;
          document.c.Preis1.value = p1;
          Gesamt();
        }

        function Rechnung2()
        {
          var p2 = document.c.Anz2.value * 4.8;
          document.c.Preis2.value = p2;
          Gesamt();
        }

      //-->
    </SCRIPT>
  </head>

  <body>
    <h2>Ihre Rechnung mit preisabhängigem Porto</h2>
    Bitte tragen Sie in das Rechnungsformular die gewünschten Anzahlen ein!<br>
    <br>

    <form name="c">
      <pre>
Anzahl  Artikel          Einzelpreis    Preis
-------------------------------------------------------
<input type="Text" name="Anz1" size="5" onChange="Rechnung1()">  HTML-Tipps       à 5.30 Euro  = <input type="Text" name="Preis1" size="10"> Euro
<input type="Text" name="Anz2" size="5" onChange="Rechnung2()">  CSS-Tipps        à 4.80 Euro  = <input type="Text" name="Preis2" size="10"> Euro
-------------------------------------------------------
                       ZwischenSumme    <input type="Text" name="ZwiSu" size="10" onChange="Gesamt()"> Euro
   Porto (entfällt bei über 50 Euro)  + <input type="Text" name="Porto" value="3.50" size="10" onChange="Gesamt()"> Euro
                         GesamtSumme  = <input type="Text" name="Rechnung" size="10" onChange="Gesamt()"> Euro
      </pre>
    </form>

  </body>
</html>

zum Seitenanfang / zum Seitenende

D. Kantinen-Menü (mehrere if-Anweisungen, Checkboxen)

<html>
  <head>
    <title>D. Kantinen-Menü</title>
    <meta name="author" content="R. Krell (www.r-krell.de)">
    <SCRIPT language="JavaScript">
      <!--
      //-------------- D. Menüwahl ---------------
        //Abfrage von Checkbox-Value funktioniert nicht. Deshalb glabale
        //Variablen. Die Werte bedeuten: -1 = ohne Haken; +1 = mit Haken
        var d_1 = -1; //Suppe (am Anfang ohne Haken)
        var d_2 = -1; //Salat
        var d_3 = -1; //Hauptgericht
        var d_4 = -1; //Nachtisch

        function Rechnung()
        {
          var summe = 0;
          if (d_1 > 0) //falls angehakt, Preis zur Summe dazu
            { summe = summe + 1* 1.50; } //1*, damit nicht als Text hintendran
          if (d_2 > 0)
            { summe = summe + 1* 2.10; }
          if (d_3 > 0)
            { summe = summe + 1* 3.50; }
          if (d_4 > 0)
            { summe = summe + 1* 1.80; }
          document.d.Summenfeld.value = summe;
        }

      //-->
    </SCRIPT>
  </head>

  <body>
    <h2>Was wollen Sie essen?</h2>
    Stellen Sie sich durch Anklicken Ihr Menü zusammen. Klicken Sie zum Schluss in das
    Betragsfeld und halten Sie bitte den angezeigten Betrag für die Kasse bereit!

    <form name="d">
      <pre>
        <!-- Hinweis: Multiplikation mit (-1) schaltet zwischen -1 und +1 um! -->
        <input type="Checkbox" onClick="d_1 = (-1)*d_1"> Suppe              (1.50 Euro)
        <input type="Checkbox" onClick="d_2 = (-1)*d_2"> kleiner gem. Salat (2.10 Euro)
        <input type="Checkbox" onClick="d_3 = (-1)*d_3"> Hauptgericht       (3.50 Euro)
        <input type="Checkbox" onClick="d_4 = (-1)*d_4"> Nachtisch          (1.80 Euro)
        ----------------------------------
           Ihr Menü kostet <input type="Text" name="Summenfeld" size="8"
        onClick="Rechnung()" onChange="Rechnung()"> Euro
      </pre>
    </form>

  </body>
</html>

zum Seitenanfang / zum Seitenende

E. Normalgewicht-Berechnung (if-Anweisung, Radiobuttons)

<html>
 <head>
  <title>E. Prüfe dein Gewicht</title>
  <meta name="author" content="R. Krell (www.r-krell.de)">
  <SCRIPT language="JavaScript">
   <!--
   //-------------- E. Normalgewicht ---------------
    var sex = "w"; //globale Variable speichert das Geschlecht

    function Berechnung()
    {
     var hoehe = document.e.Groesse.value;
     var gew = hoehe - 100;
     if (sex=="w") //bei gespeichertem w nur 90%
     {
      gew = 0.9 * gew;
     }
     document.e.Gewicht.value = gew;
    }

   //-->
  </SCRIPT>
 </head>

 <body>
  <h2>Berechne dein Normalgewicht!</h2>

  Nach der Eingabe von Geschlecht und Größe bitte ins Ergebnisfeld klicken.
  Und nie vergessen: Wohlfühlen ist wichtiger als falsche Ideale!<br>

  <form name="e">
   <P ALIGN="CENTER">
    Geschlecht:
    <input type="radio" name="Geschlecht" onclick="sex='m'"> männlich
    <input type="radio" name="Geschlecht" onclick="sex='w'" checked> weiblich <br>
    Größe:
    <input type="Text" name="Groesse" size="5" onchange="Berechnung()"> cm <br><br>
    Dein Normalgewicht wäre
    <input type="Text" name="Gewicht" size="5" onClick="Berechnung()"> kg
   </p>
  </form>

  NaN oder negatives Ergebnis? Bitte die Größe ohne Komma in ganzen Zentimetern angeben
  -- Das Programm ist nur für Erwachsene über 100 cm Größe geeignet.
 </body>
</html>

zum Seitenanfang / zum Seitenende

F. Schöne Grüße (if-Anweisung mit else, Schaltfläche/Taste)

<html>
 <head>
  <title>F. Bitte recht freundlich</title>
  <meta name="author" content="R. Krell (www.r-krell.de)">
  <SCRIPT language="JavaScript">
  <!--
  //-------------- F. Gruss ---------------
   var sex = "w"; //globale Variable speichert das Geschlecht

   function Gruss()
   {
    var vn = document.f.VName.value;
    var aus = "Guten Tag, ";
    if (sex=="w")
    {
     aus = aus + "liebe"
    }
    else //falls sex != "w" (ginge anders auch ohne else)
    {
     aus = aus + "lieber"
    }
    aus = aus + " " + vn + "!" // setzt Text zusammen
    document.f.Ausgabe.value = aus;
   }

  //-->
  </SCRIPT>
 </head>

 <body>
  <h2>Guten Tag!</h2>
  Nach der Eingabe von Geschlecht und Vornamen bitte den Knopf drücken:<br>

  <form name="f">
   <P ALIGN="CENTER">
   Geschlecht:
   <input type="radio" name="Geschlecht" onclick="sex='m'"> männlich
   <input type="radio" name="Geschlecht" onclick="sex='w'" checked> weiblich <br>
   Name: <input type="Text" name="VName" size="25"> <br><br>
   <input type="button" value="Eingabe komplett?" onClick="Gruss()"><br><br>
   <input type="Text" name="Ausgabe" size="40">
   </P>
  </form>
 </body>
</html>

zum Seitenanfang / zum Seitenende

G. Einmaleins (Funktionen mit Parametern und Rückgabewert)

<html>
 <head>
  <title>G. Fit im Einmaleins?</title>
  <meta name="author" content="R. Krell (www.r-krell.de)">
  <SCRIPT language="JavaScript">
  <!--
  //-------------- G. Multiplikationen ---------------

   function produkt (x,y) //Zwei Parameter erwartet
   {
    var ergebnis = x * y;
    return (ergebnis); //Rückgabe vom Ergebnis ..
   }           //.. über den Funktionsnamen

   //Die Funktion ist so einfach, weil die umständlichen Bezeichnungen
   //der Ein- und Ausgabefelder an der aufrufenden Stelle unten im Body stehen.
   //Hier steht nichts davon, deshalb kann die Funktion für das Rechnen in
   //verschiedenen Felderreihen verwendet werden!
  //-->
  </SCRIPT>
 </head>

 <body>
  <h2>Einige Mathe-Übungen</h2>

  Jetzt wird der Computer veranlasst, einige Rechenaufgaben zu lösen. Das ist nicht neu:
  er hat auch schon bei den Programmen A bis E gerechnet. Neu ist, dass hier nur mit
  einer Funktion (dafür aber mit Parametern und Rückgabewert) gearbeitet wird!

  <form name="g">
   <P ALIGN="CENTER">
    1.) &nbsp; <input type="Text" name="a1" size="5">&nbsp;&nbsp;*&nbsp;&nbsp;
    <input type="Text" name="b1" size="5"> &nbsp;
    <input type="Button" value=" = " onClick=
    "document.g.c1.value = produkt (document.g.a1.value, document.g.b1.value)"> &nbsp;
    <!-- Beim vorstehenden Aufruf wird der Wert von document.g.a1 an/als x übergeben,
    document.g.b1 wird in der Funktion produkt als y angesehen und das am Ende der
    Funktion zurückgegebene Ergebnis wird als Wert in document.g.c1 geschrieben -->
    <input type="Text" name="c1" size="7"><br>
    2.) &nbsp; <input type="Text" name="a2" size="5">&nbsp;&nbsp;*&nbsp;&nbsp;
    <input type="Text" name="b2" size="5"> &nbsp;
    <input type="Button" value=" = " onClick=
    "document.g.c2.value = produkt (document.g.a2.value, document.g.b2.value)"> &nbsp;
    <input type="Text" name="c2" size="7"><br>
    3.) &nbsp; <input type="Text" name="a3" size="5">&nbsp;&nbsp;*&nbsp;&nbsp;
    <input type="Text" name="b3" size="5"> &nbsp;
    <input type="Button" value=" = " onClick=
    "document.g.c3.value = produkt (document.g.a3.value, document.g.b3.value)"> &nbsp;
    <input type="Text" name="c3" size="7"><br>
   </P>
  </form>

 </body>
</html>

zum Seitenanfang / zum Seitenende

H. Tic-Tac-Toe (Funktionen mit Parametern und Rückgabewert)

<html>
 <head>
  <title>H. Zeitvertreib füt zwei menschliche Spieler</title>
  <meta name="author" content="R. Krell (www.r-krell.de)">
  <SCRIPT language="JavaScript">
   <!--
   //-------------- H. Tic-Tac-Toe ---------------

    var zeichen="X" //globale Variable; wird aus beschrifte verändert

    function beschrifte (taste) //taste = Variable (Parameter) für ..
    {          //..bisherige Tastenbeschriftung
     if (taste == "   ") //nur wenn Taste noch unbeschriftet war
     {
      if (zeichen=="X")  //Abwechselnd X und O:
      {
       zeichen="O"; //vorher X, dann jetzt O
      }
      else      //sonst (vorher 0) wird das (globale)..
      {        //..Zeichen für den nächsten Knopf..
       zeichen="X"; //..zu X
      }
      return (" "+zeichen+" "); //Funktionswert: neues Zeichen wird..
     }         //..als neue Tastenbeschriftung übergeben
     else
     {
      return (taste); //Taste war nicht leer: Schrift bleibt
     }
    }

   //-->
  </SCRIPT>
 </head>

 <body>
  <h2>Tic-Tac-Toe</h2>
  Bei diesem Spiel drücken zwei Spieler abwechselnd auf die Tasten, um jeweils ein "X"
  oder ein "O" zu erzeugen. Ziel ist es, drei gleiche Zeichen in einer Zeile, einer
  Spalte oder einer Diagonalen zu erreichen. Das Programm zeigt (noch) nicht den Gewinn
  an -- hier bleibt noch ein Betätigungsfeld für Nachwuchsprogrammierer...

  <form name="h">
   <P ALIGN="CENTER">
    <input type="button" name="a1" value="   "
     onClick="document.h.a1.value = beschrifte(document.h.a1.value)"> &nbsp;
     <!-- Jeder Knopf übergeibt seine Beschriftung an die Funktion und erhält
     von dieser die neue Beschriftung (die evtl. auch die alte sein kann) -->
    <input type="button" name="b1" value="   "
     onClick="document.h.b1.value = beschrifte(document.h.b1.value)"> &nbsp;
    <input type="button" name="c1" value="   "
     onClick="document.h.c1.value = beschrifte(document.h.c1.value)"> <br><br>

    <input type="button" name="a2" value="   "
     onClick="document.h.a2.value = beschrifte(document.h.a2.value)"> &nbsp;
    <input type="button" name="b2" value="   "
     onClick="document.h.b2.value = beschrifte(document.h.b2.value)"> &nbsp;
    <input type="button" name="c2" value="   "
     onClick="document.h.c2.value = beschrifte(document.h.c2.value)"> <br> <br>

    <input type="button" name="a3" value="   "
     onClick="document.h.a3.value = beschrifte(document.h.a3.value)"> &nbsp;
    <input type="button" name="b3" value="   "
     onClick="document.h.b3.value = beschrifte(document.h.b3.value)"> &nbsp;
    <input type="button" name="c3" value="   "
     onClick="document.h.c3.value = beschrifte(document.h.c3.value)">
   </P>
  </form>
 </body>
</html>



zurück zur Informatik-Hauptseite

zum Anfang dieser Seite
Willkommen/Übersicht  -  Was ist neu?  -  Software  -  Mathematik  -  Physik  -  Informatik  -    Schule: Lessing-Gymnasium und -Berufskolleg  -  Fotovoltaik  -  & mehr  -  Kontakt: e-Mail,  News-Abo, Gästebuch, Impressum  -  Grußkarten, site map, Download und Suche

Diese Seite ist Teil des Webangebots http://www.r-krell.de. Sie können diese Seite per e-Mail weiter empfehlen (tell a friend).