How to initial a object properties by functions?

Discussion in 'Javascript' started by Cylix, Jul 6, 2006.

  1. Cylix

    Cylix Guest

    The following example are going to create an object to store the client
    Information,
    I would like to new the object to init all the properties by function:
    setProperty()
    Can I set the value to the object without using the global variable ?

    Thank you.

    ///---------------The object -------------------------------
    function clientENV {
    var detect = navigator.userAgent.toLowerCase();
    this.os;
    this.browser;
    this.version;

    setProperty();
    }

    ///-------------Function------------------------------------
    var theString, place, OS, browser, version;
    function setProperty() {
    if (checkIt('msie')) browser = "Internet Explorer"
    else if (checkIt('Firefox')) browser = "Safari"
    else if (checkIt('safari')) browser = "Safari"
    else if (checkIt('omniweb')) browser = "OmniWeb"
    else if (checkIt('opera')) browser = "Opera"
    else if (checkIt('webtv')) browser = "WebTV";
    else if (checkIt('icab')) browser = "iCab"
    else if (checkIt('konqueror')) {
    browser = "Konqueror";
    OS = "Linux";
    } else if (!checkIt('compatible')) {
    browser = "Netscape Navigator"
    version = detect.charAt(8);
    }
    else browser = "An unknown browser";

    if (!version) version = detect.charAt(place + thestring.length);

    if (!OS) {
    if (checkIt('linux')) OS = "Linux";
    else if (checkIt('x11')) OS = "Unix";
    else if (checkIt('mac')) OS = "Mac"
    else if (checkIt('win')) OS = "Windows"
    else OS = "an unknown operating system";
    }
    }

    function checkIt(string) {
    place = detect.indexOf(string) + 1;
    thestring = string;
    return place;
    }
    Cylix, Jul 6, 2006
    #1
    1. Advertising

  2. Cylix wrote:
    > The following example are going to create an object to
    > store the client Information, I would like to new the
    > object to init all the properties by function:

    setProperty()
    > Can I set the value to the object without using the
    > global variable ?
    >
    > Thank you.
    >
    > ///---------------The object -----------------------
    > function clientENV {

    ^^
    There should be an arguments list in this (potentially empty) if this is
    intended to be a function declaration.

    > var detect = navigator.userAgent.toLowerCase();


    Your - detect - variable appears to be local but you are using it as if
    it was global (referencing it in other functions). Passing values
    between functions via global variables is a very bad design pattern. You
    should pass such values as arguments to the functions or properties of
    objects for which those functions are methods.

    > this.os;
    > this.browser;
    > this.version;
    >
    > setProperty();
    > }


    If you mean that you want this - setProperty - function to act upon an
    object created using - new clientENV() - then you make - setProperty -
    into a method of the resulting object, probably by assigning it to the
    prototype of - clientENV -:-

    clientENV.prototype.setProperty = function(){
    if(something){
    this.propertyName = 'x';
    }
    // etc.
    };

    - and call it in the constructor as:-

    this.setProperty();

    > ///-------------Function-----------------------------
    > var theString, place, OS, browser, version;
    > function setProperty() {
    > if (checkIt('msie')) browser = "Internet Explorer"
    > else if (checkIt('Firefox')) browser = "Safari"
    > else if (checkIt('safari')) browser = "Safari"
    > else if (checkIt('omniweb')) browser = "OmniWeb"
    > else if (checkIt('opera')) browser = "Opera"
    > else if (checkIt('webtv')) browser = "WebTV";
    > else if (checkIt('icab')) browser = "iCab"
    > else if (checkIt('konqueror')) {
    > browser = "Konqueror";
    > OS = "Linux";
    > } else if (!checkIt('compatible')) {
    > browser = "Netscape Navigator"
    > version = detect.charAt(8);
    > }

    <snip>

    This is browser detection. Browser detection is an utterly futile
    activity that has been abandoned in favour of better alternatives (at
    least by everyone who knows what they are doing). If you are only just
    starting to learn browser scripting (which is the obvious conclusion
    from what you have posted here) then you should not even attempt to go
    in the browser detection direction as eventually you will have to
    re-trace your steps and learn proper feature detection (and everything
    you write in the meanwhile will be very poor at best).

    <URL: http://jibbering.com/faq/faq_notes/not_browser_detect.html >

    Richard.
    Richard Cornford, Jul 6, 2006
    #2
    1. Advertising

  3. Cylix

    RobG Guest

    Cylix wrote:
    > The following example are going to create an object to store the client
    > Information,
    > I would like to new the object to init all the properties by function:
    > setProperty()
    > Can I set the value to the object without using the global variable ?


    Richard's response is pretty good, I prepared this before seeing his so
    I'll post it anyway.

    Without commenting on the actual example, what you are trying to do is
    fairly common: you want a small object that also has methods to set its
    own values, but you don't want all the methods replicated inside each
    and every instance of the object. That's what JavaScript's prototype
    inheritance is good at.

    Have the constructor set the values, add the methods to the
    constructor's prototype. As a cut-down version of your script:

    // By convention, constructors start with a capital letter
    function ClientENV()
    {
    // Set some default property values - not really necessary
    // But keeps things tidy
    this.os = 'default';
    this.browser = 'default';
    this.platform = 'default';

    // Call setProperties, pass reference to the
    // object being constructed
    this.setProperties(this);
    }

    // Add the setProperties function as a method of the
    // constructor's prototype so it's only one object, not
    // a new instance for every object created
    ClientENV.prototype.setProperties = function(obj)
    {
    obj.os = 'blah OS';
    obj.browser = 'blah Browser';
    }

    var thisENV = new ClientENV();


    alert(thisENV.os + '\n' + thisENV.browser
    + '\n' + thisENV.platform);


    Of course, using the above is moot since you are likely to only create
    one 'thisENV' object anyway, so you might be better to use:

    var thisENV = getENVProperties();

    Where getENVProperties() returns an object with appropriate
    properties/values:

    function getENVProperties ()
    {
    var tempObj = {};
    tempObj.os = 'blah OS';
    tempObj.browser = 'blah Browser';
    return tempObj;
    }

    I think that's simpler and the outcome is pretty much identical.

    [...]

    --
    Rob
    RobG, Jul 6, 2006
    #3
  4. Cylix

    Cylix Guest

    Richard Cornford wrote:

    > <snip>
    >
    > This is browser detection. Browser detection is an utterly futile
    > activity that has been abandoned in favour of better alternatives (at
    > least by everyone who knows what they are doing). If you are only just
    > starting to learn browser scripting (which is the obvious conclusion
    > from what you have posted here) then you should not even attempt to go
    > in the browser detection direction as eventually you will have to
    > re-trace your steps and learn proper feature detection (and everything
    > you write in the meanwhile will be very poor at best).


    I heard a lot of time about these thing, but sometimes ...
    I really need to detect the client environment,
    for example, I am going to use AJAX, but some of older browser does not
    support that,
    I need to mention the reason to the client and show the client a more
    static page.
    How can I present it better?

    Thank you.
    Cylix, Jul 6, 2006
    #4
  5. Cylix

    RobG Guest

    RobG wrote:
    [...]
    > // By convention, constructors start with a capital letter
    > function ClientENV()
    > {
    > // Set some default property values - not really necessary
    > // But keeps things tidy
    > this.os = 'default';
    > this.browser = 'default';
    > this.platform = 'default';
    >
    > // Call setProperties, pass reference to the
    > // object being constructed
    > this.setProperties(this);


    Hey, musta been asleep ... don't need to pass this:

    this.setProperties();

    > }
    >
    > ClientENV.prototype.setProperties = function(obj)
    > {
    > obj.os = 'blah OS';
    > obj.browser = 'blah Browser';
    > }


    And setProperties is:

    ClientENV.prototype.setProperties = function()
    {
    this.os = 'blah OS';
    this.browser = 'blah Browser';
    }


    --
    Rob
    RobG, Jul 6, 2006
    #5
  6. "Cylix" <> writes:

    > I really need to detect the client environment,
    > for example, I am going to use AJAX, but some of older browser does not
    > support that,
    > I need to mention the reason to the client and show the client a more
    > static page.


    The test for the existence of an XMLHttpRequest object through the
    known methods of acquireing one: global XMLHttpRequest constructor
    or IE's ActiveX-controls.
    There are known ways of checking this:
    <URL:http://jibbering.com/2002/4/httprequest.html>

    > How can I present it better?


    Make the page default to the static behavior if Javascript is disabled
    or if there is no XMLHttpRequest object. Then change behavior if it
    is possible.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jul 6, 2006
    #6
  7. Cylix wrote:
    > Richard Cornford wrote:
    >> <snip>
    >> This is browser detection. Browser detection is an utterly
    >> futile activity that has been abandoned in favour of better
    >> alternatives (at least by everyone who knows what they are
    >> doing). ...

    <snip>

    > I heard a lot of time about these thing, but sometimes ...
    > I really need to detect the client environment,


    In the event that you find a situation where you really need to detect
    the browser being used you will have a problem as no mechanism is known
    that can reliable do that, and examining the contents of the -
    navigator.userAgent - string is easily the least discriminating strategy
    available.

    > for example, I am going to use AJAX, but some of older
    > browser does not support that,


    Some absolute brand new browsers will not support it either, but the
    tests you are performing have little practical relationship with a
    browsers ability (or even potential ability) to do AJAX. Logically, in
    order to determine a browser's ability to do AJAX from browse detection
    it would first be necessary to know which versions of which browsers
    provide an XML HTTP request facility. Do you know, for example, which
    minor version of IceBrowser introduced support for XML HTTP requests?

    Knowing which versions of which browsers support XML HTTP requests it
    becomes necessary to discriminate those browsers from the ones that do
    not. While the code you are proposing using will not even discriminate
    between IE and Opera (if Opera is using one of its variable User Agent
    strings). How are you planning on identifying IceBrowser, let alone
    discriminate between its versions sufficiently to identify its support
    for AJAX?

    However, on a browser as common as IE 6 the ability to employ XML HTTP
    requests is guaranteed by the type or version of the browsers. The XML
    HTTP request object is an ActiveX component outside of the browser so it
    may be removed from the system independently from the browser. In
    addition, even if the ActiveX object is installed on the system IE's
    security settings are allowed to veto the availability of various
    categories of ActiveX controls. And finally Internet security programs
    may effectively block the use of ActiveX objects as a security measure.

    > I need to mention the reason to the client and show the
    > client a more static page.
    > How can I present it better?


    The most reliable method of determining that you have an ability to
    employ an XML HTTP request object is to attempt to instantiate one. If
    you cannot do that then you may as well fall back to your alternative.
    Though in reality any application of AJAX will depend on the browser
    providing facilities well beyond the simple XML HTTP request object, so
    they should also be feature detected as well.

    Richard.
    Richard Cornford, Jul 6, 2006
    #7
  8. Cylix

    Cylix Guest

    Thanks Rob and Richard.

    I think I abuse to use the term AJAX,
    Actually, I just doing the thing like AJAX but not using XML http
    request.

    My case is that, I need to using javascript to generate the whole
    table,
    you may think that it is a grid.

    I have already test the js and get the interface in
    PC {IE6, Firefox1.5}, Mac {Safari1.3.1, IE5.2}

    As my boss using Mac IE5.2, I have to ensure it works on Mac IE5.2.
    However, I find that one of important page cannot show on Mac IE5.2
    properly,
    the reason seems a bug of Mac IE5.2.

    The bug is that when I using js(using createElement of
    insertRow+insertCell),
    If the innerHTML(or createElement('img') and then append on it)
    contains <img> or any other HTML tag(I have tried IMG and SPAN only),
    there is a great space around 300px on the cell, It doesn't matter that
    I have other CSS to control the width.

    One more problem that is Mac IE tabledata(td) seems doesn't have
    colSpan property...
    Cylix, Jul 7, 2006
    #8
  9. Cylix

    Cylix Guest

    RobG wrote:
    > And setProperties is:
    >
    > ClientENV.prototype.setProperties = function()
    > {
    > this.os = 'blah OS';
    > this.browser = 'blah Browser';
    > }


    What is the differnece if I set the setProperties like this:
    function clientENV {
    ....
    ....
    this.setProperties=setP
    }

    function setP {
    ....
    ....
    }

    Actually, I will create this object when the pages onLoad,
    I just need the property variable but no need the function
    setProperties on the object,
    Does there a way that when I "new clientENV", the properties is set
    already and the clientENV only contain the proper value?

    Thanks.
    Cylix, Jul 7, 2006
    #9
  10. Cylix

    RobG Guest

    Cylix wrote:
    > RobG wrote:
    >> And setProperties is:
    >>
    >> ClientENV.prototype.setProperties = function()
    >> {
    >> this.os = 'blah OS';
    >> this.browser = 'blah Browser';
    >> }

    >
    > What is the differnece if I set the setProperties like this:
    > function clientENV {
    > ...
    > ...
    > this.setProperties=setP
    > }
    >
    > function setP {
    > ...
    > ...
    > }
    >
    > Actually, I will create this object when the pages onLoad,
    > I just need the property variable but no need the function
    > setProperties on the object,
    > Does there a way that when I "new clientENV", the properties is set
    > already and the clientENV only contain the proper value?


    The only decision you have to make is whether to add the setP function
    to the global (window) object or the ClientENV constructor's prototype.

    Either way, the end result is the same - you have a setP object and an
    ENV object with its properties set.

    If you have a large and complex application, and setP only relates to
    the ENV object, then making it a property of the constructor makes sense
    from a house keeping (i.e. architectural) viewpoint. But if you have a
    simple application - just a page with a few functions - then that seems
    unnecessary. I wouldn't even have a constructor, I'd just do:

    var ENV = setENVprops();

    function setENVprops(){
    var tObj = {};
    // set tObj properties
    return tObj;
    }


    --
    Rob
    RobG, Jul 7, 2006
    #10
    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. Ken Baltrinic
    Replies:
    3
    Views:
    7,747
    Oscar kind
    Sep 26, 2004
  2. Xiangliang Meng
    Replies:
    1
    Views:
    1,568
    Victor Bazarov
    Jun 21, 2004
  3. Bora Eryilmaz
    Replies:
    1
    Views:
    344
    Victor Bazarov
    Apr 18, 2005
  4. George
    Replies:
    51
    Views:
    1,568
  5. SuperZE
    Replies:
    5
    Views:
    323
    SuperZE
    Oct 6, 2008
Loading...

Share This Page