Javascript "Fortgeschritten" ?!

[efesus]

Hallo liebes Selfhtml Team
das ist mein erster Forum Beitrag überhaupt irgendwo. Den normalerweise findet man noch alles mit der Suchfunktion/Google. Ich hoffe ihr könnt mir helfen. Bin am verzweifeln.
Folgendes:

  
  
function getElement(f)  
{  
   return document.getElementById(f);  
}  
function echoId()  
{  
   alert(this.id);  
}  
Object.prototype.echoId = echoId;  
  
getElement("test").echoId();  
document.getElementById("test").echoId(); //logisch das selbe ;)  
  

Dadurch das ich schreibe "Object.prototype.echoId = echoId;" kann ich in function echoId() mit "this" auf das return value von function getElement(f) zugreifen. Soviel hab ich schon rausgefunden.

dann ist es natürlich auch möglich direkt objekte zu erweitern zb:

  
  
function getEgal()  
{  
    alert(this.title);  
}  
  
document.getTitle = getEgal;  
  
document.getTitle();  

meine erste frage:
welches objekt muss ich erweitern das ich wie oben schreiben kann:

  
  
function echoId()  
{  
   alert(this.id);  
}  
document.getElementById("test").echoId();  
  

ohne das ich aber "Object.prototype.echoId = echoId;" schreibe ...
also praktisch

  
function echoId()  
{  
   alert(this.id);  
}  
document.echoId = echoId; //das ist halt nicht das richtig objekt  
document.getElementById("test").echoId();  

ich verstehe das getElementById eine "Methode" von dem Objekt "document" ist
... natürlich ist die Funktion auch wieder ein eigenes Objekt wie alles in javascript ... aber ich kann nicht einfach schreiben

  
getElementById.echoId = echoId; //das klappt nicht  
document.getElementById.echoId = echoId; //das auch nicht  

und meine zweite viel wichtigere frage ist ;):
das prototype framework setzt ja noch einen drauf mithilfe dessen kann man ja zb schreiben:

  
$("test").hide(); //nur als beispiel  

wenn man sich aber den quelltext von der function hide() anschaut (ausschnitt):

  
  hide: function(element) {  
    element = $(element);  
    element.style.display = 'none';  
    return element;  
  },  

(ist halt eine etwas andere schreibweise aber das tut ja jetzt nichts zur sache)
da finde ich keine "this" wie bei mir um auf das darüber liegende objekt zuzugreifen. also vermute ich das es irgendwie möglich sein muss das ich den return wert der "darüberliegenden" ( function $ () ) an die mit "." (punkt) angefügte funktion übergebe ...

das ich meine funktion von gaaanz oben am anfang praktisch so umschreiben kann:

  
  
function echoId()  
{  
   //alert(this.id); alte schreibweise ...  
   alert( arguments[0].id ); // neue schreibweise  
   //oder halt einen übergabeparameter einfüge ... ist ja egal  
}  
  

ich hoffe ihr verteht was ich meine und ich hoffe das ihr mir helfen könnt. =) =)

[ChrisB]

Hi,

meine erste frage:
welches objekt muss ich erweitern das ich wie oben schreiben kann:

function echoId()
{
   alert(this.id);
}
document.getElementById("test").echoId();

Da dir document.getElementById die Referenz auf ein (beliebiges) HTML-Element zurückliefert, müsstest du alle HTMLElementObject-e entsprechend erweitern, damit sie diese Methode besitzen.

ich verstehe das getElementById eine "Methode" von dem Objekt "document" ist
... natürlich ist die Funktion auch wieder ein eigenes Objekt wie alles in javascript ... aber ich kann nicht einfach schreiben
[code lang=javascript]
getElementById.echoId = echoId; //das klappt nicht
document.getElementById.echoId = echoId; //das auch nicht

  
Natürlich nicht, weil du über den . ja das Objekt ansprichst, welches getElementById zurückgeliefert hat.  
  

> das prototype framework setzt ja noch einen drauf mithilfe dessen kann man ja zb schreiben:  
>   
> ~~~javascript
  

> $("test").hide(); //nur als beispiel  
> 

wenn man sich aber den quelltext von der function hide() anschaut (ausschnitt):

hide: function(element) {
    element = $(element);
    element.style.display = 'none';
    return element;
  },

> (ist halt eine etwas andere schreibweise aber das tut ja jetzt nichts zur sache)  
> da finde ich keine "this" wie bei mir um auf das darüber liegende objekt zuzugreifen.  
  
Wozu sollte da irgendwo this gebraucht werden?  
Mit  
`element = $(element);`{:.language-javascript}  
wird die Referenz auf ein Element besorgt, und anschliessend kann über element darauf zugegriffen werden.  
  
Die Schreibweise mag etwas seltsam anmuten, weil dort zwei mal element verwendet wird. Das ist eine Eigenschaft von Prototyp und seiner $-Methode - der kannst du entweder direkt eine Elementreferenz übergeben, oder auch einen Selektor (wie bspw. die ID), aus dem dann die Referenz auf ein Element erst ermittelt wird.  
  
MfG ChrisB  
  

-- 
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]

[ChrisB]

Hi,

getElementById.echoId = echoId; //das klappt nicht
document.getElementById.echoId = echoId; //das auch nicht

>   
> Natürlich nicht, weil du über den . ja das Objekt ansprichst, welches getElementById zurückgeliefert hat.  
  
Die Aussage sollte auf  
`document.getElementById("test").echoId();`{:.language-javascript}  
bezogen sein.  
  
Natürlich kannst du  
`document.getElementById.echoId = irghendwas`{:.language-javascript}  
schreiben - damit erweiterst du das Funktionsobjekt um eine weitere Eigenschaft.  
Allerdings hast du von dort aus keinen Zugriff auf das Element, das getElementById zurückliefert.  
  
MfG ChrisB  
  

-- 
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]

[Christian S.]

Hi,

Dadurch das ich schreibe "Object.prototype.echoId = echoId;"

Das würde ich lieber lassen. Du erweiterst damit wirklich JEDES Objekt, nicht nur die HTML Elemente. Bei mir läuft das unter bad practice.

meine erste frage:
welches objekt muss ich erweitern das ich wie oben schreiben kann:

HTMLElement.

Nach meinem letztem Kenntnisstand, kann der IE das aber nicht. Zumindest IE 7 noch nicht.

[code lang=javascript]
  hide: function(element) {
    element = $(element);
    element.style.display = 'none';
    return element;
  },

> (ist halt eine etwas andere schreibweise aber das tut ja jetzt nichts zur sache)  
> da finde ich keine "this" wie bei mir um auf das darüber liegende objekt zuzugreifen. also vermute ich das es irgendwie möglich sein muss das ich den return wert der "darüberliegenden" ( function $ () ) an die mit "." (punkt) angefügte funktion übergebe ...  
  
Nene. Parameter werden nicht einfach mal so aus dem Nichts heraus implizit übergeben.  
Wenn du dir das mal genauer ansiehst, dann siehst, dass die hide Methode an einem Element.Methods Objekt hängt.  
  
Prototype.js sorgt dann dafür, dass diese Methoden an die Objekte, die mit $ zurückgegeben werden, angefügt werden und der Parameter übergeben wird. Wo das jetzt genau ist, darfst du selber rausfinden. Für mich ist es schon zu spät.  
  
Gruß!  

[efesus]

ich danke euch vielmals für die antworten. werde wir erstmal nochmal gedanken machen ;) da hat was an meiner denkweise garnicht gepasst ;)