Tutorials von Thomas Frei-Herrmann

Tutorial Kleiner Rechner

• Tutorial PHP-Rechner von Tommy
   
• Tutorial Javascript-Rechner

Tutorial PHP-Rechner


Zunächst erstellt Ihr Euch ein ganz normales Formular mit Euren Formular-Werkzeugen. Ich gehe in diesem Tutorial davon aus, dass Ihr Euch bereits mit den Eigenschaften der Formular-Felder vertraut gemacht habt. Hier mal eine Ansicht von meinem Formular.

Im Fenster “Schaltfläche-Eigenschaften” nehmt Ihr die Einstellungen im Bild unten vor. Die Seite muss auf die Dateierweiterung .php gestellt sein und Euer Paket bei Eurem Provider muss natürlich die PHP-Skriptsprache beinhaltet haben.

> Bei “Aktion:” tragt Ihr die gleiche Seite auf der Ihr das Formular einbaut ein, hier index.php
> Bei “Methode:” wählt Ihr “Verschicken”, nämlich an die gleiche Seite, hier index.php
> Klickt auf das “+” Zeichen unten links und fügt ein verdecktes Feld mit dem Namen “action” und dem Wert “send” hinzu.

Nun fügt Ihr mein Skript in die HTML des Layouts ein. Hier wird das verdeckte Feld ‘action’ überprüft und nur gerechnet, wenn der Button “ausrechnen” auch geklickt wurde. Dieses verdeckte Feld also, durch das Senden des Formulars, den Wert ‘send’ auch hat.

> auf das Layout klicken > Fenster “Layout-Eigenschaften” > Skript ganz oben (keine Leerzeile lassen) “Beginn der Seite” einfügen

<?php

   if (isset($_POST['action']) && ($_POST['action']=='send')) {

      if ($_POST['Rechenart']=="plus")
      {
         $ergebnis = $_POST['zahl1']+$_POST['zahl2'];   
      }

      if ($_POST['Rechenart']=="minus")
      {
         $ergebnis = $_POST['zahl1']-$_POST['zahl2'];   
      }

      if ($_POST['Rechenart']=="mal")
      {
         $ergebnis = $_POST['zahl1']*$_POST['zahl2'];   
      }

      if ($_POST['Rechenart']=="geteilt")
      {
         if ($_POST['zahl1']==0 or $_POST['zahl2']==0)
         {
            $ergebnis = "durch 0 geteilt!";
         }else{
            $ergebnis = $_POST['zahl1']/$_POST['zahl2'];   
         }
      }

   }

?>

... hier ein Ansicht der Seiten-HTML, nachdem ich das Skript (oben) eingefügt habe. Hier werden die 4 Rechenarten errechnet.

Dabei haben die Felder in meinem Formular folgende Feld-Namen:

1. Eingabefeld “zahl1”
2. Eingabefeld “zahl2”
3. Alle Optionsschaltflächen haben den gleichen Gruppennamen “Rechenart”, jede Optionsschaltfläche hat dann als Wert entsprechend das  “plus”,  “minus”, “mal” und “geteilt”

Jetzt wollte ich noch unten in 2 Textfeldern anzeigen, welche Rechenart vorgenommen wurde sowie natürlich das Ergebnis. Dazu habe ich mir zwei weitere Skripte erstellt.

Im ersten Skript (unten) gucke ich mittels IF-Bedingungen welche Rechenart gewählt wurde. Ich gebe also zunächst die erste Eingabezahl an, dann die Rechenart und dann die zweite Eingabezahl.

> Textfeld aufziehen > mittels Doppelklick aktivieren > im Fenster “Text-Eigenschaften” oben auf mittleren Button “Textfeld” klicken
> auf Button “HTML” klicken > Skript unten einfügen.

für das Ergebnis habe ich folgendes Skript ebenso in die HTML eines Textfeldes eingefügt. Dabei habe ich mittels IF-Bedingung die Möglichkeit unterbunden etwas durch 0 zu teilen, da das eine unerlaubte Rechenart wäre und dies dann auch in rot dargestellt.

... wenn Ihr das mit deutscher Konvertierung anzeigen wollt (so wie ich hier), hier auf 2 Stellen gerundet, dann verwendet Ihr das Skript unten.

<?php
   if ($_POST['Rechenart']=="geteilt")
   {
      if ($_POST['zahl1']==0 or $_POST['zahl2']==0)
      {
         echo "<font color='#FF0000'>";
         echo htmlentities("$ergebnis",ENT_QUOTES);
         echo "</font>";
      }else{
         $Zahlanzeige = number_format($ergebnis, 2, ',', '.');
         echo htmlentities("$Zahlanzeige",ENT_QUOTES);
      }
   }
   if ($_POST['Rechenart']<>"geteilt")
   {
      $Zahlanzeige = number_format($ergebnis, 2, ',', '.');
      echo htmlentities("$Zahlanzeige",ENT_QUOTES);
   }
?>

Natürlich könnte man das Ergebnis und den Inhalt dieses Formulars genausogut auch als Mail versenden. Dann müsste man das Skript eben noch mit einem Mail-Befehl versehen, so ähnlich wie ich es hier bei diesem Formular beschreibe.

Ich wollte zusätzlich noch, dass die Zahlen der Eingabefelder erhalten bleiben und habe daher die POST-Variablen, also den Inhalt der Eingabefelder, mittels einem PHP - ECHO Befehl angezeigt. Diese Eingabefelder haben bei mir die Namen ‘zahl1’ und ‘zahl2’. Der Befehl sieht dann entsprechend so aus und gehört in das Feld “Text” (bzw. “value”) als Wert der Anzeige.

<?php echo htmlentities($_POST['zahl1'],ENT_QUOTES);?>

nach oben

Tutorial Javascript-Rechner


Bitte kopiert Euch dieses Javascript auf der Seite von kostenlose-javascripts.de oder hier unten (leicht modifiziert von mir).

<!-- präsentiert von kostenlose-javascripts.de -->
<script type='text/javascript'>
<!--
function Rechnermal() {
var Zahl1=window.document.R.Zahl1.value;
var Zahl2=window.document.R.Zahl2.value;
var Ergebnis=Zahl1*Zahl2;
window.document.R.Ergebnis.value=Ergebnis;
}
function Rechnerminus() {
var Zahl1=window.document.R.Zahl1.value;
var Zahl2=window.document.R.Zahl2.value;
var Ergebnis=Zahl1-Zahl2;
window.document.R.Ergebnis.value=Ergebnis;
}
function Rechnerplus() {
var Zahl1=parseFloat(window.document.R.Zahl1.value);
var Zahl2=parseFloat(window.document.R.Zahl2.value);
var Ergebnis;
Ergebnis=Zahl1+Zahl2;
window.document.R.Ergebnis.value=Ergebnis;
}
function Rechnerdurch() {
var Zahl1=window.document.R.Zahl1.value;
var Zahl2=window.document.R.Zahl2.value;
var Ergebnis=Zahl1/Zahl2;
window.document.R.Ergebnis.value=Ergebnis;
}
function Rechnerpotenz() {
var Zahl1=window.document.R.Zahl1.value;
var Zahl2=window.document.R.Zahl2.value;
var Ergebnis=Math.pow(Zahl1,Zahl2);
window.document.R.Ergebnis.value=Ergebnis;
}
function PI() {
window.document.R.Ergebnis.value=Math.PI;
}
function init2zr() {
document.write('<form name="R">');
document.write('Gib Zahl 1 ein :<br />');
document.write('<input type="Text" name="Zahl1" value="" size="50" tabindex="1" /><br />');
document.write('Gib Zahl 2 ein :<br />');
document.write('<input type="Text" name="Zahl2" value="" size="50" tabindex="2"><br /><br />');
document.write('<input type="Button" name="*" value="mal" onclick="Rechnermal()" tabindex="3" />');
document.write('<input type="Button" name="-" value="minus" onclick="Rechnerminus()" tabindex="4" />');
document.write('<input type="Button" name="+" value="plus" onclick="Rechnerplus()" tabindex="5" />');
document.write('<input type="Button" name="/" value="durch" onclick="Rechnerdurch()" tabindex="6" />');
document.write('<input type="Button" name="p" value="potenzieren" onclick="Rechnerpotenz()" tabindex="7" />');
document.write('<input type="Button" name="pi" value="PI" onclick="PI()" tabindex="8" />     ');
document.write('<input type="reset" value="RESET" tabindex="9" /><br /><br />');
document.write('<input type="Text" name="Ergebnis" value="Ergebnis" size="50" />');
document.write('</form>');
}
//-->
</script>
<br />
<!-- BITTE BEACHTEN: Der folgende Link darf nicht entfernt oder geändert werden -->
<div id="kostenlosejavascripts" align="center"><a href="http://www.internetanbieter.info/tarif-vergleich/" title="www.internetanbieter.info" target="_blank">www.internetanbieter.info</a></div>
<br />
<script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id=1060"></script>
<!-- präsentiert von kostenlose-javascripts.de -->

Auch hier habe ich mir wieder ein Textfeld aufgezogen und dieses Skript in die HTML des Textfeldes kopiert. Hier muss die Seite natürlich nicht auf die Dateierweiterung .php umgestellt sein.

> Textfeld aufziehen > mittels Doppelklick aktivieren > im Fenster “Text-Eigenschaften” oben auf mittleren Button “Textfeld” klicken
> auf Button “HTML” klicken > Skript oben einfügen.

nach oben

Viel Erfolg !