lefloh/gist:4002160

## gistfile1.html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>a little bit of js</title>
    <script type="text/javascript">
        var de = {}; // so erzeugt man ein Objekt...
        de.lefloh = {}; // ... und baut sich seinen Scope

        de.lefloh.Core = function() {

            var that = {}; // that oder self ist ein Objekt das ich am Ende dieser Funktion zurückgebe damit andere damit arbeiten könnnen (und ich davon erben kann)

            var secret; // alles mit var lebt nur in diesem FunktionsScope. entspricht nem private
            that.foo; // das sieht jeder mit ner Referenz auf das Objekt. entpsricht nem public

            that.init = function(foo) { // das könnte ein public Constructor sein
                secret = 42;
                that.foo = foo;
                that.onInitEventBindings();
                that.onInitValidation();
                that.onInitRunScripts();
            };

            that.onInitEventBindings = function() {
                // die query-selector-api macht den Zugriff auf dom-objekte leichter.
                // http://t3n.de/news/javascript-umfassender-zugriff-362172/
                var btn = document.querySelector('#myButton');
                if (btn) {
                    btn.addEventListener('click', helloWorld, false); // der IE bis Version 8 kennt leider nur attachEvent()
                    // Das nehmen dir jquery und die ganzen anderen libs durch ne eigene api ab (btn.bind('click', ...)
                }

            };

            that.onInitValidation = function() {

            };

            that.onInitRunScripts = function() {

            };

            var helloWorld = function() {
                alert('Hello World!');
            };

            return that;

        }

        // wenn alles geladen ist erzeugen wir das Objekt (jedenfalls solange wir keine IE haben...)
        //window.addEventListener('load', function() {
        //    new de.lefloh.Core().init('bar');
        //}, false);

        // wir könnten aber auch vom Core erben
        de.lefloh.CooleApp = function() {

            var that = new de.lefloh.Core();

            that.onInitValidation = function() {
                // ein paar Validierungsregeln
            };

            // wenn sich jemand hiervon ein Objekt erzeugt wird das Zeug vom Core auch ausgeführt.
            // Ich geb einmal zentral vor was in einer Reihenfolge auf den einzelnen Seiten passieren soll
            // und implementier hier was auf der Seite gebraucht wird
            // aber Vererbung findste ja eh doof...

            // Das hier würde ich in ne eigene Datei hängen

            return that;
        };

        // in ner util-datei o.ä. würde ich z.B. sowas finden
        de.lefloh.RGB = function(r, g, b) {
            this.r = r;
            this.g = g;
            this.b = b;
            this.toString = function() {
                return 'r: ' + this.r + ' g: ' + this.g + ' b: ' + this.b;
            }
        }

        // und noch ein bißchen geslide...
        de.lefloh.Slider = function() {

            var that = new de.lefloh.Core();

            var touchX;

            var myCanvas;

            that.onInitEventBindings = function() {
                document.body.addEventListener('touchstart', touchStart, false);
                document.body.addEventListener('touchmove', touchMove, true);
            };

            that.onInitRunScripts = function() {
                initCanvas();
            };

            var initCanvas = function() {
                myCanvas = document.querySelector('#myCanvas');
                var ctx = myCanvas.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(25, 25);
				ctx.lineTo(200, 0);
				ctx.lineTo(200, 100);
				ctx.lineTo(25, 75);
                ctx.closePath();
                ctx.fillStyle = 'dd0000';
                ctx.fill();
            };

            var touchStart = function(e) {
                touchX = e.touches[0].pageX; // hier könnte man sich z.B. den startPunkt merken
            };

            var touchMove = function(e) {
                myCanvas.style.webkitTransform = 'translateX(' + e.touches[0].pageX + 'px)';
            };

            return that;

        };

        window.addEventListener('load', function() {
            new de.lefloh.Slider().init(); // dat foo brauchen wir nich ;)
        }, false);

    </script>
</head>
<body>
    <canvas id="myCanvas">your browser is lousy</canvas>
<body>
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
	<title>a little bit of js</title>
	<script type="text/javascript">
	var de = {}; // so erzeugt man ein Objekt...
	de.lefloh = {}; // ... und baut sich seinen Scope

	de.lefloh.Core = function() {

	var that = {}; // that oder self ist ein Objekt das ich am Ende dieser Funktion zurückgebe damit andere damit arbeiten könnnen (und ich davon erben kann)

	var secret; // alles mit var lebt nur in diesem FunktionsScope. entspricht nem private
	that.foo; // das sieht jeder mit ner Referenz auf das Objekt. entpsricht nem public

	that.init = function(foo) { // das könnte ein public Constructor sein
	secret = 42;
	that.foo = foo;
	that.onInitEventBindings();
	that.onInitValidation();
	that.onInitRunScripts();
	};

	that.onInitEventBindings = function() {
	// die query-selector-api macht den Zugriff auf dom-objekte leichter.
	// http://t3n.de/news/javascript-umfassender-zugriff-362172/
	var btn = document.querySelector('#myButton');
	if (btn) {
	btn.addEventListener('click', helloWorld, false); // der IE bis Version 8 kennt leider nur attachEvent()
	// Das nehmen dir jquery und die ganzen anderen libs durch ne eigene api ab (btn.bind('click', ...)
	}

	};

	that.onInitValidation = function() {

	};

	that.onInitRunScripts = function() {

	};

	var helloWorld = function() {
	alert('Hello World!');
	};

	return that;

	}

	// wenn alles geladen ist erzeugen wir das Objekt (jedenfalls solange wir keine IE haben...)
	//window.addEventListener('load', function() {
	// new de.lefloh.Core().init('bar');
	//}, false);

	// wir könnten aber auch vom Core erben
	de.lefloh.CooleApp = function() {

	var that = new de.lefloh.Core();

	that.onInitValidation = function() {
	// ein paar Validierungsregeln
	};

	// wenn sich jemand hiervon ein Objekt erzeugt wird das Zeug vom Core auch ausgeführt.
	// Ich geb einmal zentral vor was in einer Reihenfolge auf den einzelnen Seiten passieren soll
	// und implementier hier was auf der Seite gebraucht wird
	// aber Vererbung findste ja eh doof...

	// Das hier würde ich in ne eigene Datei hängen

	return that;
	};

	// in ner util-datei o.ä. würde ich z.B. sowas finden
	de.lefloh.RGB = function(r, g, b) {
	this.r = r;
	this.g = g;
	this.b = b;
	this.toString = function() {
	return 'r: ' + this.r + ' g: ' + this.g + ' b: ' + this.b;
	}
	}

	// und noch ein bißchen geslide...
	de.lefloh.Slider = function() {

	var that = new de.lefloh.Core();

	var touchX;

	var myCanvas;

	that.onInitEventBindings = function() {
	document.body.addEventListener('touchstart', touchStart, false);
	document.body.addEventListener('touchmove', touchMove, true);
	};

	that.onInitRunScripts = function() {
	initCanvas();
	};

	var initCanvas = function() {
	myCanvas = document.querySelector('#myCanvas');
	var ctx = myCanvas.getContext('2d');
	ctx.beginPath();
	ctx.moveTo(25, 25);
	ctx.lineTo(200, 0);
	ctx.lineTo(200, 100);
	ctx.lineTo(25, 75);
	ctx.closePath();
	ctx.fillStyle = 'dd0000';
	ctx.fill();
	};

	var touchStart = function(e) {
	touchX = e.touches[0].pageX; // hier könnte man sich z.B. den startPunkt merken
	};

	var touchMove = function(e) {
	myCanvas.style.webkitTransform = 'translateX(' + e.touches[0].pageX + 'px)';
	};

	return that;

	};

	window.addEventListener('load', function() {
	new de.lefloh.Slider().init(); // dat foo brauchen wir nich ;)
	}, false);

	</script>
	</head>
	<body>
	<canvas id="myCanvas">your browser is lousy</canvas>
	<body>