Eingabe von Variablen, verarbeitun durch funktion und ausgabe

[mase]

Hallo liebe Community,

ich bin auf folgendes Beispiel gestoßen:

http://de.selfhtml.org/javascript/sprache/funktionen.htm
Funktion mit Rückgabewert und solche Funktion aufrufen!

Diese Beispiel möchte ich nutzen für meine HP mit der Änderung,
einer anderen Formel und einer weiteren Variablen.

Teile aus diesem Beispiel verstehe ich nicht.
Ich dene das spiegelt sich bei meinem Vesuch wieder.
Die Probleme in meinem Versuch zu lösen wird mir helfen,
das Bispiel zu verstehn.

hier der Auszug von meinem versuch:

Der Teil ist im Head
-----------------------------------
<script type="text/javascript">  // Hier wird teil für Javascript eingeteilt
function Grundumsatz() {    // Name der Funktion
                            // Frage für was stehn die klammern
                            // welche folgen hat es wenn ich was in
                            // die klam mern reinschreibe
var Ergebnis = 66.5 + 13.7* M + 5 * L - 6.8 * T; // Meine Funktion
}
</script>
----------------------------------

Der Teil istim Body
----------------------------------
<form name="BruttoForm" action=""> // versteh ich nicht

Eingabe Gewicht in kg: <input type="text" name="M"><br> // klar
Eingabe Länge in cm: <input type="text" name="L"><br>  //klar
Eingabe Jahre in cm: <input type="text" name="T"><br> // klar
<p>Kommabetrag mit Punkt eingeben!</p>
<input type="button" value="Grundumsatz"
onclick="Grundumsatz(document.BruttoForm.M.value,document.BruttoForm.L.value,document.BruttoForm.T.value)"> // hier wird funktion aufgerufen
                               // Welche Bedeutung hat der Klammernausdruck
<br>
Ergebnis:    <input type="text" name="Ergebnis"> // Hier ausgabe ergebnis
</form>
---------------------------------

Hier müssen fehler drin sein er funzt nicht.
ich kriege keine ausgabe, aber hab auch keine ahnung wo der
fehler liegt

über hilfe würde ich mich sehr freuen.
ich habe meine frustrationsgrenze überschritten und kau schon langsam
am tisch rum ... es kotzt mich an das ich nicht selber draufkomme
aber jetzt reichts mir

[Der Martin]

Hallo,

ich bin auf folgendes Beispiel gestoßen:
http://de.selfhtml.org/javascript/sprache/funktionen.htm

eigentlich soll das eher eine Erklärung des Prinzips von Funktionen sein; wirklich gut verständlich ist sie aber meiner Ansicht nach nicht. Wichtig ist dieser Abschnitt:

Unmittelbar hinter dem Funktionsnamen folgt eine öffnende Klammer. Wenn die Funktion keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine schließende Klammer. Wenn die Funktion Parameter übergeben bekommen soll, notieren Sie innerhalb der Klammer die Namen der Parameter. Die Namen der Parameter sind frei wählbar. Bei den Parameternamen gelten die gleichen Regeln wie beim Funktionsnamen. Mehrere Parameter werden durch Kommata voneinander getrennt.

Damit erklärt sich eigentlich schon ein Teil deiner Fragen. Also: Die Klammern sind dazu da, dass man die Parameter reinschreibt, mit denen die Funktion arbeiten soll. Wenn sie keine Parameter braucht (also ohne Daten "von außerhalb" arbeitet), bleibt die Klammer halt leer.

<script type="text/javascript">  // Hier wird teil für Javascript eingeteilt
function Grundumsatz() {    // Name der Funktion
                            // Frage für was stehn die klammern
                            // welche folgen hat es wenn ich was in
                            // die klam mern reinschreibe

Siehe Erklärung oben: Du willst deiner Funktion drei Parameter übergeben. Also schreibe die Platzhalter für diese drei Parameter in die Klammern:

function Grundumsatz(M, L, T)

var Ergebnis = 66.5 + 13.7* M + 5 * L - 6.8 * T; // Meine Funktion

Die Variablen M, L und T existieren in deinem Originalcode weder als Funktionsparameter (auch Argumente genannt), noch als lokal angelegte Variablen. Also versucht Javascript hier auf globale Variablen mit den Namen M, L und T zuzugreifen. Die existieren aber auch nicht, daher produziert diese Zeile eine Fehlermeldung. In der Fehlerkonsole solltest du etwas in der Art wie 'M is undefined' oder so finden.
Außerdem gibt deine Funktion keinen Wert zurück. Du berechnest zwar einen Wert und nennst ihn Ergebnis, verwendest ihn aber nicht weiter.

<form name="BruttoForm" action=""> // versteh ich nicht

Dann lies nochmal nach, wie Formulare definiert werden und wie sie funktionieren.

Eingabe Gewicht in kg: <input type="text" name="M"><br> // klar
Eingabe Länge in cm: <input type="text" name="L"><br>  //klar
Eingabe Jahre in cm: <input type="text" name="T"><br> // klar
<p>Kommabetrag mit Punkt eingeben!</p>
<input type="button" value="Grundumsatz" onclick="Grundumsatz(document.BruttoForm.M.value,document.BruttoForm.L.value,document.BruttoForm.T.value)"> // hier wird funktion aufgerufen
                               // Welche Bedeutung hat der Klammernausdruck

Richtig, hier wird die Funktion aufgerufen. Und für die Platzhalter M, L und T, die wir inzwischen in der Funktions-Deklaration ergänzt haben, werden die Werte der entsprechend benamsten Formularfelder übergeben.
Mit dem Funktionsergebnis (du hast doch inzwischen eine return-Anweisung in der Funktion ergänzt?) tust du aber auch nichts. Du lässt dir sozusagen ein Glas Sekt geben, greifst aber nicht danach.
Du möchtest dein Funktionsergebnis doch noch der value-Eigenschaft des letzten noch verbleibenden Formularfelds zuweisen. Diesem da:

über hilfe würde ich mich sehr freuen.

Ich hoffe, das hilft dir schon mal ein Stück weiter.

So long,
 Martin

[molily]

Hallo,

allgemein solltest du dein Programm in drei Stufen aufbauen:

1. Eingabe
2. Verarbeitung
3. Ausgabe

Eingabe und Ausgabe erfolgen über Formularfelder. Eingabe: Du liest den Wert aus den Feldern in eine JavaScript-Variable ein. Verarbeitung: Aus den Eingabe-Werten wird ein Ergebnis berechnet. Ausgabe: Du schreibst das Ergebnis wieder in ein Formularfeld.

Beispiel Eingabe (lese die Eingaben in Variablen ein):

var M = document.BruttoForm.M.value;  
var L = document.BruttoForm.L.value;  
var T = document.BruttoForm.T.value;

Beispiel Verarbeitung (dein Code):
var Ergebnis = 66.5 + 13.7* M + 5 * L - 6.8 * T;

Beispiel Ausgabe:
document.BruttoForm.Ergebnis.value = Ergebnis;

Nun zu Funktionen. Funktionen in JavaScript kannst du dir wie mathematische Funktionen vorstellen. In der Mathematik notiert man bspw. f(x), sprich: f von x. x ist hier der Eingabewert, in Programmiersprachen Funktionsparameter genannt. Mithilfe dessen berechnet die Funktion ein Ergebnis, in Programmiersprachen Rückgabewert genannt. Einfaches Beispiel:

function quadrat (x) {  
  return x * x;  
}  
alert( quadrat(2) );

Diese Funktion erwartet einen Parameter, der wird innerhalb der Funktion mit dem Variablennamen x angesprochen. Die Funktion berechnet damit einen neuen Wert (nämlich x * x) und gibt diesen Wert als Ergebnis zurück. Dieser wird dann mit alert() ausgegeben. Wir könnten natürlich auch anderes mit dem Ergebnis anstellen.

Das zwischen den runden Klammern nennt sich Liste der formalen Parameter. Wenn die Funktion nur einen Parameter erwartet, steht da nur ein Variablenname, ansonsten kannst du da mehrere auflisten im Falle von Berechnungen, die mit mehreren Variablen arbeiten:

function Grundumsatz (M, L, T) {  
  return 66.5 + 13.7 * M + 5 * L - 6.8 * T;  
}  
alert( Grundumsatz(75, 180, 30) );

Hier werden drei Werte übergeben und dementsprechend stehen drei Namen in der Parameterliste - die Funktion nimmt also drei Parameter entgegen. (Strenggenommen kann man einer Funktion in JavaScript auch mehr oder weniger Parameter übergeben, als deklariert sind, aber das ist hier nicht von Belang.)

Eigentlich musst du dir nicht die Mühe machen, und so stark mit Parametern und Rückgabewerten arbeiten. Eine Funktion muss weder das eine noch das andere haben. Ich würde einfach eine Funktion schreiben, die Eingabe, Verarbeitung und Ausgabe kombiniert:

function berechneGrundumsatz () {  
   // Eingabe  
   var M = document.BruttoForm.M.value;  
   var L = document.BruttoForm.L.value;  
   var T = document.BruttoForm.T.value;  
  
   // Verarbeitung  
   var Ergebnis = 66.5 + 13.7* M + 5 * L - 6.8 * T;  
  
   // Ausgabe  
   document.BruttoForm.Ergebnis.value = Ergebnis;  
}

Und diese dann beim Klick auf den Button (ohne Parameter) aufrufen:

<input type="button" onclick="berechneGrundumsatz()">

Das Einlesen steht in deinem Code im onclick-Attribut und die Werte werden übergeben - das geht natürlich auch, aber das finde ich nicht übersichtlicher.

Den Verarbeitungsteil könntest du in eine zweite Funktion auslagern, die wie die obige aussieht: function Grundumsatz (M, L, T) { return ...; }. Dann sähe der mittlere Teil so aus:

var Ergebnis = Grundumsatz(M, L, T);

Das illustriert natürlich besser Funktionen mit Parametern und Rückgabewerten. Die umgebende Funktion »berechneGrundumsatz« hat in dem Fall weder Parameter noch Rückgabwerte, nur die Funktion, in die die Formel ausgelagert wurde.

Mathias