Javascript Anfängerfrage: Programmierung mit Datenübergabe unklar.

  • Wie schon gesagt: DVD Javascript (und auch ebook) ist durch und jetzt heißt es ein wenig ausprobieren. Leider habe ich überhaupt keinen Kontakt, den ich mal telefonisch fragen kann, wenn ich an Probleme gerate. Deswegen nun hier ein paar kleinere Fragen:


    Beim "Durchlernen" der DVD ist mir eigentlich klar geworden, dass man Javascript eigentlich wie eine Programmiersprache, wie z. B. Pascal, etc. verwenden könnte. Das Beispiel mit den Autos zur Beschleunigung auf der DVD hat mir da die Idee gegeben. Jetzt wollte ich also im Grunde genommen das "Auto" Video mit dem Formular Video ("Tierbeispiel") kombinieren. Also:
    - Abfrage der Daten über Formular (in HTML)

    - Übergabe der Daten in Javascript um Berechnen zu können

    - Ausgabe wieder

    - Eventuell dann auch eine Schleife programmieren mit den Themen Beschleunigung und Bremsen

    - etc.


    Als ich dann angefangen habe, bin ich schon am Anfang kläglich gescheitert.


    1. Frage: Ist die Annahme oben richtig (Verwendung wie eine Programmiersprache)?

    2. Frage: Ich hänge mal meinen "kläglichen" Code an:


    Ich kriege es einfach nicht hin, die "variablen" aus dem Formular in die Variablen von Javascript zu übergeben. Es wird zwar in der Befehlszeile angezeigt, dass übergeben wurde aber dann müßte ich das Ganze doch auch am Bildschirm ausgeben lassen können.

    Auf der anderen Seite habe ich das Ganze wie in der DVD mal mit onclick="ausgabe(); return false;" ausprobiert. Dann kommt zwar was auf dem Bildschirm, aber in der Befehlszeile erscheint nichts.


    Wie gesagt: Das "Progrämmchen" ist typisch vermutlich voller Anfängerfehler und ein Fortgeschrittener wird sich am Bildschirm einen Ablachen von meinem Problem.


    Trotzdem schon mal Danke.

  • Der Grund ist wahrscheinlich etwas unerwartet: Durch das Submit des Formulars wird das Formular abgeschickt, d. h. die unter "action" angegeben PHP-Seite wird aufgerufen und die Parameter werden übergeben. Ist "action" nicht definiert, wird einfach die aktuelle Seite aufgerufen bzw. neu geladen. Dabei geht alles, was Du mit Javascript definiert und in den Ausgabe-Container geschrieben hast, verloren.

    Um den Fehler zu beheben, musst Du die Default-Aktion des Submit, d. h. das Laden der Seite, unterdrücken. Das geschieht mit event.preventDefault():

  • Danke Sempervivum.


    Das kam wirklich unerwartet. Ich habe ca. 3 Stunden damit verbracht eine Lösung zu finden (Internetrecherche eingeschlossen) - und da kommt die Lösung nach 4 Minuten aus dem Forum! Das ist wirklich Klasse.


    Jetzt kommt natürlich die nächste Frage (Sorry für mein Laientum): Es geht um die Übergabe von Variablen von der Funktion heraus, um damit weiter arbeiten zu können.

    Hier mal der überarbeitete aktuelle Code:


    Ganz am Schluss will ich versuchen mit den Daten aus dem Formular dann zu arbeiten.

    Also später soll dann wie auf der DVD dann der Autobauer verändert werden können - halt mit Userabfrage über <form> etc. und nicht direkt im Programm wie auf der DVD.


    Das wollte ich beginnend mit den unteren Zeilen erreichen:

    Code
    1. <script>
    2. document.write ("Hallo Welt");
    3. var autobauer= document.getElementById("autohersteller").value;
    4. document.write (autobauer);
    5. </script>

    Wenn ich das richtig verstehe, muss ich die Variablen aus der Funktion herausholen und das vermutlich über die () Klammer. Hier steht dann schon der oben erwähnte event. Kann man das ohne Probleme mit den übergebenden Variablen erreichen?


    Kann ich eventuell hier jemanden aus dem Forum bitten; mir da auf die Sprünge zu helfen?

    Dieses Mal will ich vermeiden nochmal 3 Stunden mit Trial and Error zu verlieren und mit Nichts dann doch das Forum zu fragen.


    Vielen Dank

  • Zitat

    Ganz am Schluss will ich versuchen mit den Daten aus dem Formular dann zu arbeiten.

    Zitat

    Wenn ich das richtig verstehe, muss ich die Variablen aus der Funktion herausholen

    Aus der Funktion heraus holen geht nur über einen Rückgabewert oder globale Variablen. Ersteres geht nicht bei einem Eventhandler und letzteres würde ich nicht empfehlen.
    Statt dessen empfehle ich, die weitere Verarbeitung ebenfalls in der Funktion ausgabe() zu machen:

    Code
    1. function ausgabe (event)
    2. {
    3. event.preventDefault();
    4. var autoerzeuger = document.getElementById ('autohersteller').value;
    5. var farbevonauto = document.getElementById ('farbeauto').value;
    6. var maxgeschw = document.getElementById ('maxgeschwindigkeit').value;
    7. document.getElementById("anzeige").innerHTML = "Hersteller: " + autoerzeuger + "Farbe: " + farbevonauto + " maximale Geschwindigkeit: " + maxgeschw;
    8. // hier die weitere Verarbeitung
    9. }

    Außerdem empfehle ich, auf document.write() zu verzichten. Das Verhalten ist u. U. schwer einzuschätzen. Besser die Daten mit innerHTML in einen Container eintragen.

  • Hallo beisammen und auch Sempervivum (schon jetzt ein Dank für Deine Mühe),


    bin heute mal wieder am Rechner und habe nochmal versucht alles irgendwie zusammen zu bringen. Es hat nicht sollen sein.


    Daher werde ich mich mal als totalen Trottel outen und meinen hilflosen Versuch hier posten. Die Grundlagen des ganzen Versuches ist von der Javascript DVD herunter. Erst wurde da das Formular erstellt (mit Tieren); danach wurde mit Autos gezeigt wie das Objektorientierte Programmieren funktioniert.

    Grundsätzlich habe ich die Vorgehensweise verstanden; - es hapert halt doch an der Umsetzung beides zusammen zu bringen.


    Ich weiß, dass der Code voller Fehler ist, aber ich will hier keinen Schönheitspreis gewinnen.


    Zuerst mein Ergebnis im Chrome Browser:

    Autobeispiel-Javascript.GIF

    Die Idee ist:

    Eingabe der Werte (Hersteller, Farbe , max. Geschwindigkeit) und Ausgabe am Bildschirm (siehe auch oben Kommentare).

    Allerdings möchte ich dann mit den Werten weiter arbeiten. Dazwischen will ich dann, auch über Formular die Beschleunigung oder das Bremsen abfragen. So weit bin ich noch nicht mal gekommen; - deswegen habe ich auch nur die Daten fix im Programm gelassen.



    Hier der Quellcode:

    Den Hinweis mit event (siehe Kommentare von Sempervivum) habe ich hier zwar hoch und runter ausprobiert, bin aber bei der Übergabe nicht weiter gekommen.


    Noch eine Bitte:

    Das "document.write" bitte ich mir als Anfänger abzusehen. Ich will es eigentlich nur zur Kontrollausgabe verwenden. Der Hinweis von Sempervivum ist sicherlich berechtigt und würde auf jeden Fall mit innerHTML umgesetzt, wenn die Programmierung grundsätzlich stehen würde.


    Ich hoffe, dass ich mein Problem klar erläutert habe. Nach 4 Stunden am Bildschirm mit immer dem gleichen "Sch..." wird man ganz gagaga.


    Danke schon mal im Voraus.

  • Hey,


    ich kenne mich mit js nicht so gut aus aber mit php.


    Aber schau mal hier:


    du gibst der function Auto 3 Parameter mit. Und die variablen die in einer function erstellt werden sind nur in dieser Function auch anwendbar. Wenn du die selben Werte auch in einer anderen Function brauchst musst du diese wieder als Parameter hinzufügen oder eine globale Variable erstellen, was ich definitiv nicht raten würde zu verwenden. Denn diese sind sehr böse und können unerklärliche Fehler auslösen.


    Und woher bekommt nun this.beschleunigen_um und this.bremsen_um ihre Werte her?

    Oder ist das in Javascript anders ? Ich denke nicht aber wenn es das ist, entschuldige ich mich für den Post. :)


  • Zitat

    Und die variablen die in einer function erstellt werden sind nur in dieser Function auch anwendbar.

    olkostbe benutzt hier die Funktion Auto() um ein Objekt anzulegen. In dem Fall gilt dies nicht uneingeschränkt. Man probiere dies:

    Code
    1. function Auto() {
    2. var a = "a";
    3. b = "b";
    4. this.c = "c";
    5. }
    6. var dasauto = new Auto();
    7. if (typeof a == 'undefined') console.log("a is undefined");
    8. console.log(b);
    9. console.log(dasauto.c);
    10. if (typeof c == 'undefined') console.log("c is undefined");
  • Noch ein Hinweis an dich, clkostbe: Auf diese Weise:

    hebelst Du eine Haupteigenschaft der OOP, nämlich die Datenkapselung aus, weil die Funktion beschleunigen_um global ist. Besser so:

  • Dieses Javascript:

    wird sofort beim Laden der Seite aufgerufen. Zu dem Zeitpunkt sind alle Eingabefelder noch leer. Um eine Aktion auszulösen, wenn in einem Eingabefeld etwas eingegeben wird, kommst Du um Eventhandler nicht herum.


    Und dieses:

    Code
    1. document.getElementById ("autohersteller").innerHTML.value

    kann nicht funktionieren; entweder value (bei Eingabefeldern) oder innerHTML (z. B. bei span oder div).


    Ich habe mal dieses ausgearbeitet:

    Damit kannst Du ja mal versuchen, zu beschleunigen und zu bremsen.

  • Hallo Sempervivum,


    war heute mal nicht so fleißig. Danke für Deine Antwort. Bitte gib mir ein wenig Zeit um das obige zu verdauen und richtig durch zu gehen.

    Trotzdem schon jetzt ein großes Dankeschön.


    Melde mich dann, wenn alles verdaut ist.