nicht angemeldet
Liebe Javascript-Fortgeschrittenen,
da ich des öfteren in Antworten auf eigene Fragen im Forum und auch bei Lösungssuchen in anderen Forumsdiskussionen
auf mir bisher "spanisch" vorkommende Script-Notationen gestoßen bin, die sich in meiner Recherche
als Literale, Konstruktoren etc. entpuppten, habe ich mir jetzt einige OOP-Tutorials angeguckt und versuchsweise eines meiner Scripte umgeschrieben.
Vielleicht kann mir ja der ein oder andere auf die Sprünge helfen, mir sagen,
ob ich da totalen Murks angestellt habe, oder ob das eine Verbesserung vom Schema
var ..., var, ..., ... function..., function..., function...
hin zu unobstrusive scripting darstellt.
Meine konkreten Fragen:
(1) Ist das ein sinnvolles/gängiges Vorgehen, zunächst in einer namenlosen automatisch startenden Funktion (function(){...})() die Startbedingungen festzulegen und dann alle weiteren Variablen und Funktionen in einen Container
zu packen - also als Methoden, Eigenschaften einer Konstruktor-Fkt.?
(2) Wenn ich einem Element einen Event-Handler zuweisen möchte direkt, nachdem dieser im HTML-Baum erzeugt wurde und nicht erst nach vollständigem Laden aller Elemente, ist da die einzige Lösung, ein eigenes Script nur für diese Aktion zu schreiben und dieses direkt nach dem entsprechenden Element einzubinden (wenn ich auf Event-Handler im tag verzichten will)?
Im Folgenden das Script in 2 Schritten und die dazugehörige HTML (hier stark vereinfacht/auf das bzgl. Script relevante reduziert):
Startbedingungen:
/*
- preload images
- event handling definieren
- neues Objekt als Instanz des Konstruktors (s.u.)
- einge Werte und Bilder-Pfadnamen an öffentl. Methode des Konstruktors übergeben */
(function() {
var imgs = new Array();
for (i=0; i<10; i++) {
imgs[i] = new Image();
imgs[i].src = "bilder/strip" + (i+1) + ".jpg";
};
var General = {
addEvent : function(element, eventName, function_) {
if (typeof(function_) == 'undefined')
return false;
if (element.addEventListener)
element.addEventListener(eventName, function_, false);
else if (element.attachEvent)
element.attachEvent('on' + eventName, function_);
return true;
},
addOnLoad : function(function_) {
if (document.readyState == 'loading')
General.addEvent(window, 'load', function_);
else
setTimeout(function_, 1);
}
}
var dragger_1 = new Dragger();
General.addEvent(document, "mousemove", dragger_1.drag);
General.addEvent(document, "mouseup", function() {dragger_1.dragObjekt = false;});
// General.addEvent(document, "mousedown", function() {return false;});
document.onmousedown = function() {return false;};
if (document.all) { // warum klappt if(document.ondragstart) nicht???
document.ondragstart = function() {return false;};
};
if (document.all) {
document.onselectstart = function() {return false;};
};
var Presets = {
dia_strip : "strip",
id_pic_box : "bild",
images : ["bilder/strip1.jpg", "bilder/strip2.jpg", "bilder/strip3.jpg", "bilder/strip4.jpg",
"bilder/strip5.jpg", "bilder/strip6.jpg", "bilder/strip7.jpg", "bilder/strip8.jpg",
"bilder/strip9.jpg", "bilder/strip10.jpg"],
min_top : 123,
max_top : 480,
strip_map_top : [472, 420, 367, 315, 262, 210, 157, 105, 52, 0],
strip_map_bottom : [523, 471, 419, 366, 314, 261, 209, 156, 104, 51],
strip_part_height : 50
};
// General.addOnLoad(function() {General.addEvent(document.getElementById('diabox'), "mousedown", function() {dragger_1.drag_start(this);});});
window.onload = function() {document.getElementById('diabox').onmousedown = function() {dragger_1.drag_start(this);};};
dragger_1.uebergabe(Presets);
})();
Konstruktor:
function Dragger() {
var that = this;
this.uebergabe = function(Presets) {
this.strip = Presets.dia_strip;
this.pic_box = Presets.id_pic_box;
this.images = new Array();
for (i=0; i<Presets.images.length; i++) {
this.images[i] = Presets.images[i]
};
this.min_top = Presets.min_top;
this.max_top = Presets.max_top;
this.strip_map_top = new Array();
for (j=0; j<Presets.strip_map_top; j++) {
this.strip_map_top[i] = Presets.strip_map_top[i];
};
this.strip_map_bottom = new Array();
for (j=0; j<Presets.strip_map_bottom; j++) {
this.strip_map_bottom[i] = Presets.strip_map_bottom[i];
};
this.strip_part_height = Presets.strip_part_height;
}
this.dragObjekt = false;
var dragY = 0;
var posY = 0;
var stripY;
var aktuellePos;
var stripDownBusy = false;
var stripUpBusy = false;
this.drag_start = function(element) {
that.dragObjekt = element;
dragY = posY - that.dragObjekt.offsetTop;
};
this.drag = function(e) {
posY = document.all ? (window.event.clientY + document.body.scrollTop - document.body.clientTop) : e.pageY;
stripY = parseInt(document.getElementById(that.strip).style.top);
if (that.dragObjekt != false) {
if ((posY - dragY) > that.min_top && (posY - dragY) < that.max_top) {
that.dragObjekt.style.top = (posY - dragY) + "px";
}
else if ((posY - dragY) <= that.min_top) {
that.dragObjekt.style.top = that.min_top + "px";
if (stripDownBusy == false) {
stripDown();
}
}
else if ((posY - dragY) >= that.max_top) {
that.dragObjekt.style.top = that.max_top + "px";
if (stripUpBusy == false) {
stripUp();
}
}
aktuellePos = posY - dragY;
aktualisiereBild();
return new Boolean(false);
}
};
function aktualisiereBild() {
var bild = document.getElementById(that.pic_box);
for (i=0; i<that.images.length; i++) {
if ((that.dragObjekt.offsetTop - (that.min_top + 4)) >= (that.strip_map_top[i] + stripY - that.strip_part_height/2) && (that.dragObjekt.offsetTop - (that.min_top + 4)) <= (that.strip_map_bottom[i] + stripY - that.strip_part_height/2)) {
bild.src = that.images[i];
}
}
};
function stripDown() {
stripDownBusy = true;
if (that.dragObjekt == false) {
stripDownBusy = false;
return;
}
stripY = parseInt(document.getElementById(that.strip).style.top);
if (stripY < 0 && aktuellePos <= 123) {
document.getElementById(that.strip).style.top = stripY + 2 + 'px';
aktualisiereBild();
window.setTimeout(function() {stripDown();}, 1);
}
else {stripDownBusy = false;}
};
function stripUp() {
stripUpBusy = true;
if (that.dragObjekt == false) {
stripUpBusy = false;
return;
}
stripY = parseInt(document.getElementById(that.strip).style.top);
if (stripY > -107 && aktuellePos >= 480) {
document.getElementById(that.strip).style.top = stripY - 2 + 'px';
aktualisiereBild();
window.setTimeout(function() {stripUp();}, 1);
}
else {stripUpBusy = false;}
}
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<?xml version="1.0" encoding="UTF-8"?>
<head>
<script language="JavaScript" type="text/javascript" src="jscripts/galerie.js"></script>
<link rel="stylesheet" type="text/css" href="styles/galerie.css">
</head>
<body>
<div>
<img src="bilder/strip.png" id="strip" />
</div>
<div id="diabox">
<img src="bilder/diarahmen.png" id="diarahmen" />
</div>
<div id="bildbox">
<img src="bilder/strip10.jpg" id="bild" />
</div>
</body>
</html>
So, wie es ist, funktioniert das Script wie es soll - ob es hinsichtlich objektorientierten Programmierens sinnvoll geschrieben ist, das frage ich Euch ;}
Vielen Dank im Voraus für jegliche Hilfe/Anregungen/...
Lieben Gruß