Simon: Ein Problem mit Javascript

SELF-Forum

Ein Problem mit Javascript

Simon
– Informationen zu den Bewertungsregeln

Hallo zusammen :)

Ich hab ein Problem mit einer Übung zu Javascript:

"Erstellen Sie in JavaScript eine Funktion functiondialog mit folgendem Verhalten:
Wird functiondialog mit einem Paramenter f aufgerufen, der eine Funktion ist, dann wird ein HTML-Eingabefeld erzeugt, in das man Werte x eintippen kann, woraufhin der Wert f(x) in einem div-Feld angezeigt wird."

Ich weiss im Moment leider nichtmal, wie ich anfangen sollte...

Wenn wer Lust hat, daran etwas rumzutüfteln, würd ich mich sehr freuen :)

Gruß

Simon

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ein Problem mit Javascript

    Steel
    – Informationen zu den Bewertungsregeln

    Hi!

    Hier wird dir aber wahrscheinlich niemand deine Haus-/Klausuraufgaben erledigen.

    Aber die Aufgabenstellung ist doch klar definiert. Du sollst eine Javascriptfunktion schreiben, die eine (mathematische) Funktion entgegennimmt und nach X fragt.

    Was ist also dein Problem?

    --
    Vergesst Chuck Norris.
    Sponge Bob kann unter Wasser grillen!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ein Problem mit Javascript

      Simon
      – Informationen zu den Bewertungsregeln

      Hi Steel,

      Ich glaub ich hab das blöd formuliert ;)

      Ich erwarte nich, dass das jemand für mich erledigt. Ich will das schon selbst lösen. Allerdings tu ich mich immer recht schwer damit nen Anfang zu finden. Ich dachte es könnte mir vielleicht wer nen Tip geben.

      Danke für die Antwort im übrigen :)

      Gruß

      Simon

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Ein Problem mit Javascript

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber Simon,

        Allerdings tu ich mich immer recht schwer damit nen Anfang zu finden.

        dann schreibe doch das, was auch molily bereits angeregt hat: Poste hier Deine Funktion, die einen Parameter entgegennimmt.

        Ich dachte es könnte mir vielleicht wer nen Tip geben.

        Wir geben Tipps, wenn wir sehen, wo's mit dem Verständnis hakt. Bei Dir kann man das deswegen nicht sehen (und deshalb auch keine Tipps geben), weil Du nichts vorführst, was ein (Teil-)Verständnis deinerseits zeigen könnte.

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Ein Problem mit Javascript

        Cheatah
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich erwarte nich, dass das jemand für mich erledigt. Ich will das schon selbst lösen.

        das freut mich!

        Allerdings tu ich mich immer recht schwer damit nen Anfang zu finden.

        Immer ein guter Anfang: [# 255]

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Ein Problem mit Javascript

    molily
    – Informationen zu den Bewertungsregeln

    "Erstellen Sie in JavaScript eine Funktion functiondialog mit folgendem Verhalten:
    Wird functiondialog mit einem Paramenter f aufgerufen, der eine Funktion ist, dann wird ein HTML-Eingabefeld erzeugt, in das man Werte x eintippen kann, woraufhin der Wert f(x) in einem div-Feld angezeigt wird."

    Du wirst ja wohl irgendeinen Ansatz haben? Zerlege die Aufgabe in Schritte und fange damit an, was du schon kannst. Davon ausgehend können wir dir weitere Tipps geben.

    Weißt du, wie du Funktionen definierst, die Parameter entgegennehmen, und sie aufrufst?
    Weißt du, wie du HTML-Elemente erzeugst, es einhängst und mit einem Event-Handler versiehst? Oder alternativ ein Dialogfeld erzeugst, um Werte abzufragen?
    Weißt du, wie du eine Funktion aufrufst und den Rückgabewert auffängst?
    Weißt du, wie du den Inhalt eines div-Elements schreibst?

    Mathias

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ein Problem mit Javascript

      Simon
      – Informationen zu den Bewertungsregeln

      Hallo Mathias.

      Ich hab hier mal den code, den ich bisher erstellt habe. Ich frage mich im Moment, warum weder das Eingabefeld, noch der "Los"-Button erzeugt werden...

      Dank dir für die Hilfe.

      Gruß

      Simon

      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Übung 5 - Javascript</title>
      <script type="text/javascript">
      function functiondialog(f){

      <!-- hier müsste ich ja noch überprüfen ob f auch eine funktion ist. -->
      document.getElementById("input").write("<form><input type="text" name="eingabe"><input type="button" name="Los" onclick="quadrat(this.form.eingabe.value)"></form>");

      }
      function quadrat(x){
      ergebnis = x * x;
      return ergebnis;
      }
      </script>
      </head>

      <body>
      <h1>Javascript</h1>

      <script type="text/javascript">
      functiondialog();
      </script>

      <div id="input">
      <!-- Hier möchte ich das Eingabefeld erzeugen -->
      </div>

      <div id="output">
      <!-- Hier soll nachher das Ergebnis stehen -->
      </div>

      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Ein Problem mit Javascript

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich frage mich im Moment, warum weder das Eingabefeld, noch der "Los"-Button erzeugt werden...

        Weil das hier:

        document.getElementById("input").write("<form><input type="text" name="eingabe"><input type="button" name="Los" onclick="quadrat(this.form.eingabe.value)"></form>");

        eine Phantasie-Syntax ist, die du dir wohl selber ausgedacht hast.

        Vielleicht hast du an document.write gedacht? Das wäre für das Vorhaben aber eher ungünstig.
        Das Formular über innerHTML ins Div-Element zu schreiben, wäre erfolgversprechender.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Ein Problem mit Javascript

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Simon:

        nuqneH

        <script type="text/javascript">
        function functiondialog(f){

        <!-- hier müsste ich ja noch überprüfen ob f auch eine funktion ist. -->

        HTML-Kommentare haben in JavaScript-Code nichts zu suchen. <http://de.selfhtml.org/javascript/sprache/regeln.htm#kommentare@title=Wie man in JavaScript kommentiert>

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. Ein Problem mit Javascript

        molily
        +1 Informationen zu den Bewertungsregeln

        Das sieht doch schon sehr gut für den Anfang aus.

        function functiondialog(f){

        <!-- hier müsste ich ja noch überprüfen ob f auch eine funktion ist. -->

        Das geht so:
        if (typeof f == 'function') { ... }

        siehe
        http://de.selfhtml.org/javascript/sprache/operatoren.htm#typeof
        http://aktuell.de.selfhtml.org/artikel/javascript/objektabfragen/#typeof

        document.getElementById("input").write("<form><input type="text" name="eingabe"><input type="button" name="Los" onclick="quadrat(this.form.eingabe.value)"></form>");

        Das ist schon richtig gedacht, allerdings gibt es keine write-Methode auf normalen Elementen.
        Was du suchst ist die http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML-Eigenschaft.

        Ferner musst du aufpassen, wenn du HTML-Code in JavaScript-Strings unterbringst. Mit "..." oder '...' begrenzt du JavaScript-Strings. Diese Begrenzer kannst du nicht gleichzeitig im String als HTML-Attribut-Begrenzer verwenden - denn damit schließt du den JS-String ja.

        Du musst also entweder " als String-Begrenzer und ' als Attribut-Begrenzer verwenden
        "<input type='text'>"
        oder umgekehrt:
        '<input type="text">'

        Wenn du
        onclick="quadrat(this.form.eingabe.value)"
        schreibst, so wird nicht die Funktion verwendet, die du an functiondialog übergeben hast, sondern immer quadrat. Das ist im Beispiel egal, aber die Aufgabenstellung erfordert ja, dass die Funktion variabel ist.

        Außerdem ruft dieser Code nur quadrat auf. Du willst das Ergebnis aber noch ausgeben, indem du es in das output-Element schreibst.

        Mit innerHTML alleine kannst du das Problem nicht lösen. Um die übergebene Funktion auszuführen, müsstest du schon einen Event-Handler per JavaScript registrieren. Als Handler erzeugst du eine verschachtelte Funktion. Darin hast du Zugriff auf die übergebene Funktion f und kannst sie aufrufen:

        function functiondialog (f){  
  
  // Erzeuge Formular  
  // Der Button hat eine ID bekommen, zum einfachen Ansprechen mit getElementById  
  document.getElementById("input").innerHTML = '<form><input type="text" name="eingabe"><input type="button" id="berechne" value="Los"></form>';  
  
  // Erzeuge Event-Handler-Funktion  
  function handler () {  
    // Lese Eingabe in Variable  
    var eingabe = this.form.eingabe.value;  
    // Rufe f auf, übergebe die Eingabe  
    var ergebnis = f(eingabe);  
    // Gebe das Ergebnis im output-Element aus  
    document.getElementById('output').innerHTML = ergebnis;  
  }  
  
  // Registriere Event-Handler am Button  
  document.getElementById('berechne').onclick = handler;  
}

        (ungetestet - soll nur das Konzept veranschaulichen)

        function quadrat(x){
        ergebnis = x * x;

        Dies sollte eine <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=lokale Variable> sein, also nicht das »var« davor vergessen.

        return ergebnis;
        }

        <script type="text/javascript">
        functiondialog();
        </script>

        Hier vergisst du die Funktion quadrat zu übergeben.

        Mathias

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

      4. Ein Problem mit Javascript

        Don P
        – Informationen zu den Bewertungsregeln

        Hallo,

        Ich hab hier mal den code, den ich bisher erstellt habe.

        Ok. Mit dem Code willst du anscheinend ehr machen, als verlangt wird. Es wird eine JavaScript Funktion verlangt, von einem Formular z.B. ist nicht die Rede, streng genommen nicht mal von einem kompletten HTML-Dokument.

        Gehen wir's mal schrittweise durch:

        "Erstellen Sie in JavaScript eine Funktion functiondialog

        Das ist einfach, hast du ja schon hinbekommen:

        function functiondialog(){}

        mit folgendem Verhalten:
        Wird functiondialog mit einem Paramenter f aufgerufen, der eine Funktion ist,

        Auch das Entgegennehmen eines Parameters f hast du schon:

        function functiondialog(f) {
          // hier musst du erst mal [ref:self812;javascript/sprache/operatoren.htm#typeof@title=überprüfen], ob f auch eine Funktion ist:
         if(typeof f === 'function') {}
        }

          

> dann wird ein HTML-Eingabefeld erzeugt, in das man Werte x eintippen kann,  
  
Das muss also innerhalb des if-Blocks geschehen. Zum Erzeugen eines HTML-Eingabefelds gibt es allerdings mehrere Möglichkeiten. Eine davon ist, wie du im Prinzip richtig erkannt hast, zunächst mal eine Zeichenkette zu bauen, die entsprechendes HTML enthält:  
  
~~~javascript
function functiondialog(f) {  
  
 if(typeof f === 'function') {  
  
   var htmlString = '<input type="text" value=""></input>';  
 }  
}

        Jetzt muss aber diese Zeichenkette noch ins HTML-Dokument eingebaut werden.
        Im HTML-Dokument (document) liegt u.a. ein Element body mit seinem Inhalt, und dessen Eigenschaft namens innerHTML kann man so eine Zeichenkette zuweisen:

        function functiondialog(f) {  
  
 if(typeof f === 'function') {  
  
   var htmlString = '<input type="text"></input>';  
   document.body.innerHTML = htmlString;  
 }  
}

        Damit ist das Eingabefeld im Dokument verfügbar, und man kann sogar etwas eingeben.

        woraufhin der Wert f(x) in einem div-Feld angezeigt wird."

        Das ist jetzt nicht mehr ganz trivial: Nach der Eingabe soll auch noch etwas geschehen mit dem eingegebenen Wert.

        Dazu muss man erst mal feststellen, ob bzw. wann überhaupt etwas eingegeben wurde. Ist das der Fall nach jedem Tastendruck? Oder erst wenn man irgendwo ausßerhalb vom Eingabefeld klickt? Oder erst wenn man einen Button klickt? Es steht z.B. nichts von einem Formular oder Button in der Aufgabenstellung, daher würde ich beides weglassen die Eingabe für abgeschlossen halten, nachdem das Eingabefeld verlassen bzw. geändert wurde (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange) ...

        Gruß, Don P

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Ein Problem mit Javascript

          Don P
          – Informationen zu den Bewertungsregeln

          Hallo,

          function functiondialog(f) {

          if(typeof f === 'function') {

          var htmlString = '<input type="text"></input>';
             document.body.innerHTML = htmlString;
          }
          }

          
>   
> Damit ist das Eingabefeld im Dokument verfügbar, und man kann sogar etwas eingeben.  
  
Dieses Vorgehen hat u.a. den Nachteil, dass man das Eingabefeld nach dem Erzeugen nicht mehr einfach ansprechen kann. Es liegt jetzt halt im DOM-Baum und man müsste es mit DOM-Methoden erst wieder dort raussuchen, um z.B. noch eine Eventhandlerfunktion für <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange> dranhängen zu können.  
  
Daher empfiehlt es sich hier, das Eingabeelement mit <http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement> zu erzeugen, und ihm erst alles nötige Verhalten beizubringen, bevor man es schließlich im DOM-Baum verankert:  
  
~~~javascript
function functiondialog(f) {  
  
  if(typeof f === 'function') {  
  
    // Eingabeelement erzeugen:  
    var inputElement = document.createElement('input');  
    inputElement.type = 'text';  
  
    // Eventhandlerfunktion bauen und gleich zuweisen:  
    inputElement.onchange = function() {  
  
       // Ergebnis-Div finden:  
       var outputElement = document.getElementById('Ergebnis');  
       // Ergebnis berechnen und im Ergbenis-Div anzeigen:  
       outputElement.innerHTML = f(this.value);  
    }  
  
    // fertiges Eingabefeld im DOM-Baum einsetzen:  
    document.body.appendChild(inputElement);  
  }  
}

          (ungetestet)

          Dazu muss man wissen, dass innerhalb einer Eventhandlerfunktion die Variable this auf das DOM-Element verweist, das den Event ausgelöst hat, in unserem Fall also genau auf das Eigabeelement, so dass man leicht auf den eingegebenen Wert zugreifen kann, ohne das Eingabefeld erst wieder mit getElementById oder so aus dem DOM-Baum klauben zu müssen.

          Gruß, Don P

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Ein Problem mit Javascript

          Der Martin
          – Informationen zu den Bewertungsregeln

          Hi,

          dein schönes Tutorial in allen Ehren - aber wir wollen doch auch mit Javascript korrektes HTML erzeugen.

          var htmlString = '<input type="text" value=""></input>';

          Und wir wissen, dass input ein leeres Element ist, das in HTML kein Endtag hat, bzw. in XHTML um der Kompatibilität willen mit der Kurzschreibweise "/>" geschlossen wird.

          Keep up the good work,*
           Martin

          [*] Sagte AFAIR Robbie Williams in einem Werbespot.

          --
          Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.
          Heißes Wasser kann man immer gebrauchen.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Ein Problem mit Javascript

            Don P
            – Informationen zu den Bewertungsregeln

            Hallo,

            Und wir wissen, dass input ein leeres Element ist, das in HTML kein Endtag hat, bzw. in XHTML um der Kompatibilität willen mit der Kurzschreibweise "/>" geschlossen wird.

            Da hast du wohl recht. <input type="text"> reicht für HTML, und <input type="text" /> für XHTML. War mir nicht mehr sicher und zu faul zum danach suchen ;), jetzt hab' ich aber doch nachgeschaut.

            Gruß, Don P

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln