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 3 of 3
Like Tree1Likes
  • 1 Post By sunfighter

Thread: Compactify & rewrite "typing speed check" (cut out functions) to learn. Explain eac

  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post Compactify & rewrite "typing speed check" (cut out functions) to learn. Explain eac

    h of 32 lines: why the dot-like hierarchy of variables takes place?




    Code:
    <script type="text/javascript">
        var timing = {s: null, e: null, t: null}; // start, end, textbox
                function typoInit()       {
                    typoSetup();
                    var t = timing.t; }
                function typoStart()                        {
                    timing.s = timing.e = new Date();
                    timing.t.onkeypress = typoContinue; }
                function typoContinue(e)       {
                    if (!e) e = event;
                    timing.e = new Date(); }
                function typoSetup()              {
                    timing.t = document.getElementById('typoBox');
                    var t = timing.t;
                    t.onkeypress = typoStart; }
                function typoCalculate()                            {
        var res = document.getElementById('typoResult');
        if (!res) return;`;`. mnbv
        var deltams, chars, cpms, snippets;
        deltams = timing.e.getTime() - timing.s.getTime();
        chars = timing.t.value.length;
        cpms = chars / deltams;
        snippets = [ "", chars, " characters (in ", deltams, " ms): ", cpms, " cpms" ];
        res.innerHTML=snippets.join(""); typoSetup();                  } </script>
         <form name="foo" onsubmit="return false;">
            <textarea id="typoBox"></textarea><br />
            <input type="button" id="typoCalcBtn" value="Ok" />
        <span id="typoResult"></span> </form>
        <script type="text/javascript">
            document.getElementById('typoCalcBtn').onclick = typoCalculate;    typoInit();
        </script>
    One man kindly explained me some structure outline. Okay, to be true the program was cut down from 90 lines and it still works.

    > Object timing contains variables: s, e в in format: Date – this is the
    > time of the typing text beginning and ending time, & t, presenting
    > itself as a DOM element – as a textbox.
    >
    > Function typoStart zeroes out timing.s value and timing.e and assigns
    > typoContinue function to the onkeypress event for "our textbox".
    >
    > Function typoContinue receives a pressed keystroke, assigns current
    > time to timing.e.
    >
    > Function typoSetup defines, that timing.t – is "our textbox". Launches
    > typoStart in case of pressing a button.
    >
    > Function typoInit launches & typoSetup does nothing special.
    >
    > And finally the main function is – typoCalculate:
    >
    > 1. Defines, where to output the result (res variable)
    >
    > 2. deltams = start time minus ending time if the time and end of the
    > text typing ≠ zero (i.e. somebody typed a text). deltams simplifies
    > the program showcase by just showing .getTime()
    >
    > 3. сhars = the quantity of typed symbols
    >
    > 4. snippets – is an information array, which we output as being the
    > results
    >
    > 5. Basically we output the result and launch typoSetup again (we're
    > waiting new keypresses).



    QUESTIONS:

    1. Main question: What is `<span id="typoResult"></span>` and why it is used?

    2. `res.innerHTML=snippets.join("")` - why specifically this? Do we always output like this (document.write ...)? And why we display the output as an array (I know there're loops L: mov cx,3 loop L).

    3. OOP and DOM are extremely hard. Is there a more simply way of programming my "touching speed"? I mean the hierarchy of dot-parameters and variables seem complicated.

    4. `if (!res) return` - I just don't understand it

    5. `document.getElementById('typoCalcBtn').onclick` =
    Can it be without a function? And ById (which get assigns which variable?).
    An explanation to 5: a function (functions) is called and it complicates perception in learning.
    And functions are called twice separately from lower <script>.
    My program starts with ById - so the tracing (&there's no debugger!!!) begins.. from this starting point and takes subroutines.. more and more. Yikes!

    6. Why scripts have two segments (why not one)? - puzzling span should be before/or in the middle of them?

    7. `<form name="foo" onsubmit="return false;"> . "return false;"` The meaning in the form's contest of the "return false",;

    8. `function typoContinue(e){if (!e) e = event;` function typoContinue(e) - It is the only function with e inside the brackets. Receives? - How? And Exclamation mark.

    The full version TITLE and this is http://lanother.tk/rc.php.
    Last edited by VIPStephan; 04-02-2014 at 03:13 PM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,606
    Thanks
    24
    Thanked 647 Times in 646 Posts
    1. Main question: What is `<span id="typoResult"></span>` and why it is used?
    This could have been a div and not a span. Difference is that span is an inline element will show the final information inline with the button. A div is a block element will show it under the button.
    8. `function typoContinue(e){if (!e) e = event;` function typoContinue(e) - It is the only function with e inside the brackets. Receives? - How? And Exclamation mark.
    This is a stab and someone else might correct it if I'm off base. 'e' is a nickname for event, which is an event object. Mostly like a key press. The function typoContinue(e) receives the event when it's called. And this 'if (!e) e = event;' insures it is the event.
    FYI they are called parentheses, because we also have square brackets and curly brackets. I know they are rounded brackets, but have not heard that used in programming.
    7. `<form name="foo" onsubmit="return false;"> . "return false;"` The meaning in the form's contest of the "return false",;
    Don't think this is necessary, because we are not submitting the form. Also the name attribute for a form is not needed.
    4. `if (!res) return` - I just don't understand it
    if the line above "var res = document.getElementById('typoResult');" returns null, and it will if there is not element with an ID of "typoResult", then we end things, rather abruptly.
    2. `res.innerHTML=snippets.join("")` - why specifically this? Do we always output like this (document.write ...)? And why we display the output as an array (I know there're loops L: mov cx,3 loop L).
    The programmer does things different from how I would do them throughout. He couls have just done this:
    Code:
    snippets = chars+" chars (in "+deltams+ " ms): "+cpms+" cpms";
    res.innerHTML = snippets;
    FYI, document.write is not the way to do things using the DOM as I just did is.
    5. `document.getElementById('typoCalcBtn').onclick` =
    Can it be without a function? And ById (which get assigns which variable?)...snip
    This is a listener for the click in element with the above ID. Not how I do it, I don't use listeners. I'd put an 'onclick="typoCalculate();' in the button.
    6. Why scripts have two segments (why not one)? - puzzling span should be before/or in the middle of them?
    Yeah, I don't like it myself. Have redone it below with the functions ordered in the way they work:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <form name="foo" onsubmit="return false;">
    	<textarea id="typoBox"></textarea><br />
    	<input id="btnclc" type="button" value="Calculate" />
    	<span id="typoResult"></span>
    </form>
    
    <script type="text/javascript">
    var timing = {st: null, en: null, tx: null}; // start, end, textbox
    function typoInit(){
    	typoSetup();
    	var tx = timing.tx;
    }
    function typoSetup(){
    	timing.tx = document.getElementById('typoBox');
    	var tx = timing.tx;
    	tx.onkeypress = typoStart;
    }
    function typoStart(){
    	timing.st = timing.en = new Date();
    	timing.tx.onkeypress = typoContinue;
    }
    function typoContinue(en){
    	if (!en) en = event;
    	timing.en = new Date();
    }
    function typoCalculate(){
    	var res = document.getElementById('typoResult');
    	if (!res) return;
    	var deltams, chars, cpms, snippets;
    	deltams = timing.en.getTime() - timing.st.getTime();
    	chars = timing.tx.value.length;
    	cpms = chars / deltams;
    	snippets = [ chars, " chars (in ", deltams, " ms): ", cpms, " cpms" ];
    	res.innerHTML = snippets.join("");
    	typoSetup();
    }
    document.getElementById('btnclc').onclick = typoCalculate;
    typoInit();
    </script>
    </body>
    </html>
    Hope this helps and number 3. is what JS is all about.
    xcislav likes this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    sunfighter,

    Special thanks to you, you as a pioneer of help to me over the net has done a great deal of effort. All things were taken into consideration and used.
    For now.
    ....

    I wouldn't tell you how lanotherTK (a ~5k program, btw not mine) became a tiny-cut ~450 symbol easy-to-understand script lanother.tk/ccc.php - because lots of time and evolution (including naming).

    To treasure our precious "brevity is the soul of wit" I'd like to introduce to you the next stumbling block on the way to a clean "speedcheck [module]".

    Code:
    <textarea id="tb"></textarea>
    <p id="pr" />
    <input onclick="clc();" />
    <script>
    	function initpr() {
    		bx = document.getElementById('tb');
    		bx.onkeypress = function () {
    			ts = te = new Date();
    			bx.onkeypress = function (en) {
    				te = new Date();
    			}
    		}
    	}
    	function clc() {
    		deltams = te.getTime() - ts.getTime();
    		chars = bx.value.length;
    		document.getElementById('pr').innerHTML = chars + " chars (in " + deltams + " ms): " + chars / deltams + " cpms";
    		initpr();
    	}
    	initpr();
    </script>
    Where initpr() is used after a page load and secondly when the second function clc() is invoked. Thus we've got a suprlus. Why do we have to repeat the whole amount of code?
    And I decided just to insert the whole text instead of initpr functions:

    Code:
    <textarea id="tb"></textarea>
    <p id="pr" />
    <input onclick="clc();" />
    <script>
    function clc() {
    deltams = te.getTime() - ts.getTime();
    chars = bx.value.length;
    document.getElementById('pr').innerHTML = chars+" chars (in "+deltams+" ms): "+chars/deltams+" cpms";
    bx = document.getElementById('tb');
    bx.onkeypress = function () {
    ts = te = new Date();
    bx.onkeypress = function (en) {
    te = new Date();
    }
    bx = document.getElementById('tb');
    bx.onkeypress = function () {
    ts = te = new Date();
    bx.onkeypress = function (en) {
    te = new Date();
    }
    </script>
    As you might have guessed it doesn't work. I'm lost in conjectures. The silent transfer of parameters (though there're none) that's common to function() is the uttermost rationale to me.

    I inserted codeblock in the end of clc() and after it (in the end of program).

    I do understand how the clc() work. The whole logic of the program is very dark to me. That's why I wish I could rewrite this small piece with if or with cycles.

    At this point I can't squeeze/divide my program anymore nor recompose it as I cut out the same come after decomposition of larger parts. And I need your professional help in explanation, variants and I beg you less code (as I ate this elephant during a week).

    -------
    Additional thoughts.
    1). initpr(): 2 function, 2 onkeypress, 2 new Date() - and, basically, inner cycles (structures).
    2). When I press a mouse inside a <input onclick="clc();" /> - clc() triggers <p id="pr" /> -to-bottom-substitution (which by itself is very nice).
    Code:
    <textarea id="tb"></textarea>
    <p id="pr" />
    <input onclick="clc();" />
    Though I'd wish to eliminate 1 or 2 lines. Is it possible to write results inside <input > after mouse click or even more to write to the bottom of <textarea>'s block thos "chars,ms,cpms".. with the same id?

    I'm thinking its within possibility because how nice it substitutes <input> with <p>'s results!


  •  

    Posting Permissions

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