...das unbekannte Wesen

[Angy]

Hallo, meine Lieben!

Nach langem passiv-dabeisein hier mein erster Auftritt - und dann auch gleich noch mit einer Frage :-(. Ich hoffe, ich stelle mich jetzt nicht zu blöd an.

Stefan Becker hat gestern in einer Antwort auf die Adresse http://one.idontsmoke.co.uk/x/tooltip verwiesen und die darin verwendete Technik vollkommen zu recht als genial bezeichnet. Das Problem: ich dachte zwar, ich kann JS, aber, was da so abläuft an JS-Syntax, das habe ich noch nirgendwo gesehen. Vielleicht ist ja jemand von Euch bereit, einen klärenden Spruch zu hinterlassen.

Damit Ihr nicht rumsuchen müsst, kopiere ich einen relevanten Ausschnitt aus dem Dokument.

Würd mich freuen, was von Euch zu hören und wünsch Euch noch weiter dicke Ostereier!

Angy

...
window.onload = function(e) {
  if(document.createElement) tooltip.d();
}

tooltip = {

t: document.createElement("div"),
  c: null,
  g: false,

m: function(e) {
    if(tooltip.g) {
      x = window.event ? event.clientX + document.body.scrollLeft : e.pageX;
      y = window.event ? event.clientY + document.body.scrollTop  : e.pageY;
      tooltip.a(x,y);
    }
  },

d: function() {
    tooltip.t.setAttribute("id","tooltip");
    document.body.appendChild(tooltip.t);
    a = (document.all) ? document.all : document.getElementsByTagName("*");
    for(var i=0; i<a.length; i++) {
      if(a[i].getAttribute("title")) {
        a[i].setAttribute("text",a[i].getAttribute("title"));
        a[i].removeAttribute("title");
        if(a[i].getAttribute("alt") && a[i].complete) a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      } else if(a[i].getAttribute("alt") && a[i].complete) {
        a[i].setAttribute("text",a[i].getAttribute("alt"));
        a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      }
    }
    document.onmousemove = tooltip.m;
  },

s: function(e) {
    d = (window.event) ? window.event.srcElement : e.currentTarget;
    tooltip.t.appendChild(document.createTextNode(d.getAttribute("text")));
    tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';",500);
    tooltip.g = true;
  },

usw. usw.

[Marko]

Hallo,
Der Syntax ist eingentlich nicht ungewöhnlich für ein DHTML-Script, aber das mit den : hab ich bisher auch noch nicht gesehen. Und ausserdem funktioniert das Script in einigen Broswern nicht.
Ciao,
Marko

[Slyh]

Hallo,

[..] aber das mit den : hab ich bisher auch noch nicht gesehen.

Was diese Bedingung genau macht, steht u.a. in SelfHTML beschrieben:
http://selfhtml.teamone.de/javascript/sprache/bedingt.htm#entweder_oder

Gruß
Slyh

[Marko]

Hallo,
Aber zu einem : gehört auch ein ?, und das kann ich nicht finden.
Ciao,
Marko

[Angy]

Hi, Slyh,

Hallo,

[..] aber das mit den : hab ich bisher auch noch nicht gesehen.

Was diese Bedingung genau macht, steht u.a. in SelfHTML beschrieben:
http://selfhtml.teamone.de/javascript/sprache/bedingt.htm#entweder_oder

Gruß
Slyh

wie Marko schon schrieb: Es ist wohl kein IF-Statement. Von der Syntax her erinnert es mich eher an procedure entries, wie man sie z.B. von PL/I her kennt. Aber das ganze sieht doch seeehhr fremdartig aus....

Gruß, Angy

[MichelM]

Hallo Angy,
das wird etwas länger dauern, aber eigentlich ist der Code gar nicht so wild. Hier werden neue Elememte erzeugt, die wieder neue Elemente erzeugen.
Das ist sicherlich förderlich, wenn man seinen Code schützen will.
tooltip ist ein Objekt, das man sich in JavaScript selbst definieren kann. Diesem Objekt kann ich Variablen und Funktionen unterordnen.
Der Vorteil ist, das ich JavaScript-Programme schreiben kann, die ohne dazugehörigen HTML-Code funktioniert und sich leicht in bestehende websites einbauen lässt. Im Gegensatz zu globalen Varibalen besteht hier keine Verwechslungsgefahr bei gleichlautenden Variablen.
var g=100
var tooltip.g=false

Somit kann der tooltip-code nicht mit anderen codes kollidieren.

tooltip.t.setAttribute("id","tooltip"); liesse sich nur zum Verständnis auch so übersetzen:

document.write("<DIV id="tooltip" ></DIV>");

var tooltip=new Object();
tooltip.t=document.createElement("<DIV>");
tooltip.g=false;
tooltip.m=function(e); // entspricht function tooltipm(e) nur das innerhalb des Objektes geschieht.

Hat das Dir geholfen, den Code zu verstehen ?

Hallo, meine Lieben!

Nach langem passiv-dabeisein hier mein erster Auftritt - und dann auch gleich noch mit einer Frage :-(. Ich hoffe, ich stelle mich jetzt nicht zu blöd an.

Stefan Becker hat gestern in einer Antwort auf die Adresse http://one.idontsmoke.co.uk/x/tooltip verwiesen und die darin verwendete Technik vollkommen zu recht als genial bezeichnet. Das Problem: ich dachte zwar, ich kann JS, aber, was da so abläuft an JS-Syntax, das habe ich noch nirgendwo gesehen. Vielleicht ist ja jemand von Euch bereit, einen klärenden Spruch zu hinterlassen.

Damit Ihr nicht rumsuchen müsst, kopiere ich einen relevanten Ausschnitt aus dem Dokument.

Würd mich freuen, was von Euch zu hören und wünsch Euch noch weiter dicke Ostereier!

Angy

...
window.onload = function(e) {
  if(document.createElement) tooltip.d();
}

tooltip = {

t: document.createElement("div"),
  c: null,
  g: false,

m: function(e) {
    if(tooltip.g) {
      x = window.event ? event.clientX + document.body.scrollLeft : e.pageX;
      y = window.event ? event.clientY + document.body.scrollTop  : e.pageY;
      tooltip.a(x,y);
    }
  },

d: function() {
    tooltip.t.setAttribute("id","tooltip");
    document.body.appendChild(tooltip.t);
    a = (document.all) ? document.all : document.getElementsByTagName("*");
    for(var i=0; i<a.length; i++) {
      if(a[i].getAttribute("title")) {
        a[i].setAttribute("text",a[i].getAttribute("title"));
        a[i].removeAttribute("title");
        if(a[i].getAttribute("alt") && a[i].complete) a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      } else if(a[i].getAttribute("alt") && a[i].complete) {
        a[i].setAttribute("text",a[i].getAttribute("alt"));
        a[i].removeAttribute("alt");
        tooltip.l(a[i],"mouseover",tooltip.s);
        tooltip.l(a[i],"mouseout",tooltip.h);
      }
    }
    document.onmousemove = tooltip.m;
  },

s: function(e) {
    d = (window.event) ? window.event.srcElement : e.currentTarget;
    tooltip.t.appendChild(document.createTextNode(d.getAttribute("text")));
    tooltip.c = setTimeout("tooltip.t.style.visibility = 'visible';",500);
    tooltip.g = true;
  },

usw. usw.

[Angy]

Hallo, Michel (?),

ob ich das jetzt verstanden habe, das muß ich erst mal rauskriegen. Auf den ersten Blick ist mir das eine Umdrehung zu sehr von hinten durch die Brust ins Auge, als daß das für mich mal von Interesse werden könnte. Aber der Reiz ist schon da, sowas trickreiches mal zu durchblicken.
Ich danke Dir jedenfalls für Deine Antwort, ich bin jetzt jedenfalls schlauer.
Hoffe ich.

Tschööööö
Angy

Hallo Angy,
das wird etwas länger dauern, aber eigentlich ist der Code gar nicht so wild. Hier werden neue Elememte erzeugt, die wieder neue Elemente erzeugen.
Das ist sicherlich förderlich, wenn man seinen Code schützen will.
tooltip ist ein Objekt, das man sich in JavaScript selbst definieren kann. Diesem Objekt kann ich Variablen und Funktionen unterordnen.
Der Vorteil ist, das ich JavaScript-Programme schreiben kann, die ohne dazugehörigen HTML-Code funktioniert und sich leicht in bestehende websites einbauen lässt. Im Gegensatz zu globalen Varibalen besteht hier keine Verwechslungsgefahr bei gleichlautenden Variablen.
var g=100
var tooltip.g=false

Somit kann der tooltip-code nicht mit anderen codes kollidieren.

tooltip.t.setAttribute("id","tooltip"); liesse sich nur zum Verständnis auch so übersetzen:

document.write("<DIV id="tooltip" ></DIV>");

var tooltip=new Object();
tooltip.t=document.createElement("<DIV>");
tooltip.g=false;
tooltip.m=function(e); // entspricht function tooltipm(e) nur das innerhalb des Objektes geschieht.

Hat das Dir geholfen, den Code zu verstehen ?