Javascript as OOP, basics

@mavigozlerAug 29.2009 — #The 'this' keyword within the scope of a constructor (function) would refer to the object being constructed, as you might expect.

But your scope is not within a constructor, but rather an associative object. The reference to 'this' should be to the global object, generally the 'window' object. Thus any assignment you make with 'this' get assigned to the global/window object. But the moment you try to [I]refer[/I] to a property or method (invoke a function), you get the error that the property or method was not previously defined. You defined that function 'addEvents' as part of the associative array IFrameDropDown, but the reference to 'this' was not a reference to object IFrameDropDown.

Try the following code (not tested!!), and see if it will act as you expect:

[CODE]function IFrameDropDown () {
 // object property initializations
 // make them properties--with 'this'---only if you want them to be 'public'
 // make them variables --with 'var'---if you want them to be 'private', as in a class
 this.topLeftX = "0px";
 this.topLeftY = "0px";
 this.width = "100px";
 this.height = "200px";
 this.url = "mvm.php";
 this.inputField = Object;  // maybe new Object(); ??
 // now your methods for the object
 this.init = function() {
 this.inputField = document.getElementById("whiteplayer");
 this.addEvents(this.inputField, "change");
 };
 this.addEvents = function(obj, e) {
 if (window.addEventListener) { // Mozilla, Netscape, Firefox
 obj.addEventListener(e, this.alerter, false);
 } else { // IE
 obj.attachEvent("on" + e, this.alerter);
 }
 };
 this.alerter = function() 	{
 alert("sdf");
 };
 this.setTopLeftX = function(x) {
 this.topLeftX = x + "px";
 };
 this.setTopLeftY = function(y) {
 this.topLeftY = y + "px";
 };
 }
 var frameDropDownObj = new IFrameDropDown();
 window.onload = frameDropDownObj.init;
 [/CODE]

You see, you basically have IFrameDropDown as an associative array created in global scope (not the kind of object you seek). Even as var in function scope, 'this' would refer to the global/window object. Only by calling the function as a constructor (requiring use of the 'new' keyword) would your scope be altered such that 'this' referred to the object (being) constructed.

But if you want to create multiple instances of the "interface," the constructor above should work for you.

@kukipeiauthorAug 29.2009 — #Thank you, mavigozler

you gave me right direction.

I just added this code:

[CODE]function pageLoader() {
 IFrameDropDown.init();
 }
 
 window.onload = pageLoader;[/CODE]

instead of
[CODE]window.onload = IFrameDropDown.init;[/CODE]

Javascript as OOP, basics

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript as OOP, basics

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴