SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 50 of 50
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    was missing the id in the <textarea> which I added and got access to the function.
    Do you want to use the best-practice technique of only an identifier on the form, so that you can then easily gain access to all of the named elements within the form?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've worked on this some more and calcCharacters.value.length counts the number of characters in <textarea> . I have it in a var called x. What's the notation for displaying the value of x in the input box from the <input>? I'm always interested in the best-practice technique - hope I have violated too many so far
    Code JavaScript:
    <!doctype html>
    <html> <head> <title> Counter </title> 
     
    </head> <body>
    <form >
        <textarea  id="ta" name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input id="ta2" type="text" name="countDisplay" size="3" maxlength="3" value="248"> Characters Remaining
    </form>
    <script type="text/javascript">  
     
    var maxChar = 255;
    var currentNum = 0;
    var calcCharacters = document.getElementById('ta');
    calcCharacters.onkeydown = calcCharacters2;
    function calcCharacters2 () {
    var x = calcCharacters.value.length;
    alert( "I'm gonna count those chars in !" + x);
         //calculation of the number of characters in <textarea>;
    } 
     
    </script>  
    </body> </html>

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    I've worked on this some more and calcCharacters.value.length counts the number of characters in <textarea> . I have it in a var called x. What's the notation for displaying the value of x in the input box from the <input>?
    To display the value, the function need to gain a reference to the target element where it will be displayed.

    There are three basic ways that this may be achieved:

    • By adding to the textarea element a property that refers to the target element
    • By using a name for the target element that is similar to the source element, for example, "myInput" for the source and "myInputCounter" for the target
    • By explicitly referring to the target element by a concrete identifier. Tis is the least flexible technique, resulting in no ability to reuse the function in other situations.


    So going with the first technique, in the same place where you assign the textarea event, you can also add to that textarea element a property that points to the counter.

    Code javascript:
    calcCharacters.counter = calcCharacters.form.elements.countDisplay;

    so that within the event function, you can retrieve that info from the property on the textarea.

    Code javascript:
    var counter = calcCharacters.counter;

    Quote Originally Posted by nichemtktg View Post
    I'm always interested in the best-practice technique - hope I have violated too many so far
    One violation is where the function uses calcCharacters. That limits the function to be capable of working only in that one situation, with that one variable name.

    Instead of that, the function is already associated with the element that fired the event, so from within the function you have the this kerword which automatically refers to element that fired the event, that being the text area element.

    Code javascript:
    var calcCharacters = this;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I got it working like this: would you modify my script the way you suggested so I can understand your technique?
    HTML Code:
    <!doctype html>
    <html> <head> <title> Counter </title> 
    
    </head> <body>
    <form >
        <textarea  id="ta" name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input id="ta2" type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    <script type="text/javascript">  
    
    var maxChar = 250;
    var calcCharacters = document.getElementById('ta');
    calcCharacters.onkeydown = calcCharacters2;
    function calcCharacters2 () {
    var x = maxChar - calcCharacters.value.length;
    document.getElementById('ta2').value = x;
    } 
     
    </script>  
    </body> </html>

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    would you modify my script the way you suggested so I can understand your technique?
    Sure, I'll even use some fancy colors to help show the changes.

    First is to remove the id attributes from the form fields, and to instead use only one unique identifier on the form. That allows you to unclutter the HTML code, and enables you to use the same technique at multiple places on the same page.

    You can still have identifiers in the form if you need them, such as when using them for IE6 support of labels that use explicit association, but for scripting to rely on unique identifiers in a form is normally not a good idea as that limits what the script can achieve.

    Code:
    <form id="messageArea">
        <textarea id="ta" name="ta" rows="6" style="width:340px;"></textarea>
    	<br>
        <input id="ta2" type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    Using the form identifier as an entry point, we can easily retrieve the references to other elements within the form from there:

    Code:
    var form = document.getElementById('messageArea'),
        calcCharacters = document.getElementById('ta')form.elements.ta;
    Why that's helpful is that it's reducing the number of reasons for failure, and also allows the event's function to be used on multiple different textareas on the same page, should you desire that later on.

    These variables are all currently global variables though (because even though var is used, when it's done outside of a function they are in the global scope) so we'll eventually reduce our dependence on them. With functions, they should not rely on global variables. Functions should only use what they receive from their parameters or the this keyword, and in certain situations via their scope.

    So, our functions shouldn't use global variables, which makes them easily to understand and debug, and more capable of being used in different situations without needing to be changed.

    The function needs three pieces of info to do its work. It needs the textarea element, a maximum number of characters, and the place where the current number of characters will be shown. The first one can be obtained via the this keyword in the function, but as for the other two, they can be either retrieved from the textarea element, or passed in to the function.

    We'll pass that info in to the function. If the function will be used for several related situations, it can be useful to pass the info in as a single data object called config. Since the function that handles the event only has one parameter passed to it, the event itself, the function needs to get any other information from somewhere else. That can be either from the element that triggered the event, or via closure from when the function was created, or from somewhere else.

    We will use the textarea element to hold the config info, which can be stored in an object called config.

    Code:
    var maxChar = 250,
        ...;
    calcCharacters.config = {
        maxChar: 250,
        counter: form.countDisplay
    };
    The function can now retrieve that configuration info from the textarea.
    We'll use the onkeyup event instead of onkeydown. With onkeydown the script doesn't get the most recent update to the element value. That's because scripting allows you to return false to the onkeydown event to cancel the character. The onkeyup event is better to use when you want scripting to take effect based on the resulting value.

    There's also no need to separately declare the function either, when it can be applied directly as an anonymous function.

    Code:
    calcCharacters.onkeydownup = calcCharacters2; function characterCounter() {
        var config = this.config,
            x = config.maxChar - calcCharactersthis.value.length;
        document.getElementById('ta2')config.counter.value = x;
    }
    Here's the full set of code changes that we've gone through here.

    Code:
    <form id="messageArea">
        <textarea id="ta" name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input id="ta2" type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    <script type="text/javascript">  
    var maxChar = 250,
        form = document.getElementById('messageArea'),
        calcCharacters = document.getElementById('ta')form.elements.ta;
    calcCharacters.config = {
        maxChar: 250,
        counter: form.elements.countDisplay
    };
    calcCharacters.onkeydownup = calcCharacters2; function characterCounter() {
        var config = this.config,
            x = config.maxChar - calcCharactersthis.value.length;
        document.getElementById('ta2')config.counter.value = x;
    }
    </script>
    This can then be further improved on, so that the config is not attached to the textarea, but instead is attached to the event function using a closure technique.

    Code:
    calcCharacters.onkeydown = counterHandler({
        maxChar: 250,
        counter: form.countDisplay
    });
    calcCharacters.onkeyup = counterHandler({
        maxChar: 250,
        counter: form.countDisplay
    });
    function counterHandler(config) {
        ...
    }
    The way that this technique works is to pass the config to an outer function (that being the counterHandler function), and for that outer function to return an inner function. Scoping ensures that the inner function retain knowledge of the config from the outer function.

    Code:
    function counterHandler(config) {
        return function () {
            var config = this.config,
                x = config.maxChar - this.value.length;
            config.counter.value = x;
        };
    }
    You can even use some initial sanity checks, which also acts as a useful reminder about which config values are accepted, and whether they are required or can be given a default value.

    Code:
    function counterHandler(config) {
        if (!config || !config.counter) {
            return;
        }
        config.maxChar = config.maxChar || 100;
    
        return function () {
            var x = config.maxChar - this.value.length;
            config.counter.value = x;
        };
    }
    Last edited by paul_wilkins; Jul 10, 2011 at 07:32.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    And I just realised something.

    You don't even need to set maxChar to a certain value.
    Since you already have the max number as the starting value for the counter, you can retrieve that initial value (no matter what it has since changed to) from the defaultValue property.

    Code:
    counter: form.countDisplay,
    maxChar: 250form.countDisplay.defaultValue,
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #32
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for all your help. I followed post #30 through the point where you said, "Here's the full set of code changes that we've gone through here" (right before you made additional improvements). At that point, I ran the script, but couldn't get it to work. What did I miss?

    Your script as I understand it so far:
    HTML Code:
    <!doctype html>
    <html> <head> <title> Counter </title> 
    
    </head> <body>
    <form id="messageArea">
        <textarea name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    
    <script type="text/javascript">  
    
    var form = document.getElementById('messageArea'),
        calcCharacters = form.elements.ta;
    
    calcCharacters.config = {
        maxChar: 250,
        counter: form.countDisplay
    };
    
    calcCharacters.config = calcCharacters.onkeyup =  function () {
        var config = this.config,
            x = config.maxChar - this.value.length;
        config.counter.value = x;
    }
    </body> </html>

  8. #33
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    At that point, I ran the script, but couldn't get it to work. What did I miss?
    You've been following things very well. So well though that you also copied an error in one of the pieces.

    The post went through multiple rewrites throughout the course of the day before it was posted, and one of those rewrites managed to leave some chaff in the works.
    The post has been updated now, but where there was:
    Code:
    form.countDisplay
    that should have instead been
    Code:
    form.elements.countDisplay
    It doesn't change the working of the script, but it's the more formal and properly correct way to access things.
    Another one that is somethiing for which I should be shot for leaving in though is:
    Code:
    calcCharacters.config = calcCharacters.onkeyup =  function () {
    which needs to have the first part excised.
    Code:
    calcCharacters.config = calcCharacters.onkeyup = function () {
    A last thing that I noticed in your script, which is what's actually causing the largest problem, is that it needs to end with a </script> closing tag. Otherwise it just won't work at all.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #34
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank-you. It works great.

    Now back to #30, you said. "This can then be further improved on, so that the config is not attached to the textarea, but instead is attached to the event function using a closure technique", but I don't see exactly how to apply the change you suggested. Can you say again the change you you were referring to?

    PS: Should've caught that missing <\script> - Please excuse me.

    Current script:
    HTML Code:
    <!doctype html>
    <html> <head> <title> Counter </title> 
    
    </head> <body>
    <form id="messageArea">
        <textarea name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    
    <script type="text/javascript">  
    
    var form = document.getElementById('messageArea'),
        calcCharacters = form.elements.ta;
    
    calcCharacters.config = {
        maxChar: 250,
        counter: form.elements.countDisplay
    };
    
    calcCharacters.onkeyup =  function () {
        var config = this.config,
            x = config.maxChar - this.value.length;
        config.counter.value = x;
    }
    </script>
    </body> </html>

  10. #35
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    you said. "This can then be further improved on, so that the config is not attached to the textarea, but instead is attached to the event function using a closure technique", but I don't see exactly how to apply the change you suggested. Can you say again the change you you were referring to?
    Sure. It involves a technique called closure, which is one of the things that makes JavaScript different from many other languages. The following article seems to do a good job of describing scopes and closures.
    Closure on JavaScript closures

    What we're going to do is to make use of the fact that every function creates a new activation object, which references all the function arguments and variables within the scope of that function. What is returned from this outer function is the inner function, which also knows about the variables from the outer function.

    Code javascript:
    function counterHandler(config) {
        return function () {
            ...
        };
    }

    This is very useful because functions assigned to events cannot have parameters to receive other variables. Since the returned function retains knowledge of other variables from the outer function, that means that you can call the counterHandler function with your config info, and the returned function (which retains that custom config) can be assigned to an event.

    Code javascript:
    calcCharacters.onkeyup = counterHandler({
        maxChar: 250,
        counter: form.countDisplay
    });

    All that's left now is cleaning up, where the contents of the inner function get their config info from the config variable.

    Code javascript:
    function counterHandler(config) {
        return function () {
            var x = config.maxChar - this.value.length;
            config.counter.value = x;
        };
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #36
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That link on closure has the best most concise explanation on scope that I've ever read. Plus, it explains closure in a very understandable way thought not able to assemble the changes you sent me.

    Here's the script with the changes I thought you outlined. I obviously don't have it right. Would make the changes and send them back?

    HTML Code:
    <!doctype html>
    <html> <head> <title> Counter </title>
    
    </head> <body>
    <form id="messageArea">
       <textarea name="ta" rows="6" style="width:340px;"> </textarea>
           <br>
       <input type="text" name="countDisplay" size="3" maxlength="3" value="5"> Characters Remaining
    </form>
    
    <script type="text/javascript">
    
    vfunction counterHandler(config) {
       return function () {
           ...
       };
    }
    
    calcCharacters.onkeyup = counterHandler({
       maxChar: 5,
       counter: form.countDisplay
    });
    
    function counterHandler(config) {
       return function () {
           var x = config.maxChar - this.value.length;
           config.counter.value = x;
       };
    }
    </script>
    </body> </html>

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    That link on closure has the best most concise explanation on scope that I've ever read. Plus, it explains closure in a very understandable way thought not able to assemble the changes you sent me.
    The code that contained ... within it indicates that the code has been elided for the sake of clarity. The full version of that function was given at the end of the post.

    The section of your code that starts with "vfunction" should be removed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Still missing something. What is it please?
    Code JavaScript:
    <!doctype html>
    <html> <head> <title> Counter </title> 
     
    </head> <body>
    <form id="messageArea">
        <textarea name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input type="text" name="countDisplay" size="3" maxlength="3" value="5"> Characters Remaining
    </form>
     
    <script type="text/javascript">  
     
     
     
    calcCharacters.onkeyup = counterHandler({
        maxChar: 5,
        counter: form.countDisplay
    });
     
    function counterHandler(config) {
        return function () {
            var x = config.maxChar - this.value.length;
            config.counter.value = x;
        };
    }
    </script>
    </body> </html>

  14. #39
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    You're missing the code that declares the form and calcCharacters variables.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #40
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Got it! Been up 18 hours. So, please excuse me that I need to wait til tomorrow morning to look and think about with care. I know I'll have question.

    See you tomorrow.

    Code JavaScript:
    <!doctype html>
    <html> <head> <title> Counter </title> 
     
    </head> <body>
    <form id="messageArea">
        <textarea name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input type="text" name="countDisplay" size="3" maxlength="3" value="5"> Characters Remaining
    </form>
     
    <script type="text/javascript">  
     
    var form = document.getElementById('messageArea'),
        calcCharacters = form.elements.ta;
     
     
    calcCharacters.onkeyup = counterHandler({
        maxChar: 5,
        counter: form.countDisplay
    });
     
    function counterHandler(config) {
        return function () {
            var x = config.maxChar - this.value.length;
            config.counter.value = x;
        };
    }
    </script>
    </body> </html>

  16. #41
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your patience. I'd like to confirm what I'm understanding. I will need to go slowly. I don't want to miss anything. This has proven to be a great script to learn from with your help.

    I understand the <form>.

    Please confirm that:
    Code JavaScript:
    var form = document.getElementById('messageArea'),
        calcCharacters = form.elements.ta;

    Is the same as:
    Code JavaScript:
    var form = document.getElementById('messageArea');
    var calcCharacters = form.elements.ta;

    ...and that the var form contains all the info about the <form> DOM object. Right? If so, is there a way to see a dump of that info?

    Also, please confirm that "var calcCharacters = form.elements.ta;" loads the input from the <textarea> that happens to have the name="ta". Right?

  17. #42
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Please confirm that:
    Code JavaScript:
    var form = document.getElementById('messageArea'),
        calcCharacters = form.elements.ta;

    Is the same as:
    Code JavaScript:
    var form = document.getElementById('messageArea');
    var calcCharacters = form.elements.ta;
    Yes they are. Since variables should be declared at the start of their scope, using the one var statement helps to reinforce such good habits.

    Quote Originally Posted by nichemtktg View Post
    ...and that the var form contains all the info about the <form> DOM object. Right? If so, is there a way to see a dump of that info?
    There is. Using web development tools that come with some browsers, you can set a breakpoint on the line after, and investigate things from there. I suggest a separate thread through for that though.

    Quote Originally Posted by nichemtktg View Post
    Also, please confirm that "var calcCharacters = form.elements.ta;" loads the input from the <textarea> that happens to have the name="ta". Right?
    The variable becomes a reference to the textarea element itself. If you want the input value from that element, you will need to retrieve it from the .value property of the element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #43
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is a container that holds the var definitions for the function below it. It has been closed off so the scope of var definitions are local to that function (even though the physical definition occurs outside the function). Right? Also, please confirm the the "((" "))" notation is a characteristic of this config. Right?

    Code JavaScript:
    calcCharacters.onkeyup = counterHandler({
        maxChar: 5,
        counter: form.countDisplay
    });

    Also, I should confirm that counterHandler(config) is how this closed function is called. Right?

  19. #44
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    This is a container that holds the var definitions for the function below it.
    Nope, it's passing an object to a function, with the object having two properties.

    Quote Originally Posted by nichemtktg View Post
    It has been closed off so the scope of var definitions are local to that function (even though the physical definition occurs outside the function). Right?
    Nope, nothing to do with closure or scope going on there.

    Quote Originally Posted by nichemtktg View Post
    Also, please confirm the the "((" "))" notation is a characteristic of this config. Right?
    You'll find that it is parenthesis and curly brace being used there. "({" and "})" where the curly braces are the object, and the contents define the properties of that object.

    To help aid understanding, this code achieves the same job too:

    Code JavaScript:
    var config = {
        maxChar: 5,
        counter: form.countDisplay
    };
    calcCharacters.onkeyup = counterHandler(config);

    Quote Originally Posted by nichemtktg View Post
    Also, I should confirm that counterHandler(config) is how this closed function is called. Right?
    Nope. Closure only applies to a returned function, where that returned function "closes over" the variables from its ancestors.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #45
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I understand your last post and had to take a day to think about it.

    Then it occurred to me that I didn't realize that calcCharacters.onkeyup had already been defined as a function. How did that happen?

    I'll bet I'm touching some very basic knowledge, but I don't have it. How does declaring calcCharacters.onkeyup constitute a function? Don't you need the function keyword?

  21. #46
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    I'll bet I'm touching some very basic knowledge, but I don't have it. How does declaring calcCharacters.onkeyup constitute a function? Don't you need the function keyword?
    The returned value from the counterHandler function is the function that you're looking for. It's a function that returns a function. The returned function is what is assigned to the event.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #47
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    calcCharacters.onkeyup is the object?

    counterHandler({
    maxChar: 5,
    counter: form.countDisplay
    });

    is the function?

  23. #48
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    calcCharacters.onkeyup is the object?
    No, the object being passed to the function is the config info, which is contained in curly braces.

    Code javascript:
    counterHandler({
        maxChar: 5,
        counter: form.countDisplay
    });

    Quote Originally Posted by nichemtktg View Post
    is the function?
    The function being assigned to the onkeyup event, is the one that is returned from the counterHandler function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #49
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I misinterpreted what you meant when you said, "it's passing an object to a function, with the object having two properties".

    Code JavaScript:
    calcCharacters.onkeyup = counterHandler({
        maxChar: 5,
        counter: form.countDisplay
    });

    Is simply how the passing of the config info is accomplished, right?

    If so, what is calcCharacters.onkeyup called in this example?

  25. #50
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by nichemtktg View Post
    Is simply how the passing of the config info is accomplished, right?
    Right.

    Quote Originally Posted by nichemtktg View Post
    If so, what is calcCharacters.onkeyup called in this example?
    Typically the term "traditional event registration" is used to refer to that, as opposed to "inline event registration" where an HTML attribute is used instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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