www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help me to get aquainted with JavaScript through a program which counts typing speed.

  1. #1
    Join Date
    Mar 2014
    Posts
    7

    Post Help me to get aquainted with JavaScript through a program which counts typing speed.

    I'm 0 in html/js. Though! I've got interested into JavaScript by "How to truly understand the program that check typing speed". It's very interesting, I even cut out the larger program. Now it's 32-line. And I need some help to feel the language (as of course through the understanding of "my program"):
    http://lanother.tk/rc.php (see it's source please):

    It's also have a slpendid "screen" http://s22.postimg.org/o179m581d/image.jpg

    Who could help me? (The example of the first question: "As I could understand the output part of the program is in XXX.innerHTML=XXXX.join("") and considering that screen output is in that form it is somehow linked with <span> tag via first XXX (res)"

    I've got the number of questions in order to understand how the program's mechanism work. The first task for me was to find when program starts how does it iterate. It might be better to make the program in the more logical way first to understand the unknown JS operators (all of them)? There are 5 functions. And typoSetup is invoked 2 times. Also there are two parts of <script> areas. When I cut out <body> and <head> the program's got still working (I've read that a browser somehow restores logic of tags and program finally get right by itself). Earlier I noticed that first is the second script ( document.getElementByid('typoCalcBtn').onclick = typoCalculate; typoInit(); The former calls for the declarative programs part (with functions?).

    And those are all questions and it's just the beginning....

    Thank greatly for your attention!

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,506
    If you want help, you should post any code you are having problems with and use the forum tags to wrap the code blocks so that they are easier to read.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Mar 2014
    Posts
    7
    <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;
    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>

  4. #4
    Join Date
    Mar 2014
    Posts
    19
    A bit more readable..

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="demo">Click the button to do a case-insensitive search for "w3schools" in a string.</p>
    
    <button onclick="myFunction()">Try it</button>
    
    <script type="text/javascript">
        var timing = {
            s: null,
            e: null,
            t: null
        }; // start, end, textbox
        function typoInit() {
            typoSetup();
            var t = timing.t;
    
    console.log("typoInit");
        }
    
        function typoStart() {
            timing.s = timing.e = new Date();
            timing.t.onkeypress = typoContinue;
    console.log("typoStart");
        }
    
        function typoContinue(e) {
            if (!e) e = event;
            timing.e = new Date();
    
    console.log("typoContinue");
    
        }
    
        function typoSetup() {
            timing.t = document.getElementById('typoBox');
            var t = timing.t;
            t.onkeypress = typoStart;
    
    
    console.log("typoSetup");
        }
    
        function typoCalculate() {
            var res = document.getElementById('typoResult');
            if (!res) return;
            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>
    
    </body>
    </html>
    I would guess you are having trouble because of the order of your code. If you fire the getdocbyid before the html has loaded, it wont work because it wont find the element.

    a solution is to use a window.onload event to fire the method after the window has loaded.

    With regards to the closing of tags and markup - all browsers are a little bit.. or a lot.. different. IE for instance, is on the whole crappy with syntax and rather pedantic in most ways - if you have missing closing tags, it will fall over, chrome etc are better and 'interpretting' poor code, but that is not always a good thing.

    You want to, ideally, have all your functions in a main js file and put any necessary page calls on the main page that needs them - all though there are many fancy ways of calling functions.

    Also, have a look at jquery as that will get you where you wanna a bit quicker, given its fairly simple things you are doing.

  5. #5
    Join Date
    Mar 2014
    Posts
    7
    Quote Originally Posted by daam View Post
    A bit more readable..

    I would guess you are having trouble because of the order of your code. If you fire the getdocbyid before the html has loaded, it wont work because it wont find the element.

    a solution is to use a window.onload event to fire the method after the window has loaded.
    Done.
    <input id="b"onblur="l()"></input><script>t=0;document.getElementById('b').onkeypress=function(){t==0?s=new Date():e=new Date();t=1}
    function l(){d=e.getTime()-s.getTime();c=b.value.length;b.value+=" c"+c+"ms"+d+" cpms"+c/d}</script>

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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