Funktion unverständlich

[mikethet]

Hallo, ich bins nochmal:

Will bei einem Tastendruck also onkeydown den Tastencode ermitteln und in später in einem Text_Feld ausgeben. Also z.B.: Pfeiltaste drücken : Tastencode 37.

Hierzu mein Code:

function init(){ //Wird beim vollständigen Laden des Body-Tags aufgerufen
document.onkeydown = keylistener;
var keydata = document.getElementById("TastenCode").innerHTML;
keydata = keylistener;
}
Dazu die Funktion keylistener:
function keylistener(e){
  switch(e.keyCode){
  case 37:
  moveleft(5);
  break;
  case 38:
  moveup(5);
  break;
  case 39:
  moveright(5);
  break;
  case 40:
  movedown(5);
  break;
  default:
  alert("Bitte Pfeiltasten verwenden!");
  var key = e.keyCode;
  return key;
  }

Habe das Beispiel aus einem Buch, nur das er if-Anweisungen statt switch-case verwendet (will ja nicht einfach abkupfern).

Nur erklärt er mir im Buch leider nicht, warum er erstens die Funktion keylistener in die Funktion init einträgt, welche ja nur nach dem Laden des Body-Tags in Kraft tritt. Danach kann er doch nicht wissen, wann ich wieder eine Taste drücke, wenn er gar nicht in der Funktion ist??

Nächste Frage: Warum muss ich bei der Funktion keylistener einen Parameter e  bzw xyz definieren? Ein Parameter wird doch übergeben, dieser hier hat aber keinen Wert, woher weiß die Funktion das Parameter sozusagen ein Objekt ist, aus welchem ich dann den Tastencode auslesen kann?

Die Bewegung mit den Pfeiltasten funktioniert einwandfrei. Allerdings das Ausgeben des Tastencodes nicht. Ich habe dann versucht der Funktion einen Rückgabewert key zu geben, welche ich dann in das Tastencode-Feld schreibe. Funktioniert aber nicht und komme nicht drauf. auch in der SELFHTML-Javascript-Erklärung über Funktionen steht nur, dass der Klammerwert von keylistener(e) ein Parameter ist der übergeben wird, aber doch kein Objekt. Vll könnt ihr mir helfen.

Danke und LG

[ChrisB]

Hi,

Nur erklärt er mir im Buch leider nicht, warum er erstens die Funktion keylistener in die Funktion init einträgt, welche ja nur nach dem Laden des Body-Tags in Kraft tritt. Danach kann er doch nicht wissen, wann ich wieder eine Taste drücke, wenn er gar nicht in der Funktion ist??

Nächste Frage: Warum muss ich bei der Funktion keylistener einen Parameter e  bzw xyz definieren? Ein Parameter wird doch übergeben, dieser hier hat aber keinen Wert, woher weiß die Funktion das Parameter sozusagen ein Objekt ist, aus welchem ich dann den Tastencode auslesen kann?

Dir fehlen ganz offensichtlich die Grundkenntnisse über Ereignisverarbeitung in JavaScript – also bitte nachlesen, z.B. hier: http://molily.de/js/event-handling-grundlagen.html

MfG ChrisB

[Felix Riesterer]

Liebe(r) mikethet,

bitte erkläre mir mal die Bedeutung der folgenden beiden Zeilen:

document.onkeydown = keylistener;

[...]

keydata = keylistener;

Siehst Du da einen Sinn (in der zweiten)?

Liebe Grüße,

Felix Riesterer.

[mikethet]

Liebe(r) mikethet,

bitte erkläre mir mal die Bedeutung der folgenden beiden Zeilen:

document.onkeydown = keylistener;
[...]
keydata = keylistener;

Siehst Du da einen Sinn (in der zweiten)?

Liebe Grüße,

Felix Riesterer.

Okay, also wenn ich das jetzt richtig verstanden habe, Überwacht Javascript ein Objekt(dem ein Event zugeordnet ist) auf das Eintreten des Events um dann ein Ereignis auszuführen. Wie das Einlesen bzw. parsen des Codes funktioniert verstehe ich jetzt auch. Nur bin ich mir beim Onload Event im Body immer noch unsicher.

Mein Verständnis ist derzeit so. Ich rufe die Seite auf. Er lädt die Seite vollständig in das DOM und erst dann wird das onload event ausgeführt, wodurch er in die init-Funktion springt. jetzt ist bereits alles eingelesen, Jede Funktion von Javascript sowie der HTML-Code selber.

Soweit sogut, nur verändert Javascript das DOM, dabei wird doch aber nicht der komplette Body-Inhalt neu geladen oder? Somit dürfte das Ereignis onload nicht mehr auftreten.(Ich weiß es ist nicht so, verstehe es aber nicht). Also dürfte er eigentlich auch nicht mehr wissen, welche Taste ich gedrückt habe, weild as Event ja gar nicht auslöst.

@Felix:
Keydata ist ein Text-Objekt welcher den TastenCode ausgibt. Und Keylistener stellt den TastenCode fest, von der Taste die ich natürlich grade drücke. Habe der Funktion einen Rückgabewert gegeben, aber es klappt einfach nicht. ;(

LG Mike

[mikethet]

Habe noch vergesse:
ich weiß jetzt das eine Funktion in JavaScript nichts anderes als ein Objekt ist. Trotzdem verstehe ich nicht, warum ich bei der Funktion Keylistener einen Parameter e "übergebe".

Danke im voraus LG

[ChrisB]

Hi,

ich weiß jetzt das eine Funktion in JavaScript nichts anderes als ein Objekt ist. Trotzdem verstehe ich nicht, warum ich bei der Funktion Keylistener einen Parameter e "übergebe".

Dann blättere an der Stelle, die ich dir verlinkt hatte, bitte auf die nächste Seite …

MfG ChrisB

[ChrisB]

Hi,

Mein Verständnis ist derzeit so. Ich rufe die Seite auf. Er lädt die Seite vollständig in das DOM und erst dann wird das onload event ausgeführt, wodurch er in die init-Funktion springt. jetzt ist bereits alles eingelesen, Jede Funktion von Javascript sowie der HTML-Code selber.

Soweit sogut, nur verändert Javascript das DOM, dabei wird doch aber nicht der komplette Body-Inhalt neu geladen oder? Somit dürfte das Ereignis onload nicht mehr auftreten.

Wozu sollte es denn auch? Die Initialisierung deines Scriptes ist doch bereits erfolgt.

Also dürfte er eigentlich auch nicht mehr wissen, welche Taste ich gedrückt habe, weild as Event ja gar nicht auslöst.

Der Tastendruck wird _nicht_ vom load-Event abgefangen.

MfG ChrisB

[Felix Riesterer]

Lieber mikethet,

Okay, also wenn ich das jetzt richtig verstanden habe, Überwacht Javascript ein Objekt(dem ein Event zugeordnet ist) auf das Eintreten des Events um dann ein Ereignis auszuführen. Wie das Einlesen bzw. parsen des Codes funktioniert verstehe ich jetzt auch. Nur bin ich mir beim Onload Event im Body immer noch unsicher.

mit anderen Worten, Du hast da so ein Bauchgefühl anstelle von solidem Grundlagenwissen. Naja, so fängt jeder einmal an. Daher solltest Du allen Ernstes die Links von ChrisB durchkauen. Du musst nicht auf Anhieb alles verstehen und verinnerlichen, aber vielleicht kannst Du aus den Quellen zumindest etwas mehr an Verständnis für Deine aktuelle Problemstellung erlernen.

Er lädt die Seite vollständig in das DOM und erst dann wird das onload event ausgeführt, wodurch er in die init-Funktion springt. jetzt ist bereits alles eingelesen, Jede Funktion von Javascript sowie der HTML-Code selber.

Der HTML-Code spielt nach dem Erstellen eines DOM keine Rolle mehr. "Das DOM" ist ein gigantisches Objekt, welches anhand des HTML-Codes erstellt wurde, und welches nun "die Seite" repräsentiert - in Form eben eines Objektes. Aus Sicht von JS kannst Du nun an diversen Unterobjekten herumschrauben, um das Dokument nach Deinen Bedürfnisen hin zu modifizieren. Damit wird die Seite "interaktiv".

nur verändert Javascript das DOM, dabei wird doch aber nicht der komplette Body-Inhalt neu geladen oder?

Vergiss den Quelltext! Wenn der Browser die Seite als Objekt generiert hat, dann schaut er nie wieder in den HTML-Code. Wozu auch? Das Dokument (das D in DOM steht für "document") ist doch da, wozu braucht es da noch eine Bauanleitung dafür?

Somit dürfte das Ereignis onload nicht mehr auftreten.(Ich weiß es ist nicht so, verstehe es aber nicht). Also dürfte er eigentlich auch nicht mehr wissen, welche Taste ich gedrückt habe, weild as Event ja gar nicht auslöst.

Du wirfst noch verschiedenerlei Dinge durcheinander. Ereignisse sind einfach Ereignisse, die geschehen. Manche Beobachter reagieren auf bestimmte Ereignisse. In JS bedeutet das, dass gewisse "event listeners" auf gewisse "events" hin damit reagieren, dass sie eventuell dafür registrierte Funktionen (oder von mir aus Funktionsobjekte) aufrufen (also ausführen lassen).

Genau deshalb habe ich Dir ja die Frage gestellt:

bitte erkläre mir mal die Bedeutung der folgenden beiden Zeilen:

document.onkeydown = keylistener;
[...]
keydata = keylistener;

Du hast zwei Objekte:
1. document
2. keydata

Das erste Objekt ist ein von der JS-Engine bereits vorgegebenes Objekt, nämlich window.document, das zweite eine von Dir definierte (lokale oder globale?) Variable.

Beim ersteren nutzt Du eine spezielle Eigenschaft namens "onkeydown", um ihr ein Funktionsobjekt zu geben. Das ist so, als ob Du einer Variablen einen Wert zuweist. "window.document.onkeydown" als "Variable" hat nun den Wert "Funktionsobjekt", sodass Du mit "window.document.onkeydown(e)" nun diese Funktion aufrufen kannst. Dass event listeners ein Eventobjekt benötigen, damit sie die für dieses Event gültigen Werte verarbeiten können, hättest Du in den von ChrisB verlinkten Quellen bei molily nachlesen können. Ich schlage vor, Du tust das noch!

Das Besondere an "window.document.onkeydown" ist, dass diese Eigenschaft von der JS-Engine als event listener voreingestellt ist. Ein dort hineingespeichertes Funktionsobjekt wird beim Eintreten des Tastendruck-Ereignisses ausgeführt. Bei molily findest Du fortgeschrittene Techniken, wie man das heute besser machen kann, denn Du ahnst sicher schon, dass es in dem Moment, wo mehrere Funktionen bei diesem Event ausgeführt werden sollen, zu einem ... sagen wir mal "Engpass"... kommt.

Warum Du der Variablen "keydata" ebenso das Funktionsobjekt (und nicht etwa den Rückgabewert der aufgerufenen Funktion) gibst, erschließt sich mir nicht. Daher mutmaße ich, dass Du den Unterschied zwischen diesen beiden Zeilen noch nicht verstanden oder noch nicht genügend verinnerlicht hast:

var f = function (e) { alert("e.type: " + e.type); };  
var r = f(e);

Also brauchst Du auch in diesem Bereich noch wesentliches Grundlagenwissen. Bei molily solltest Du fündig werden.

@Felix:
Keydata ist ein Text-Objekt welcher den TastenCode ausgibt.

Nö. ;-)

Und Keylistener stellt den TastenCode fest, von der Taste die ich natürlich grade drücke.

Ja, das ist schon richtig. Aber das, was Du mit dem Tastencode machst, ist für Deine Problemstellung nicht sinnvoll. Warum das so ist, sollst Du selbst herausfinden, ohne dass ich Dir das erklären muss.

Habe der Funktion einen Rückgabewert gegeben, aber es klappt einfach nicht. ;(

Was soll denn "klappen"? Wie sollte das aus Sicht Deines Programms aussehen, wenn "es klappt"?

Liebe Grüße,

Felix Riesterer.