Beispiele zu Funktionen unter JavaScript

Ex1: Ein- und Ausgabe über JavaScript-Popups

Berechne die Quadratwurzel einer Zahl.
Eingabe: Zahl 

<html>
 
<head>
<title>JavaScript-Funktion1</title>
 
<script type="text/javascript">
 
 function wurzel(x){
  var y = Math.sqrt(x);
  y = Math.round(y*100)/100;
  return y;
 }
 
</script>
 
</head>
 
<body>
  <h1>Funktionsberechnung</h1>
  <hr>
  <script type="text/javascript">
    var x= prompt("Bitte Zahl eingeben","0");
    alert("Die Wurzel aus "+x+" lautet "+wurzel(x));
  </script>
 
</body>
 
</html>

Variante 2: Ein- und Ausgabe in HTML-Seite

Berechne die Quadratwurzel einer Zahl.
Eingabe: Zahl 

<html>
<head>
<title>JavaScript-Funktion2</title>
<meta name="author" content="lejos">
 
<script type="text/javascript">
 
 function wurzel(x){
  var y = Math.sqrt(x);
  y = Math.round(y*100)/100;
  return y;
 }
 
 function gibaus(ein) {
  document.getElementById("Ausgabefeld").innerHTML = wurzel(ein);
 }
 
</script>
 
</head>
 
<body onload="document.Form1.EingabeFeld.focus()">
 <h1>Funktionsberechnung</h1>
 <hr>
 
 <form name="Form1">
  Wurzel aus
  <input name="Eingabefeld" size="10"  onkeyup="gibaus(document.Form1.Eingabefeld.value);"></input>
  = <span id="Ausgabefeld"></span>
 </form>
 
</body>
 
</html>

Ex3: Zwei Ausgabefelder

Berechne Umfang und Radius eines Kreises
Eingabe: Radius 

<html>
 
<head>
  <title>JavaScript-Funktion3</title>
  <script type="text/javascript">
 
    function umfang(r){
     var u= 2*r*Math.PI;
     u=Math.round(u*100)/100;
     return u;
    }
 
    function inhalt(r){
     var A=r*r*Math.PI;
     A=Math.round(A*100)/100;
     return A;
    }
 
    function gibaus(ein){
      document.getElementById("Ausgabefeld1").innerHTML = umfang(ein);
      document.getElementById("Ausgabefeld2").innerHTML = inhalt(ein);
    }
 
  </script>
</head>
 
<body onload="document.Form1.Eingabefeld.focus()">
 <h1>Funktionsberechnung</h1>
 <hr>
 <form name="Form1">
   Eingabe:
   <input name="Eingabefeld" size="10" onkeyup="gibaus(this.value);" />
 </form>
 <table bgcolor="lightgrey" border="0">
  <tr><td>Umfang: </td><td id="Ausgabefeld1"> </td></tr>
  <tr><td>Fläche: </td><td id="Ausgabefeld2"> </td></tr>
 </table>
</body>
 
</html>

Ex4: Zwei Eingabefelder

Berechne das Volumen eines Drehzylinders
Eingabe: Radius, Höhe

Berechnung wird bei Button-Click ausgeführt. 

<html>
 
<head>
  <title>JavaScript-Funktion4</title>
  <script type="text/javascript">
    function volumen(r,h){
     var vol=r*r*Math.PI*h;
     vol=Math.round(vol*100)/100;
     return vol;
    }
    function gibaus(ein1,ein2){
      document.getElementById("Ausgabefeld").innerHTML = volumen(ein1,ein2);
    }
  </script>
</head>
 
<body onload="document.Form1.Eingabefeld1.focus()">
 <h1>Funktionsberechnung</h1>
 <hr>
 <form name="Form1">
   Radius:
   <input name="Eingabefeld1" size="10" />
   Höhe:
   <input name="Eingabefeld2" size="10" />
   <nbsp><nbsp>
   <input type="button" value="Berechne!" onclick="gibaus(document.Form1.Eingabefeld1.value,document.Form1.Eingabefeld2.value)">
 </form>
 <table border="0">
   <tr><td>Volumen: </td><td id="Ausgabefeld" bgcolor="lightgrey"> </td></tr>
 </table>
</body>
</html>

Berechnung wird bei Änderung in einem der beiden Eingabefelder ausgeführt. 

<html>
 
<head>
  <title>JavaScript-Funktion4a</title>
  <script type="text/javascript">
    function volumen(r,h){
     var vol=r*r*Math.PI*h;
     vol=Math.round(vol*100)/100;
     return vol;
    }
    function gibaus(ein1,ein2){
      document.getElementById("Ausgabefeld").innerHTML = volumen(ein1,ein2);
    }
  </script>
</head>
 
<body onload="document.Form1.Eingabefeld1.focus()">
 <h1>Funktionsberechnung</h1>
 <hr>
 <form name="Form1">
   Radius:
   <input name="Eingabefeld1" size="10" onkeyup="gibaus(document.Form1.Eingabefeld1.value,document.Form1.Eingabefeld2.value)"/>
   Höhe:
   <input name="Eingabefeld2" size="10" onkeyup="gibaus(document.Form1.Eingabefeld1.value,document.Form1.Eingabefeld2.value)"/>
 </form>
 <table border="0">
   <tr><td>Volumen: </td><td id="Ausgabefeld" bgcolor="lightgrey"> </td></tr>
 </table>
</body>
 
</html>