Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Class Object and scope problems with return values

    Hi everyone, as you can probably tell, I'm new to this forum, and for the record, I'm pretty new at web development as well. I'm having a scope problem, and I haven't been able to find the answer on the forum yet, so I hope this is not a repost.

    I create a new object class and build up some html. This occurs in a .js file. In my HTML file, I import the JS source file, as would be expected. I can create the object, but I can't seem to get the return value from one of the functions.

    So here's the example (Class Foo, error occurs at getHTML):

    function Foo( a , b )
    {
    this.a = a ;
    this.b = b ;

    this.html = new String( "" ) ;

    this.makeSomeHtml = function()
    {
    this.html += "<html><body>hello world</body></html>" ;
    }

    this.getHTML = function()
    {
    return this.html ;
    }
    }

    // I've even tried this, but no luck
    function tryToGetMyHTML( a , b )
    {
    var myFoo = new Foo( a , b ) ;
    myFoo.makeSomeHtml() ;

    var str = myFoo.getHTML() ;

    alert( str ) ; // no luck here; already out of scope

    return str ;
    }

    Ok, so the HTML looks something like this:
    <HTML>
    <HEAD>
    <script type="text/javascript" language="JavaScript" src="Foo.js"></script>
    </HEAD>
    <BODY>
    <table><tr><td onmouseover="tryToGetMyHTML( 'val1' , 'val2' );">test</td></tr></table>
    </BODY>
    </HTML>


    Any help? It's really hard to find something online about javascript classes, much less scope and how to deal with this.

    In short: I need to create an object. Then I need to get a return value (a String) from that object by calling a function within the object.

    Any help at all is GREATLY APPRECIATED!!!!!

    Thanks!

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    Toronto, ON, Canada
    Posts
    231
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what is the problem, your example works in FF1.0.7 and IE6
    rm -f /

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What browser does this fail in?
    Code:
    <HTML>
    <HEAD>
    <script type="text/javascript">
    
    function Foo(a, b) {
      this.a = a;
      this.b = b;
      this.html = new String();
      this.makeSomeHtml = function() {this.html += "<html><body>hello world</body></html>";}
      this.getHTML = function() {return this.html;}
    }
    
    function tryToGetMyHTML(a, b) {
      var myFoo = new Foo(a, b);
      myFoo.makeSomeHtml();
      var str = myFoo.getHTML();
      alert( str ); // worked fine for me!
      return str;
    }
    
    </script>
    </HEAD>
    <BODY>
    <table><tr><td onmouseover="tryToGetMyHTML('val1','val2');">test</td></tr></table>
    </BODY>
    </HTML>
    worked fine in IE 6 and Firefox 1.0.6 ??

  • #4
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, this was a bad example; I tried it and it worked for me as well. I'm trying to compare my code right now with what I have done here, and I'll see if I can post something more like what I'm doing. I can't just post all of the code b/c there is a LOT to it.

    Thanks for the responses. I'll post within the next couple of hours a better example (and one that won't work ).

  • #5
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, this should do it.

    Here is what I created, which very closely mimics what I'm really trying to do. It does not work as is. Let me know what's wrong. I've tried to find gool tutorials on classes and scope in Javascript, but nothing too helpful yet.

    Thanks for the help!

    FYI: It craps out after the alert( "4" ) because after that alert is the first time I try to reference a variable from the class.

    foo.js

    function Foo ()
    {
    alert( "-1" ) ;
    this.dummyStr = new String( "" ) ;
    this.dummyDate = new Date() ;
    this.dummyArray = [ "1" , "2" , "3" , "4" , "5" , "6" ] ;

    this.dummyDate.setDate( 1 ) ;
    this.html = new String( "" ) ;
    alert( "0" ) ;

    createPage() ;
    }

    function startPage()
    {
    alert( "1" ) ;
    this.html += "<HTML>\n" ;
    }

    function startHeader()
    {
    alert( "2" ) ;
    this.html += "<Head>\n" ;
    }

    function endHeader()
    {
    alert( "3" ) ;
    this.html += "</Head>\n" ;
    }

    function createBody()
    {
    alert( "4" ) ;
    this.html += "<body>\n" ;

    for( var i = 0 ; i < this.dummyArray.length() ; ++i )
    {
    this.html += this.dummyArray[i] ;
    }

    this.html += "\n" ;

    this.html += this.dummyDate.getUTCDate() ;

    this.html += "</body>\n" ;
    alert( "4.b" ) ;
    }

    function endPage()
    {
    alert( "5" ) ;
    this.html += "</HTML>\n" ;
    }

    function createPage()
    {
    alert( "creating page" ) ;
    startPage() ;
    startHeader() ;
    endHeader() ;
    createBody() ;
    endPage() ;
    }

    function getHtml()
    {
    alert( "trying to get html from class Foo..." ) ;
    alert( "this.html = " + this.html ) ;
    return this.html ;
    }




    testFoo.html

    <html>

    <head>
    <script type="text/javascript" language="JavaScript" src="foo.js"></script>
    <script type="text/javascript" language="JavaScript">

    function testFoo()
    {
    var foo = new Foo() ;
    var str = new String( "" ) ;

    str = foo.getHtml() ;
    alert( "testFoo.str = " + str ) ;
    }

    </script>
    </head>

    <body bgcolor="#ffffff">
    <a href="javascript:testFoo()">testing</a>
    </body>

    </html>
    Last edited by thephatp; 10-19-2005 at 12:55 AM.

  • #6
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've also tried these things, and still now luck.

    Change:

    Added the vars outside of the class to try to make the global to the file.
    var dummyStr ;
    var dummyDate ;
    var dummyArray ;
    var html ;

    function Foo()
    {
    ...
    ...
    }

    Result:

    Same problem. Nothing after alert( "4" ).

    Change:

    Same as above, but took off the 'var' before each one to make them static (doesn't that make them static?).

    dummyStr ;
    dummyDate ;
    dummyArray ;
    html ;

    function Foo()
    {
    ...
    ...
    }

    Result:

    Same problem. Nothing after alert( "4" ).


    Change:

    Same as above, except I tried to initialize them before the class call.
    dummyStr = new String( "" ) ;
    dummyDate = new Date( "" ) ;
    dummyArray = new Array( 6 ) ;
    html = new String( "" ) ;

    function Foo()
    {
    ...
    ...
    }

    Result:

    Same problem. Nothing after alert( "4" ).

  • #7
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Here's another thing that I tried:

    I moved all of the function INTO the definition of Foo.

    So now, foo.js looks like this:

    function Foo ()
    {
    alert( "-1" ) ;
    this.dummyStr = new String( "" ) ;
    this.dummyDate = new Date() ;
    this.dummyArray = [ "1" , "2" , "3" , "4" , "5" , "6" ] ;

    this.dummyDate.setDate( 1 ) ;
    this.html = new String( "" ) ;
    alert( "0" ) ;


    this.startPage = function() { alert( "1" ) ; this.html += "<HTML>\n" ; }
    this.startHeader = function() { alert( "2" ) ; this.html += "<head>\n" ; }
    this.endHeader = function() { alert( "3" ) ; this.html += "</head>\n" ; }
    this.createBody = function()
    {
    alert( "4" ) ;
    this.html += "<body>\n" ;
    for( var i = 0 ; i < this.dummyArray.length() ; ++i )
    {
    this.html += this.dummyArray{ i } ; // these are really straight brackets, but that makes everything italics.
    }
    this.html += "\n" ;
    this.html += this.dummyDate.getUTCDate() ;
    this.html += "</body>\n" ;
    alert( "4.b" ) ;
    }
    this.endPage = function() { alert( "5" ) ; this.html += "</HTML>\n" ; }
    this.getHtml = function() { alert( "Trying to get html..." ) ; return this.html ;
    }

    this.createPage = function()
    {
    alert( "creating page" ) ;
    startPage() ;
    startHeader() ;
    endHeader() ;
    createBody() ;
    endPage() ;
    }
    }



    The function in the testFoo.html file now looks like this:

    function testFoo()
    {
    var foo = new Foo() ;
    var str = new String( "" ) ;

    foo.createPage() ;
    str = foo.getHtml() ;
    alert( "testFoo.str = " + str ) ;
    }




    The error occurs now at alert( "create page" ).

    Now change all of the function calls in the this.createPage function. So now everything above stays the same except this.createPage = function() looks like this:

    this.createPage = function()
    {
    alert( "creating page" ) ;
    this.startPage() ;
    this.startHeader() ;
    this.endHeader() ;
    this.createBody() ;
    this.endPage() ;
    }


    And with that, I'm back where I started, where I get to alert( "4" ), but nothing past there.


    ANY HELP??? Thanks!
    Last edited by thephatp; 10-19-2005 at 01:16 AM.

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this works for IE 6 + FX 1.0.6
    Code:
    <html>
    <head>
      <script>
      
        function Foo() {
          this.dummyStr = new String;
          this.dummyDate = new Date;
          this.dummyArray = [1, 2, 3, 4, 5, 6];
          this.dummyDate.setDate(1);
          this.html = new String;
        }
        Foo.prototype = {
          startPage: function() {this.html += '<html>';},
          startHeader: function() {this.html += '<head>';},
          endHeader: function() {this.html += '</head>';},
          createBody: function() {
            this.html += '<body>';
            for (var i = 0; i < this.dummyArray.length; i++)
              this.html += this.dummyArray[i];
            this.html += '\n'+ this.dummyDate.getUTCDate();
            this.html += '</body>';
          },
          endPage: function() {this.html += '</html>';},
          getHTML: function() {return this.html;},
          createPage: function() {
            this.startPage();
            this.startHeader();
            this.endHeader();
            this.createBody();
            this.endPage();
          }
        }
        
        onload = function() {
          var foo = new Foo;
          foo.createPage();
          document.getElementById('out').value = foo.getHTML();
        } 
      
      </script>
    </head>
    <body>
      <textarea id="out" style="width:100%;height:100%;"></textarea>
    </body>
    </html>
    and you should really wrap your code w/ the CODE tag, th # sign thingy during posting.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •