nicht angemeldet
Problem mit Objekten
Guten Tag!
Ich verstehe das irgendwie nicht... Ich habe etwas in Javascript geschrieben, um die Position des letzten Mausklicks sowohl auf der x als auch auf der y Achse zu dokumentieren. Leider werden diese nicht verändert, was ich total doof finde *gg. Ich denke, das wäre gar nicht so schwierig aber ich will dies mit eigenen Objekten machen, doch das funktioniert irgendwie nicht. Ich muss unbedingt wissen, was falsch ist, denn dieser kleine Codeschnipsel soll hinterher zu etwas anderem ausgebaut werden, deswegen auch die Objekte.
Na dann, hier der Codeschnipsel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript">
function Mouse ()
{
this.xStart = 0;
this.yStart = 0;
this.method_update;
}
var objMouse = new Mouse();
function method_update(Event)
{
if (!Event)
Event = document.event;
this.xStart = Event.clientX;
this.yStart = Event.clientY;
}
document.onmousedown = objMouse.update;
</script>
<title>test_data</title>
</head>
<body id="body">
<a href="#" onclick="alert(objMouse.xStart);">Klick mich</a>
</body>
</html>
Liebe Grüße,David
-
document.onmousedown = objMouse.update;
Da meinte ich natürlich anstatt objMouse.update folgendes:
objMouse.method_updateEs funktioniert dennoch nicht!
David
-
Hallo,
Ich verstehe das irgendwie nicht... Ich habe etwas in Javascript geschrieben, um die Position des letzten Mausklicks sowohl auf der x als auch auf der y Achse zu dokumentieren. Leider werden diese nicht verändert, was ich total doof finde *gg. Ich denke, das wäre gar nicht so schwierig aber ich will dies mit eigenen Objekten machen, doch das funktioniert irgendwie nicht. Ich muss unbedingt wissen, was falsch ist, denn dieser kleine Codeschnipsel soll hinterher zu etwas anderem ausgebaut werden, deswegen auch die Objekte.
Na dann, hier der Codeschnipsel:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript">
function Mouse ()
{
this.xStart = 0;
this.yStart = 0;
//this.method_update;// ^Du glaubst, die Namensgleichheit bringt irgendwas? Nein. Das eine method_update ist im scope Mouse, das andere im scope window. Sie wissen beide voneinander nichts. Also:
this.method_update = window.method_update;
//Besser, Du kapselst Die Funktion aber gleich mit in Dein Objekt ein. Siehe unten.
}
var objMouse = new Mouse();
function method_update(Event)
{
if (!Event)
Event = document.event;// ^Ähm, Du meinst gewiss window.event.
this.xStart = Event.clientX;
this.yStart = Event.clientY;alert(this.xStart + ", " + objMouse.xStart);
//^Dieses alert zeigt Dir, dass sich schon was ändert, aber eben nur this.xStart im scope Mouse, nicht objMouse.xStart im scope window. Das liegt daran, dass ...}
//document.onmousedown = objMouse.method_update;// ^... hier die event-Übertragung unterbrochen wird. Das event Objekt des scopes window wird nicht in den scope Mouse übergeben. Besser:
document.onmousedown = function(Event) {objMouse.method_update(Event);};
</script>
<title>test_data</title>
</head><body id="body">
<a href="#" onclick="alert(objMouse.xStart);">Klick mich</a>
</body>
</html>Ich würde das Ganze noch etwas stärker kapseln:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript">
function Mouse ()
{
this.xStart = 0;
this.yStart = 0;
this.method_update = function(Event)
{
if (!Event) Event = window.event;
this.xStart = Event.clientX;
this.yStart = Event.clientY;
};
}var objMouse = new Mouse();
document.onmousedown = function(Event) {objMouse.method_update(Event);};
</script>
<title>test_data</title>
</head><body id="body">
<a href="#" onclick="alert(objMouse.xStart);">Klick mich</a>
</body>
</html>viele Grüße
Axel
-
this.method_update = function(Event)
{
if (!Event) Event = window.event;
this.xStart = Event.clientX;
this.yStart = Event.clientY;
};
}document.onmousedown = function(Event) {objMouse.method_update(Event);};
Also, ich habe ausprobiert was du mir gesagt hast, es klappt! Danke :)
Aber nun zu den angegebenen Textstellen von dir. Irgendwie verstehe ich die Syntax nicht. Ja, natürlich kenne ich die Funktion function, aber nur in dem Zusammenhang, wo man sich seine eigene Funktion erstellt, z.B.
function machwas()
{
// Anweisungen
}Kannst du mir diese Schreibweise vielleicht erklären? Weil auf den ersten Blick siehts total komisch aus... Vielleicht gewährst du mir ja einen zweiten Blick? =)
Liebe Grüße
David-
Hallo,
document.onmousedown = function(Event) {objMouse.method_update(Event);};
Aber nun zu den angegebenen Textstellen von dir. Irgendwie verstehe ich die Syntax nicht. Ja, natürlich kenne ich die Funktion function, aber nur in dem Zusammenhang, wo man sich seine eigene Funktion erstellt, z.B.
function machwas()
{
// Anweisungen
}Kannst du mir diese Schreibweise vielleicht erklären? Weil auf den ersten Blick siehts total komisch aus... Vielleicht gewährst du mir ja einen zweiten Blick? =)
Gerne.
Funktionen können auf unterschiedliche Arten definiert werden:
//Die allgemein bekannte Methode:
function machwas()
{
alert("Ich bin machwas");
}//Definition innerhalb eines Zuweisungsausrucks:
var machwas1 = function() {alert("Ich bin machwas1");};//Definition per new als Funktionsobjekt:
var machwas2 = new Function("alert('Ich bin machwas2')");//Danach sind machwas, machwas1 und machwas2 jeweils Funktionsreferenzen, die als Funktionen aufgerufen werden können.
machwas();
machwas1();
machwas2();Jede Art der Definition hat ihre Vorteile und ihre Nachteile. Hauptsächlich zeigen sich diese, wenn es um die Übergabe von Argumenten geht.
Methode1 ist sicherlich die übersichtlichste. Allerdings lässt sich die Referenz machwas eben nur ohne Argumente einer andere Variable oder eben einer Objektmethode zuweisen. Bei
...
this.myMethode = machwas(Event);
...
würde ja machwas(Event) zunächst ausgeführt werden und der Rückgabewert würde this.myMethode zugewiesen. Will man das nicht, sondern this.myMethode soll eine Referenz auf die Funktion machwas werden und trotzdem sollen Argumente mit übergeben werden, muss man das also anders notieren:
...
this.myMethode = function(Event) {machwas(Event);};
...Diese Notation kann man übrigens auch verwenden, um dem window- oder DOM-Objekten Eventmethoden zuzuweisen. So spart man sich die Notation von onload="" onclick="" onmouseover="" usw. im HTML-Quelltext, kann also HTML und JavaScript besser trennen:
window.onload = function() {
alert("nach dem Laden der Seite");
};würde:
<body onload="alert('nach dem Laden der Seite');">
entsprechen.
var myButton = document.getElementById("myButton");
myButton.onmouseover = function() {
this.style.backgroundColor="#F00";
};
myButton.onmouseout = function() {
this.style.backgroundColor="";
};würde:
<button onmouseover="this.style.backgroundColor='#F00'" onmouseover="this.style.backgroundColor=''" id="myButton">Test</button>
entsprechen.
Die Notation als Referenz auf ein Funktionsobjekt hat wiederum die Vorteile, dass der Funktionsbody als String übergeben wird. Diese Notation kann also im Prinzip ein Ersatz für eval() sein. Außerdem können dort die Namen der Argumente als Argument-Namen-Array übergeben werden:
var args = ["a","b","c"];
var machwas2 = new Function(args, "alert(a+b+c)");
machwas2(1,2,3);Wenn Du mit Englisch kein Problem hast, ist http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide etwas für Dich. Siehe dort http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Defining_Functions und http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Function_Object
viele Grüße
Axel
-
-