creating a class

Discussion in 'Javascript' started by windandwaves, Jul 6, 2007.

  1. windandwaves

    windandwaves Guest

    Hi Folk

    I just wrote a function (see below). Now, it occurred to me that it
    is hard to use the same function on a page twice and at the same
    time. How would I change the function below into an object / class
    that:
    - I can use twice at the same time
    - the variables don't affect other variables that maybe used on the
    page (i.e. take them out the global domain)



    Hope that makes sense.

    Thank you.


    //you can set these variables
    var totalTime = 1000;//in milliseconds
    var startOpacity = 99.9999; // starting point for fade
    var stopOpacity = 0; //end point for fade
    var numberOfSteps = 30; //number of steps

    //other variables
    var speed; //in milliseconds
    var opacity; //starting point
    var step; //interval for each one
    var div;
    var startOpacity;

    function startFade(elName){
    opacity = startOpacity;
    step = (stopOpacity - startOpacity) / numberOfSteps;
    speed = totalTime / numberOfSteps;
    div = document.getElementById(elName);
    repeatFade();
    return true;
    }


    function repeatFade() {
    opacity += step;
    var last = false;
    if(Math.abs(stopOpacity - opacity) < Math.abs(step)) {
    opacity = stopOpacity;
    last = true;
    }
    if(opacity >= 0 && opacity <= 100) {
    div.style.filter = "alpha(opacity="+Math.round(opacity)+")";// IE/
    Winfilter: alpha(opacity=50)
    div.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
    div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
    div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
    Mozilla, CSS3
    if(last == false) {
    window.setTimeout("repeatFade()", speed);
    }
    }
    }
     
    windandwaves, Jul 6, 2007
    #1
    1. Advertising

  2. On Jul 5, 7:18 pm, windandwaves <> wrote:
    > Hi Folk
    >
    > I just wrote a function (see below). Now, it occurred to me that it
    > is hard to use the same function on a page twice and at the same
    > time. How would I change the function below into an object / class
    > that:
    > - I can use twice at the same time
    > - the variables don't affect other variables that maybe used on the
    > page (i.e. take them out the global domain)
    >
    > Hope that makes sense.
    >
    > Thank you.
    >
    > //you can set these variables
    > var totalTime = 1000;//in milliseconds
    > var startOpacity = 99.9999; // starting point for fade
    > var stopOpacity = 0; //end point for fade
    > var numberOfSteps = 30; //number of steps
    >
    > //other variables
    > var speed; //in milliseconds
    > var opacity; //starting point
    > var step; //interval for each one
    > var div;
    > var startOpacity;
    >
    > function startFade(elName){
    > opacity = startOpacity;
    > step = (stopOpacity - startOpacity) / numberOfSteps;
    > speed = totalTime / numberOfSteps;
    > div = document.getElementById(elName);
    > repeatFade();
    > return true;
    >
    > }
    >
    > function repeatFade() {
    > opacity += step;
    > var last = false;
    > if(Math.abs(stopOpacity - opacity) < Math.abs(step)) {
    > opacity = stopOpacity;
    > last = true;
    > }
    > if(opacity >= 0 && opacity <= 100) {
    > div.style.filter = "alpha(opacity="+Math.round(opacity)+")";// IE/
    > Winfilter: alpha(opacity=50)
    > div.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
    > div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
    > div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
    > Mozilla, CSS3
    > if(last == false) {
    > window.setTimeout("repeatFade()", speed);
    > }
    > }
    >
    > }


    You don't need a class or object. Just functions and closures are the
    cleanest options for this sort of animation. Just moving some of your
    code around I get the following untested code. This is roughly how I
    do anmiations.

    function startFade(elName){

    //you can set these variables
    var totalTime = 1000;//in milliseconds
    var startOpacity = 99.9999; // starting point for fade
    var stopOpacity = 0; //end point for fade
    var numberOfSteps = 30; //number of steps

    //other variables
    var speed; //in milliseconds
    var opacity; //starting point
    var step; //interval for each one
    var div;
    var startOpacity;

    opacity = startOpacity;
    step = (stopOpacity - startOpacity) / numberOfSteps;
    speed = totalTime / numberOfSteps;
    div = document.getElementById(elName);

    function repeatFade() {
    opacity += step;
    var last = false;
    if(Math.abs(stopOpacity - opacity) < Math.abs(step)) {
    opacity = stopOpacity;
    last = true;
    }
    if(opacity >= 0 && opacity <= 100) {
    div.style.filter = "alpha(opacity="+Math.round(opacity)+")";// IE/
    Winfilter: alpha(opacity=50)
    div.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
    div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
    div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
    Mozilla, CSS3
    if(last == false) {
    window.setTimeout("repeatFade()", speed);
    }
    }

    }

    repeatFade();
    return true;
    }




    Peter
     
    Peter Michaux, Jul 6, 2007
    #2
    1. Advertising

  3. windandwaves

    RobG Guest

    On Jul 6, 12:18 pm, windandwaves <> wrote:
    > Hi Folk
    >
    > I just wrote a function (see below). Now, it occurred to me that it
    > is hard to use the same function on a page twice and at the same
    > time. How would I change the function below into an object / class
    > that:


    Using terminology like "class" in javascript is really only
    appropriate for those who know about classic OO programming, and even
    then it often confuses when applied to javascript. Just think of
    Objects. :)

    > - I can use twice at the same time
    > - the variables don't affect other variables that maybe used on the
    > page (i.e. take them out the global domain)


    Rather than convert your code, I'll give you a strategy for creating a
    constructor that you can use to create as many objects as you like
    using javascript prototype inheritance.

    You crate a function to use as a constructor, it adds properties to
    individual instances of the objects you are going to create. You then
    add the shared properties to the constructor's prototype property -
    pretty simple really. I suggest you try it with something really
    simple first, like a constructor that adds a single property and a
    prototpye that supplies a single method[1].


    // Declare a function to use as a constructor
    function Fader(arg0, arg1, ...){

    // Add properties that each instance of new
    // object should have to themselves
    this.totalTime = arg0;
    this.startOpacity = arg1;
    this.stopOpacity = arg2;
    this.numberOfSteps = arg3;
    ...

    // The methods that each instance of new
    // object should have to themselves
    this.method0 = function(){ ... }
    this.method1 = function(){ ... }
    }

    Now add methods and variables to the Fader prototype that you want
    constructed Fader objects to share:

    Fader.prototype.startFade = function(el) {
    var step = (this.stopOpacity-this.startOpacity)/this.numberOfSteps;
    ...
    }

    And so on. Now you can do:

    var fader0 = new Fader(100, 0, 100, ...);
    fader0.startFade(el);

    Have a go and see how far you get. :)

    When you think you've mastered that, you can start to look at more
    advanced strategies such as that proposed by Richard Cornford here:

    <URL: http://www.litotes.demon.co.uk/js_info/private_static.html >


    1. e.g.

    function Foo(arg){
    this.name = arg;
    }

    Foo.prototype.sayName = function(){
    alert(this.name);
    }

    var bar = new Foo('bar');
    bar.sayName(); // Shows 'bar'



    --
    Rob
     
    RobG, Jul 6, 2007
    #3
  4. windandwaves

    RobG Guest

    On Jul 6, 6:28 pm, -Lost <> wrote:
    > RobG wrote:
    > > On Jul 6, 12:18 pm, windandwaves <> wrote:
    > >> Hi Folk

    >
    > >> I just wrote a function (see below). Now, it occurred to me that it
    > >> is hard to use the same function on a page twice and at the same
    > >> time. How would I change the function below into an object / class
    > >> that:

    >
    > > Using terminology like "class" in javascript is really only
    > > appropriate for those who know about classic OO programming, and even
    > > then it often confuses when applied to javascript. Just think of
    > > Objects. :)

    >
    > Tell that to David Flanagan who specifically states, "In addition to
    > functions and arrays, core JavaScript defines a few other specialized
    > kinds of objects. These objects do not represent new datatypes, just
    > new /classes/ of objects."


    My comments were in regard to the confusion caused when people discuss
    javascript in terms of classic OO features. Those new to javascript
    and who are familiar with say C++ or Java immediately view javascript
    "classes" in terms of those languages. Subsequently they are often
    disappointed or confused when things don't go as expected - much like
    the usage of hash or associative array, but let's not start that
    again! :)

    I can't add anything to the footnote add by Richard Cornford to his
    article "Private Static Members in Javascript" headed:

    "Note: The Applicability of the Terminology from Class-Based Languages
    to Javascript."
    <URL: http://www.litotes.demon.co.uk/js_info/private_static.html#nTerm
    >



    [...]

    > Thereby any declaration of a function with "private" member
    > variables is essentially a class, at least by Flanagan's explanation.


    QED - whether a javascript constructor has "private member variables"
    or not is irrelevant:

    function Foo(){};
    var x = new Foo();

    the fact that Foo is a function means it can be used as a
    constructor. Similarly, the fact that an object was constructed from
    a particular object doesn't mean it necessarily inherits *anything*
    from its constructor - you can re-assign its prototype, add to the
    scope chain, shadow properties and so on.


    > Whilst I understand this concept, I was quite happy in the knowledge
    > that these were constructors, not classes with constructors. And now
    > instead of instantiating new objects of type *whatever*, I am using a
    > "class" that returns objects, to which an identifier is assigned.


    If you are comfortable with that, fine. I just think that for anyone
    learning javascript terms like "class" or "private member" should be
    introduced solely as hints to behaviour, not as fundamental components
    of the language.


    --
    Rob
     
    RobG, Jul 6, 2007
    #4
  5. On Jul 6, 1:28 am, -Lost <> wrote:
    > RobG wrote:
    > > On Jul 6, 12:18 pm, windandwaves <> wrote:
    > >> Hi Folk

    >
    > >> I just wrote a function (see below). Now, it occurred to me that it
    > >> is hard to use the same function on a page twice and at the same
    > >> time. How would I change the function below into an object / class
    > >> that:

    >
    > > Using terminology like "class" in javascript is really only
    > > appropriate for those who know about classic OO programming, and even
    > > then it often confuses when applied to javascript. Just think of
    > > Objects. :)

    >
    > Tell that to David Flanagan who specifically states, "In addition to
    > functions and arrays, core JavaScript defines a few other specialized
    > kinds of objects. These objects do not represent new datatypes, just
    > new /classes/ of objects."
    >
    > He then goes on to call Date, RegExp, and Error specifically, classes.


    David Flanagan also writes books on Java and some of that terminology
    leaks into the JavaScript book.

    -Peter
     
    Peter Michaux, Jul 6, 2007
    #5
  6. windandwaves

    Guest

    On Jul 5, 7:18 pm, windandwaves <> wrote:
    > Hi Folk
    >
    > I just wrote a function (see below). Now, it occurred to me that it
    > is hard to use the same function on a page twice and at the same
    > time. How would I change the function below into an object / class
    > that:
    > - I can use twice at the same time
    > - the variables don't affect other variables that maybe used on the
    > page (i.e. take them out the global domain)
    >
    > Hope that makes sense.
    >
    > Thank you.
    >
    > //you can set these variables
    > var totalTime = 1000;//in milliseconds
    > var startOpacity = 99.9999; // starting point for fade
    > var stopOpacity = 0; //end point for fade
    > var numberOfSteps = 30; //number of steps
    >
    > //other variables
    > var speed; //in milliseconds
    > var opacity; //starting point
    > var step; //interval for each one
    > var div;
    > var startOpacity;
    >
    > function startFade(elName){
    > opacity = startOpacity;
    > step = (stopOpacity - startOpacity) / numberOfSteps;
    > speed = totalTime / numberOfSteps;
    > div = document.getElementById(elName);
    > repeatFade();
    > return true;
    >
    > }
    >
    > function repeatFade() {
    > opacity += step;
    > var last = false;
    > if(Math.abs(stopOpacity - opacity) < Math.abs(step)) {
    > opacity = stopOpacity;
    > last = true;
    > }
    > if(opacity >= 0 && opacity <= 100) {
    > div.style.filter = "alpha(opacity="+Math.round(opacity)+")";// IE/
    > Winfilter: alpha(opacity=50)
    > div.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
    > div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
    > div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
    > Mozilla, CSS3
    > if(last == false) {
    > window.setTimeout("repeatFade()", speed);
    > }
    > }
    >
    > }


    Create a constructor function and a prototype for the instance method.

    function Fade() {

    }

    Fade.prototype = {

    activate : function fadeIn() {

    }

    ,deactivate : function fadeOut() {


    };

    I would consider:

    * using a base class Effect and extending that. You can use
    aggregation to build up widgets with Effect instances.
    * using a decorator pattern to decorate the base class.
    * Having Effect subclasses take a Widget as a parameter argument.
    This would make it easy to wire in event subscription.


    For extension, I recommend looking at YAHOO.extend();

    YAHOO.extend(Fade, Effect, {

    // Your override instance methods here.
    });

    Then you program to the Interface of Effect and have activate and
    deactivate.
     
    , Jul 7, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. E11
    Replies:
    1
    Views:
    4,800
    Thomas Weidenfeller
    Oct 12, 2005
  2. christopher diggins
    Replies:
    16
    Views:
    761
    Pete Becker
    May 4, 2005
  3. Josh Mcfarlane
    Replies:
    2
    Views:
    343
    Josh Mcfarlane
    Aug 18, 2005
  4. Joseph Turian
    Replies:
    5
    Views:
    602
  5. gentlestone
    Replies:
    6
    Views:
    954
    Bruno Desthuilliers
    Oct 6, 2009
Loading...

Share This Page