Topic awaiting preservation: I need to get object oriented in JS... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8368" title="Pages that link to Topic awaiting preservation: I need to get object oriented in JS..." rel="nofollow" >Topic awaiting preservation: I need to get object oriented in JS...\$

Author	Thread
DmS Paranoid (IV) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 10-29-2002 14:47 Now, this is probably the most basic stuff I could ask on OOP in JS... But what the heck, I need to learn this. (I've done some very basic C a long time ago but never used it) Basically, I've read several different tutorials on OOP in JS (this for example http://www.webmasterbase.com/article/470 ), but my remaining brain cells can't seem to absorb it... So, I started on my own... This is what I want: A simple class with two methods that I can initialize and control from another function. What should it do? 1. On initialize, do nada nothing at all. 2. When I call a method after initializing the class, run just that method. 3. If I call two methods, run those two... Basically I'd later like to be able to create some classes of my own with different useful methods. Sounds like a piece of cake yeah... right... I've set up this to start testing: code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>DmS Doh...</title> <script language="JavaScript" type="text/javascript"> //one function that will act as 2 different methods function showIt(){ for(i=0;i<arguments.length;i++){ alert("arg "+i+" "+ arguments[i]); } alert("done"); } //my "so called" class/constructor/whatever... function doIt(txt,def){ this.txt = txt; this.def = def; this.method1 = showIt(txt); this.method2 = showIt(txt,def); } //to start it up... function test(txt,def){ hi = new doIt(txt,def); hi.method1; hi.method2; } </script> </head> <body> <a href="javascript:void(0);" onclick="test('my text','more text');">click</a> </body> </html> Now what happens? This is what it does: 1. On initialize, it runs the whole function with the "methods". 2. When I call a method after initializing the class, it won't run that method. 3. If I call two methods... it won't run those two... I think this has to do with prototypes... but I realize that I really have no clue... Any one care to explain this to me in a way that I might understand? /Dan {cell 260} -{ a vibration is a movement that doesn't know which way to go }-
Dracusis Maniac (V) Inmate From: Brisbane, Australia Insane since: Apr 2001	posted 10-29-2002 15:36 Heh, I remember hitting that wall not long after I finally learnt what OO programming was, only I was comming from PHP. OO in Javascript is a bit weird. You set up a constructor like you would any other function: function myClassMaker() { code... code... code... } setting properties of that object can be done within the inital constructor or within methods using the this keyword as you've done in the code above. Making the object is the same too: myObject = new myClassMaker() But for methods we use the prototype constructor like so: myClassMaker.prototype.myMethod = function() { code... code... code... } which you could then call through: myObject.myMethod() At least that's how I've always done it. The scroller I made recently uses OO Javascript to make cross browser scripting a lot easier, you could check that out if your looking for a working example. Edit, muffed a [ b ] [This message has been edited by Dracusis (edited 10-29-2002).]
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 10-29-2002 15:45 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
Dracusis Maniac (V) Inmate From: Brisbane, Australia Insane since: Apr 2001	posted 10-29-2002 15:49 Arrr... thanks InI. That explains a lot. I never really understood why I had to do it this way but I do now.
DmS Paranoid (IV) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 10-29-2002 19:02 Thank you both, I figured out the problem in my case (besides using a terminology that didn't apply and a disconnected brain... Thanx InI) This works as I thought: code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>DmS Doh...</title> <script language="JavaScript" type="text/javascript"> //one function that will act as 2 different methods function showIt(){ for(i=0;i<arguments.length;i++){ alert("arg "+i+" "+ arguments[i]); } alert("done"); } //my constructor function doIt(txt,def){ this.txt = txt; this.def = def; this.methOne = showIt; this.methTwo = showIt; } //to start it up... function test(txt,def){ hi = new doIt(); hi.methOne(txt); hi.methTwo(txt,def); } </script> </head> <body> <a href="javascript:void(0);" onclick="test('my text','more text');">click</a> </body> </html> The main problem with my first example seems to be that I was passing parameters to my "methods" in the constructor, as well as in the creation of the object instead of in the method calls. This ran all the methods at initialization and not at all in the calls to the methods. Phew, now I got the absolute basics down, back to applying this into something more useful. <so much code to learn, so little time> I'll be back once I hit the next wall, believe me Thanx/Dan {cell 260} -{ a vibration is a movement that doesn't know which way to go }-
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-29-2002 19:17 Well while I'm fiddling with the FAQ I started one on this important subject too: http://faq.ozoneasylum.com/876/ ___________________ Emps FAQs: Emperor
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 10-29-2002 19:48 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 10-29-2002 20:16 quote: Don't forget to "return this", so the caller actually receives something: var V = new Vector(); This is actually unnecessary. You don't need to put "return this" at the end of a constructor, since the "new" operator takes care of that for you: the "new" operator creates a new object, runs the function provided as its constructor, and then returns the new object. You don't need to explicitly return anything from the function; in fact, doing so will have no effect.
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 10-29-2002 20:27 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 10-29-2002 20:47 Hahaha, yeah, sorry =)
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 10-29-2002 20:55 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
DmS Paranoid (IV) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 10-29-2002 22:06 Thank you very much ppl, the fog is finally starting to lift (for now anyways ). I knew this was the right place to ask and this only confirms it. I'm currently trying to apply this to create and modify stuff directly through the DOM and it's a lot easier to do this when you can access all methods in one place (I'm sure this is already done multiple times, but it's a great learning example) sidenote > I thought IE6 and Mozilla were about equal in their DOM support, but things that work fine in Moz gives wierd errors in IE, ah, well, I might very well be doing it wrong at this point Thanx/Dan {cell 260} -{ a vibration is a movement that doesn't know which way to go }-

Topic awaiting preservation: I need to get object oriented in JS...\$

Author

Thread

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 10-29-2002 14:47

Now, this is probably the most basic stuff I could ask on OOP in JS...
But what the heck, I need to learn this. (I've done some very basic C a long time ago but never used it)
Basically, I've read several different tutorials on OOP in JS (this for example http://www.webmasterbase.com/article/470 ), but my remaining brain cells can't seem to absorb it...
So, I started on my own...

This is what I want:
A simple class with two methods that I can initialize and control from another function.
What should it do?
1. On initialize, do nada nothing at all.
2. When I call a method after initializing the class, run just that method.
3. If I call two methods, run those two...

Basically I'd later like to be able to create some classes of my own with different useful methods.
Sounds like a piece of cake yeah... right...

I've set up this to start testing:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<html>

<head>

	<title>DmS Doh...</title>

    <script language="JavaScript" type="text/javascript">

    //one function that will act as 2 different methods

    function showIt(){

    for(i=0;i<arguments.length;i++){

        alert("arg "+i+" "+ arguments[i]);

        }

        alert("done");

    }    

    

    //my "so called" class/constructor/whatever...

    function doIt(txt,def){

        this.txt = txt;

        this.def = def;

        this.method1 = showIt(txt);

        this.method2 = showIt(txt,def);      

    }

    

    //to start it up...

    function test(txt,def){

        hi = new doIt(txt,def);

        hi.method1;

        hi.method2;

    }

    </script>

</head>



<body>

<a href="javascript:void(0);" onclick="test('my text','more text');">click</a>

</body>

</html>

Now what happens?
This is what it does:
1. On initialize, it runs the whole function with the "methods".
2. When I call a method after initializing the class, it won't run that method.
3. If I call two methods... it won't run those two...

I think this has to do with prototypes... but I realize that I really have no clue...
Any one care to explain this to me in a way that I might understand?
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted 10-29-2002 15:36

Heh, I remember hitting that wall not long after I finally learnt what OO programming was, only I was comming from PHP.

OO in Javascript is a bit weird.

You set up a constructor like you would any other function:

function myClassMaker() {
code...
code...
code...
}

setting properties of that object can be done within the inital constructor or within methods using the this keyword as you've done in the code above.

Making the object is the same too:

myObject = new myClassMaker()

But for methods we use the prototype constructor like so:

myClassMaker.prototype.myMethod = function() {
code...
code...
code...
}

which you could then call through: myObject.myMethod()

At least that's how I've always done it. The scroller I made recently uses OO Javascript to make cross browser scripting a lot easier, you could check that out if your looking for a working example.

Edit, muffed a [ b ]

[This message has been edited by Dracusis (edited 10-29-2002).]

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 10-29-2002 15:45

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted 10-29-2002 15:49

Arrr... thanks InI. That explains a lot. I never really understood why I had to do it this way but I do now.

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 10-29-2002 19:02

Thank you both, I figured out the problem in my case (besides using a terminology that didn't apply and a disconnected brain... Thanx InI)

This works as I thought:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<html>

<head>

	<title>DmS Doh...</title>

    <script language="JavaScript" type="text/javascript">

    //one function that will act as 2 different methods

    function showIt(){

    for(i=0;i<arguments.length;i++){

        alert("arg "+i+" "+ arguments[i]);

        }

        alert("done");

    }    

    

    //my constructor

    function doIt(txt,def){

        this.txt = txt;

        this.def = def; 

        this.methOne = showIt;

        this.methTwo = showIt;

    }

    

    //to start it up...

    function test(txt,def){

        hi = new doIt();

        hi.methOne(txt);

        hi.methTwo(txt,def);

    }

    </script>

</head>



<body>

<a href="javascript:void(0);" onclick="test('my text','more text');">click</a>

</body>

</html>

The main problem with my first example seems to be that I was passing parameters to my "methods" in the constructor, as well as in the creation of the object instead of in the method calls. This ran all the methods at initialization and not at all in the calls to the methods.

Phew, now I got the absolute basics down, back to applying this into something more useful.
<so much code to learn, so little time>
I'll be back once I hit the next wall, believe me
Thanx/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-29-2002 19:17

Well while I'm fiddling with the FAQ I started one on this important subject too:
http://faq.ozoneasylum.com/876/

___________________
Emps

FAQs: Emperor

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 10-29-2002 19:48

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 10-29-2002 20:16

quote:
Don't forget to "return this", so the caller actually receives something:

var V = new Vector();

This is actually unnecessary. You don't need to put "return this" at the end of a constructor, since the "new" operator takes care of that for you: the "new" operator creates a new object, runs the function provided as its constructor, and then returns the new object. You don't need to explicitly return anything from the function; in fact, doing so will have no effect.

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 10-29-2002 20:27

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 10-29-2002 20:47

Hahaha, yeah, sorry =)

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 10-29-2002 20:55

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 10-29-2002 22:06

Thank you very much ppl, the fog is finally starting to lift (for now anyways ).

I knew this was the right place to ask and this only confirms it.
I'm currently trying to apply this to create and modify stuff directly through the DOM and it's a lot easier to do this when you can access all methods in one place
(I'm sure this is already done multiple times, but it's a great learning example)

sidenote > I thought IE6 and Mozilla were about equal in their DOM support, but things that work fine in Moz gives wierd errors in IE, ah, well, I might very well be doing it wrong at this point
Thanx/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-