Übungsaufgaben zu Funktionen

Alle folgenden Aufgaben sind jeweils so zu lösen, dass sich die Funktionen im Header und die Aufrufe der Funktionen im Body der HTML-Seite befinden!
Ein paar Tipps:
  • Hinter dem Funktionsnamen steht kein Semicolon!
  • Das javascript-Tag darf weder beim Aufruf noch bei der Funktion vergessen werden!

1. Funktion (ohne Parameter und ohne Rückgabewert)

Schreiben Sie eine Funktion hello(), welche "Hello World" mit alert ausgibt und verwenden Sie diese in Ihrem Programm!
// Der folgende Aufruf soll dazu führen,
// dass "Hello World!" von der Funktion hello
// mit einem alert ausgegeben wird:
 
hello();
 

2. Funktion mit einem Parameter (und ohne Rückgabewert)

Schreiben Sie eine Funktion, welche eine beliebige Zeichenkette mit alert() ausgibt!
// In folgendem Beispiel würde z.B. die Funktion
// textausgabe die zeichenkette "muh" ausgeben
 
textausgabe( "muh" );
 

3. Funktion (ohne Parameter aber) mit Rückgabewert

3.1 Passwortprüfung

Schreiben Sie eine Funktion, welche eine Passwort-Eingabe abprüft und als Ergebnis true oder false zurück gibt!
  • Hinweis: Es ist hier keine wiederholte Eingabe gefordert. Einmal prüfen reicht!
  • Das richtige Passwort müssen Sie in einer Variable speichern, z.B. pw="7-%GhÄ0000000000";
  • Die Bedingung pw==eingabe liefert true oder false, je nachdem, ob mit einem prompt das richtige oder ein falsches Passwort eingelesen wurde.
  • Das Ergebnis der Prüfung kann direkt zurückgegeben werden, z.B. return( Bedingung );
// Der aufrufende Programmteil könnte z.B.
// wie folgt aussehen:
 
var passwordOK = pwpruefung();
if( passwordOK == true )
{
  alert("Passwort ok!");
}
else
{
  alert("Passwort taugt nichts!");
}
 

3.2 Datum

Schreiben Sie eine Funktion datum(), welche eine Zeichenkette mit dem aktuellem Datum zurück gibt!
Hinweise:
// Wie kommt man an das aktuelle Datum?
// z.B. so ...
var jetzt = new Date();
 
var Tag   = jetzt.getDate();
var Monat = jetzt.getMonth();
var Jahr  = jetzt.getFullYear();
 
var Std   = jetzt.getHours();
var Min   = jetzt.getMinutes();
var Sek   = jetzt.getSeconds();
 
var StdAusgabe = ((Std < 10) ? "0" + Std : Std);
var MinAusgabe = ((Min < 10) ? "0" + Min : Min);
var SekAusgabe = ((Sek < 10) ? "0" + Sek : Sek);
 
var ergebnis = Tag + "." + (Monat+1) + "." + Jahr + "  "
             + StdAusgabe + "." + MinAusgabe + "." + SekAusgabe + " Uhr";
alert( ergebnis );
 
Der Aufruf könnte wie folgt lauten:
// Datum abfragen
 
document.write( "Aktuelles Datum: " + datum() );

3.3 Zufallszahl

Schreiben Sie eine Funktion, welche als Ergebnis eine Zufallszahl zwischen 1 und 49 (inkl. 1 und 49) zurück gibt!
Hinweise:

4. Funktion mit einem Parameter und einem Rückgabewert

  1. Schreiben Sie eine Funktion, welche als Ergebnis das Quadrat der übergebenen Zahl zurück gibt!
  2. Schreiben Sie eine Funktion, welche einen einstelligen Hexwert ("0"-"F") in eine Zeichenkette mit dem entsprechenden 4-stelligen Binärcode wandelt und zurückgibt, z.B. "0101" für den Character "5".

5. Funktion mit zwei Parametern und einem Rückgabewert

  • Schreiben Sie eine Funktion, welche als Ergebnis eine Zufallszahl zwischen x und y (inkl. x und y) zurück gibt!
  • Schreiben Sie eine Funktion, welche die zwei Parameter X und Y addiert und als Ergebnis zurück gibt!

6. Ergänzung für die ganz Schnellen

  1. Rufen Sie in Ihrem Hauptprogramm alle Funktionen nacheinander auf und sorgen Sie dafür, dass das so entstandene Programm fehlerfrei abläuft!
  2. a) Überlegen Sie, wie Sie Funktionen in Ihren bisher geschriebenen Programmen sinnvoll zur besseren Strukturierung einsetzen können!
    b) Probieren Sie es aus!
...

7. Welche Ausgabe erzeugt das folgende Programm?

...
    function nRepeat( n, s )
    {
      for( var i=0; i<n; i++ )
      {
        document.write( s + " ");
      }
      document.write( "<br>" );
    }
 
    nRepeat( 2, "Halli" );
    nRepeat( 3, "Hallo" );
    nRepeat( 4, "Trari" );
    nRepeat( 3, "Trara" );
    nRepeat( 2, "Lalala" );
...
 

8. Übung zum richtigen Aufruf von Funktionen

Ergänzen Sie den vorliegenden Quelltext um den Aufruf der Funktionen mit den richtigen Übergabeparametern, so dass die richtigen Ausgaben auf dem Bildschirm erscheinen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
 
  <title>Reale Spannungsquelle</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
  <script type="text/javascript">
 
    function Strom( Ri, U0, RL )
    {
      return U0/(Ri+RL);
    }
 
    function Klemmsp( I, RL )
    {
      return I*RL;
    }
 
    function Leistung( I, UKl )
    {
      return I*UKl;
    }
 
  </script>
 
</head>
 
<body>
 
  <h1>Reale Spannungsquelle</h1>
  Berechnung verschiedener Größen
 
  <script type="text/javascript">
 
    var Innenwiderstand;
    var Leerlaufspannung;
    var Lastwiderstand;
    var eingabe;
 
    eingabe = prompt("Wie groß ist der Ri der Batterie?", "1");
    Innenwiderstand = parseFloat( eingabe );
 
    eingabe = prompt("Wie groß ist die U0 der Batterie?", "11");
    Leerlaufspannung = parseFloat( eingabe );
 
    eingabe = prompt("Wie groß ist der Lastwiderstand?", "10");
    Lastwiderstand = parseFloat( eingabe );
 
    /* Ergänzen Sie die folgenden Ausgaben
           um die korrekte Nutzung der Funktionen:
    document.write("Stromstärke: " + ... );
    document.write("Klemmspannung: " + ... );
    document.write("Leistung: " + ... );
    */
 
  </script>
 
</body>
 
</html>

9. Was passiert hier? Wer kann das erklären?

Download: Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
  <title>Tabelle</title>
  <meta http-equiv="Content-type" content="text/html;charset=iso-8859-1">
 
  <style type="text/css">
 
    body
    {
      font-family:    verdana, arial, helvetica, non-serif;
    }
 
    table, tr, td
    {
      border-width:   1px;
      border-style:   solid;
      border-color:   blue;
      padding:        2.5em;
      text-align:     justify;
    }
}
 
</style>
 
  <script type="text/javascript">
 
/* die Tabelle existiert im Body der Seite und die Werte
     werden in div-Tags eingefuegt */
function schreibeWerteInDIVs()
{
  var wert1 = 1;
  var wert2 = "lalala";
 
  document.getElementById( "data1" ).innerHTML = wert1;
  document.getElementById( "data2" ).innerHTML = wert2;
}
 
/* die Tabelle existiert nicht im Body, wird komplett
     von Javascript erzeugt und dann als eine Zeichenkette
     in ein div-Tag eingefuegt */
function schreibekompletteTabelleInEinemStueck()
{
  var wert1 = 1;
  var wert2 = "lalala";
 
  document.getElementById( "dynTab" ).innerHTML =
    "<table>"
   +   "<tr>"
   +     "<td>"
   +       wert1
   +     "</td>"
   +     "<td>"
   +       wert2
   +     "</td>"
   +   "</tr>"
   + "</table>";
}
 
  </script>
 
</head>
 
<body>
 
   <!-- dynamisch erzeugte Tabelle -->
   <h1>Tabelle 1 - dynamisch erzeugt</h1>
   <div id="dynTab"></div>
 
   <!-- Werte in vorhandene Tabelle einsetzen -->
   <h1>Tabelle 2 - Werte mit Script eingesetzt</h1>
   <table>
     <tr>
       <td>
         <div id="data1"></div>
       </td>
       <td>
         <div id="data2"></div>
       </td>
     </tr>
   </table>
 
 
<script type="text/javascript">
 
   schreibeWerteInDIVs();
   schreibekompletteTabelleInEinemStueck();
 
</script>
 
 
</body>
 
</html>