JavaScript Function Declarations

Discussion in 'Computer Science & Culture' started by one_raven, Mar 27, 2009.

Thread Status:
Not open for further replies.
  1. one_raven

    one_raven God is a Chinese Whisper Valued Senior Member

    Messages:
    13,433
    Right now I am in the middle of reverse-engineering some very classy JavaScript to learn how it works. I’ve doctored it some already (I have a pretty good handle on the core functionality) but I still have quite a bit to go.

    Two things are REALLY throwing me:
    Why would you declare a function like this:

    ThisIsTheFunctionName: function(values) {code},

    Instead of the standard:

    function ThisIsTheFunctionName(values) {code},


    Also, the HTML has NO function calls to the script. How the hell does THAT work? I think these two things may well be related.

    Can anyone give me some pointers here?
     
    one_raven, Mar 27, 2009
    #1

  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. Roman

    Roman Banned Banned

    Messages:
    11,560
    YOU'RE BACK!!!!!

    But sorry I can't be of more help.

    Please Register or Log in to view the hidden image!

     
    Roman, Mar 27, 2009
    #2

  4. Google AdSense Guest Advertisement



    to hide all adverts.
  5. Stryder

    Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    Thats not totally accurate. One method is using the EVENT's that some tags have:
    Code:
    <BODY ONLOAD="javascript:functionname(value);">
    [/code]

    It's usually used to run a script after the page fully loads, otherwise you get errors if you run the script too early.

    Others that exist can be "OnMouseOver" etc.

    If you want to use a link to trigger execution, you can use:
    Code:
    <A HREF="#" OnClick="javascript:functionname(value);">Call function</A>
    This can cause problems with some search engines which can't necessarily parse the link.

    Hopefully that should be enough to trigger what you are after. You can search those Events mentioned to find out more.
     
    Stryder, Mar 27, 2009
    #3

  6. Google AdSense Guest Advertisement



    to hide all adverts.
  7. one_raven

    one_raven God is a Chinese Whisper Valued Senior Member

    Messages:
    13,433
    Thanks, Roman. You are one of the few who make me feel welcome and appreciated here.

    Stryder:
    I'm telling you...
    There are no calls to JavaScript functions in the HTML at ALL - including event handlers.
    This is the entirety of the HTML:

    Code:
    <html>
<meta http://dyndiv.markusbordihn.de/example/moveable-resizeable/>
<link rel="stylesheet" type="text/css" href="../css/divwindow.css">
<link rel="stylesheet" type="text/css" href="../css/thispage.css">
<script type="text/javascript" src="../jscript/divwindow.js"></script>	 
<body>
<div class="dynDiv_moveDiv testdiv_1">
 <p style="padding: 10px;">This is a Test Div</p>
 <div class="dynDiv_resizeDiv_tl"></div>
 <div class="dynDiv_resizeDiv_tr"></div>
 <div class="dynDiv_resizeDiv_bl"></div>
 <div class="dynDiv_resizeDiv_br"></div>
</div>
<div class="testdiv_2">
 stuff goes in here<br>
 stuff goes in here<br>
 stuff goes in here<br>
 stuff goes in here<br>
 <div class="dynDiv_moveParentDiv testdiv_2_move">handle</div>
 <div class="dynDiv_minmaxDiv">&lt</div>
 <div class="dynDiv_resizeDiv_br"></div>
</div>
</body></html>
    Nothing.


    Have you ever seen a function declared in the above fashion?
     
    Last edited: Mar 27, 2009
    one_raven, Mar 27, 2009
    #4
  8. one_raven

    one_raven God is a Chinese Whisper Valued Senior Member

    Messages:
    13,433
    I blocked out all the statements and am working on reformatting the script, and I think I may have figured it out.
    I'm not sure yet, but if I'm right this son of a bitch is smart!

    I'll let you know, if you are curious.
     
    one_raven, Mar 27, 2009
    #5
  9. RubiksMaster

    RubiksMaster Real eyes realize real lies Registered Senior Member

    Messages:
    1,646
    I believe that's javascript's way of doing anonymous functions.

    Basically, when you say:

    var myFunc = function() {...} you are giving that function the lexicographic scope of your variable. In general, this is useful in cases where you want to override functionality in a higher-level scope without having to actually declare a named function (i.e. if you just want to temporarily use it and have it fall out of scope and be deallocated). In this case it also looks like the variable myFunc is treated as a first class function.

    I'm not sure though, because I don't really use JavaScript. Do some research on anonymous functions and see if that's what you have.
     
    RubiksMaster, Mar 27, 2009
    #6
  10. Crunchy Cat

    Crunchy Cat F-in' *meow* baby!!! Valued Senior Member

    Messages:
    8,423
    The first function is anonymous and prefixed with a label. That means a break or continue statement could optionally be directed right to that label. Normally labels are used so break and continue statements from deep nested code can escape far beyond what a normal break / continue statement could escape.


    My guess is there is probably a variable declaration somewhere in the javascript code that executes a "starter" function. I think simply loading the javascript code will cause all global variables to be defined and if one of them takes a function return value then the corresponding function gets executed at that moment.
     
    Crunchy Cat, Mar 28, 2009
    #7
  11. Stryder

    Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    I think you'll find they are probably using the CSS (Cascading Style Sheets) to cause the Event. Notice all the DIV entries with CLASS mentioned. Well CLASS is referring to using the CSS entry with the named Variable. You should have a look at the CSS files to locate the Javascript code.
     
    Stryder, Mar 28, 2009
    #8
  12. Ophiolite

    Ophiolite Valued Senior Member

    Messages:
    9,232
    I hope I'm one of the other ones.
     
    Ophiolite, Mar 28, 2009
    #9
  13. one_raven

    one_raven God is a Chinese Whisper Valued Senior Member

    Messages:
    13,433
    Of course.
    More importantly, you challenege me constantly.


    For those who said they were anonymous functions, you are correct.

    It is a 12 page script and it is all one, very large array, and a single statement atthe end that sets up a window listener and kicks off the array population.
    It's a beautiful, elegant script.
    I have it mostly figured out.
     
    one_raven, Mar 31, 2009
    #10
  14. Voodoo Child

    Voodoo Child Registered Senior Member

    Messages:
    1,296
    Why does it need any?

    Event handlers don't need to be written as attributes in html.

    e.g. document.getElementById(foo).onclick = function() {alert('foo clicked')}

    The name: func format is commonly used to assign functions to slots in objects.

    e.g.

    {
    f: function(){return 'foo'}
    }
     
    Voodoo Child, Apr 12, 2009
    #11
  15. Rick

    Rick ॐ Valued Senior Member

    Messages:
    3,336
    Ok, before we start babbling, as far as i can understand, we're talking about about a JS written in a namespaced fashion. In case you dont know what i am talking about ... we can namespace our javascripts like this:

    Code:
    var com;
if(!com){
// declare com namespace
com = { }
}

com.apple = { 
 // all attributes and functions go here like
create : function() {

},

anArray : [   
                    { "some string inside an Object  literal " }   
              ]

// something like that ...
};

Now, since we still dont wanna pollute the "global namespace" we do something like:

(function( ) {

// namespace and bootstrap your java script here

} ) ( ) ;
    Basically you might have a js which conforms to JSON ... something like :
    Code:
    {
  com.namespace = { 
                       anArray : [  {  }, { }, { } ],
                      
   },

  someFunction : function ( ) {  return  2; }
}

    Let me know if you can share the actual script ..

    Later
    Rick
     
    Rick, Apr 19, 2009
    #12
  16. Rick

    Rick ॐ Valued Senior Member

    Messages:
    3,336
    And DO NOT MIX event handler calls in HTML using something like onClick ... that breaks un-obtrusive paradigm iMHO or separation of concerns ... instead if i wanna do something in onload i'd do something like :

    Code:
    (function( ){
 window.onload = function ( ) {
 // do some fun DOM stuff here
};
} ( ) );
    For more DOM stuff, i use JQuery just makes my life easier. In the same way btw, if i wanna attach say onblur event to text box add something like:


    Code:
    (function( ){
 window.onload = function ( ) {
 
  document.getElementById("input-for-ajax-coolness").onblur = function( ) {
    // do something on blur of text box.
};

// when using JQuery we would do something like
$(#input-for-ajax-coolness).blur( function ( ) {   } );
// but i would say NEVER mix both ..
};
} ( ) );
    DOJO is a little heavy weight if we just wanna do some filtering searches and quickly ... but DOJO is well namespaced and much better.


    Rick
     
    Rick, Apr 19, 2009
    #13
  17. Crunchy Cat

    Crunchy Cat F-in' *meow* baby!!! Valued Senior Member

    Messages:
    8,423
    Rick, I think the thread starters questions have already been answered.
     
    Crunchy Cat, Apr 20, 2009
    #14
  18. Stryder

    Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    I think Rick was just sharing a few pieces for extra credits

    Please Register or Log in to view the hidden image!

    (btw, great additions Rick)
     
    Stryder, Apr 22, 2009
    #15
  19. Rick

    Rick ॐ Valued Senior Member

    Messages:
    3,336
    haha yeah. My mettttttle had to be proven didnt it?

    Please Register or Log in to view the hidden image!



    Rick
     
    Rick, May 9, 2009
    #16
Thread Status:
Not open for further replies.

Share This Page