www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: first function

  1. #1
    Join Date
    Jul 2011
    Posts
    61

    first function

    This script counts characters from a <textarea>. I'm told it's inline and somehow deficient even though it works. I admit I don't like the use of the this keyword because I really don't understand its use. How could I rewrite this script to make it more this century?

    HTML Code:
    <html>
    <head>
    <script language="javascript" type="text/javascript"> 
    var maxAmount = 250;
    function textCounter(textField, showCountField) {
        if (textField.value.length > maxAmount) {
            textField.value = textField.value.substring(0, maxAmount);
    } else { 
            showCountField.value = maxAmount - textField.value.length;
    }
    }
    </script>
    </head>
    <body>
    <form>
    <textarea name="ta" rows="6" style="width:340px;" onKeyDown="textCounter(this,document.getElementById('ta2'));" onKeyUp="textCounter(this,document.getElementById('ta2'));"></textarea>
    <br>
    <input readonly id="ta2" type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    First, "this".

    It's confusing, because JavaScript is confused about "this". The one area where it's not confusing is when you have an event occuring on an element, such as "ta.onkeydown". The "onkeydown" property contains code. JS will call that code when the key down event occurs over that element. "this" will be a reference to that element. In our example, "this" wll be "ta", your text area. In JS:

    this === document.getElementById( 'ta' );

    OK? Nothing wrong with "this" as you've used it.

    What is wrong is using a string in your assignment to the event properties, "onkeydown" and "onkeyup". When the event occurs, JS sees that it has a string, not code, so JS calls "eval()" to turn the string into code. This is a behavior that is not identical across browsers so I suspect you mean "it works in the browser I'm using". The right way to do it, to avoid cross-browser issues (among other things) is to assign a function:

    Code:
    var xxx = document.getElementById( 'xxx' );
        xxx.onkeydown = keydown;
    
    function keydown() {
       textCounter(this,document.getElementById('ta2'));
    }
    (Please use a more meaningful name than "xxx". I'd also go for something more specific than "ta" and "ta2" - you might have to enhance this code a month or a year from now.)

    Test at least in MSIE and Firefox, unless this is personal code. Firefox handles textareas about the same way as Chrome, Opera and Safari. I can't think of any major changes from MSIE 6 through 8.

    Good luck!

  3. #3
    Join Date
    Jul 2011
    Posts
    61
    Please show me the the complete script you have in mind. I'm not getting how the changes you're providing will change the html and the function.

  4. #4
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    I just put this up on my site. It's not exactly your issue, but it's very close:

    http://www.MartinRinehart.com/fronte...-triggers.html

  5. #5
    Join Date
    Jul 2011
    Posts
    61
    Thanks for your page. I read it very slowly and found it very understandable and agree with what I think is one of your messages: functions take the ambiguity out of values.

    So, to re-write the code starting with the html since that's where all the code comes together with something like this:

    HTML Code:
    <form>
        <textarea name="ta" rows="6" style="width:340px;"> </textarea>
    	<br>
        <input type="text" name="countDisplay" size="3" maxlength="3" value="250"> Characters Remaining
    </form>
    I could code this in PHP though I think javascript will be more efficient. Will you show me how to gain access to the form's keys and values so I can use them in functions?

  6. #6
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    You got thing 1 right. No more "onevent='...'" in the HTML. Good.

    Now, in the JS,

    var descriptive_name = document.getElementById ...
    descriptive_name.onevent = name_of_function;

    function name_of_function () {
    code that others try to cram into the "onevent = ..." string;
    }

  7. #7
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    Uh, another thought. It's not that functions take the ambiguity out of values. The ambiguity is in the process of taking a string, dropping it into the eval() function and then handling the result. That's a lot of steps and those steps live somewhere right in between two standards bodies: ECMA (ECMA 262 is the formal definition of JavaScript) and W3C (the DOM standards body). In glacier climbing that's called a crevasse.

  8. #8
    Join Date
    Jul 2011
    Posts
    61
    I need to limit the <textarea> input to 250 characters. I don't understand how typing in the <textarea> is going to trigger my function.

    This is what I have so far for the <script>:

    HTML Code:
    <script type="text/javascript">  
    var maxChar = 251;
    var currentNum = 0;
    var calcCharacters = document.getElementById('ta');
    
    function calcCharacters2 () {
    code that others try to cram into the "onevent = ..." string;
    } 
    </script>

  9. #9
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    var calcC... // you've got it!

    calcCharacters.onkeydown = calcCharacters2; // you need it!

    function calcCharacters2... // you've got it!

    Good. Uh, names. How about:

    var textarea_that_holds_the_characters_to_count = ...

    and

    function count_the_characters_in_the_ta_textarea() { ...

    OK, OK. Those are a bit long. Maybe quite a bit long. On the other hand, the older I get the longer my names get.

    You're going strong.

    Martin

  10. #10
    Join Date
    Jul 2011
    Posts
    61
    Like this:
    HTML Code:
    <script type="text/javascript">  
    var maxChar = 251;
    var currentNum = 0;
    var textarea_that_holds_the_characters_to_count = document.getElementById('ta');
    function count_the_characters_in_the_ta_textarea() {
    calcCharacters.onkeydown = calcCharacters2;
    }
    </script>
    It would help if I knew how the function will be triggered.

    By the way, I'm 53 how old are you?

    Jim

  11. #11
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    No, no, no! The order is:

    var textarea... = document.getElementById ...
    textarea.onkeydown = func_name;
    function func_name() {
    ...
    }

    All JS code comes in two flavors: declarative and imperative. Big words for simple concepts. Declarative code, as the name suggests, declares something. Here are two declarative statements:

    var foo;
    function bar() { ... }

    Imperative code are the statements that actually do something. If the sargeant says "Doubletime, harch!" you go fast. That's an imperative statement. These are code examples:

    foo = 2 + 2;
    bar(); // execute the "bar" function

    JS processes declarative code before it starts running imperative code. So your function definition is processed first. The function is defined and ready to go before, for example, JS goes scurrying around the DOM tree trying to find an element "ta".

    When you assign a function to the "onkeydown" property, it sits there, ready and waiting. When the event occurs (element has focus, a physical key is pressed by a user, or my pet Python, Monty, taps the keyboard with his tail) JS looks to see if the "onkeydown" property is defined. If it is defined and its value is a function, JS calls that function. JS will call your function when the event happens. Trust it.

    I never write event code first. I always put an alert() into the function:

    function count_chars_in_ta() {
    alert( "I'm gonna count those chars in ta!" );
    }

    Get the rest ready to go and then hit a key (or ask Monty to hit a key). When your alert pops up you know you are in business.

    And I am older than you. Old enough to have had a sargeant barking "Harch!" at me during Viet Nam. Old enough to have written my first program, in college, before the Beatles released that album about another Sargeant.

    Is this your first programming?

  12. #12
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    By the by, "It would help if I knew how ..." is critically important to me to make my stuff better. It's the thing I thought was obvious that wasn't so obvious. Tomorrow that will be perfectly clear. Thanks!

    Martin

  13. #13
    Join Date
    Jul 2011
    Posts
    61
    no joy with this. what am i missing?
    HTML Code:
    <script type="text/javascript">  
    var maxChar = 251;
    var currentNum = 0;
    var textarea_that_holds_the_characters_to_count = document.getElementById('ta');
    calcCharacters.onkeydown = calcCharacters2;
    function count_the_characters_in_the_ta_textarea() {
    alert( "I'm gonna count those chars in ta!" );
         //calculation of the number of characters in <textarea>;
    } 
    </script>  
    I was in the army 75-84. It was a great experience for me, but glad that I got out when I did. Bought my first computer with my terminal leave money (an IBM pc with two floppies)

    I come from a terminal background on the pc. there wasn't anything I couldn't get data to do in a graphically sterile environment. Started scripting last year. know html, css, php, mysql well enough, but no OOP and it shows.

  14. #14
    Join Date
    Jul 2011
    Posts
    61
    OK.

    played around some more (was missing the id in the <form> which I added and got access to the function.

    So, I tested the value of calcCharacters thinking it might be a value, but the alert said calcCharacters is a html object.

    How do I need to think about making the calculations in the function. Here's the work so far:
    HTML Code:
    <!doctype html>
    <html> <head> <title> Counter </title> 
    
    </head> <body>
    <form id="ta">
        <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 maxChar = 251;
    var currentNum = 0;
    var calcCharacters = document.getElementById('ta');
    calcCharacters.onkeydown = calcCharacters2;
    function calcCharacters2 () {
    alert( "I'm gonna count those chars in ta!" + calcCharacters );
         //calculation of the number of characters in <textarea>;
    } 
     
    </script>  
    </body> </html>

  15. #15
    Join Date
    Dec 2010
    Location
    Hudson Valley, NY
    Posts
    16
    Names are holding you back. Make one of them sound like the name of a textarea, and another one sound like the name of a character counting function.

    Then use vertical whitespace (that's geek for "throw in some blank lines"). Make thoughts look like paragraphs. Something like this:

    Code:
    var maxChar = 251;
    var currentNum = 0;
    var calcCharacters = document.getElementById('ta');
    
    calcCharacters.onkeydown = calcCharacters2;
    
    function calcCharacters2 () {
        alert( "I'm gonna count those chars in ta!" + calcCharacters );
         //calculation of the number of characters in <textarea>;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles