h of 32 lines: why the dot-like hierarchy of variables takes place?
<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>
<!--2-->
<form name="foo" onsubmit="return false;">
<textarea id="typoBox"></textarea><br />
<input type="button" id="typoCalcBtn" value="Ok" />
<span id="typoResult"></span> </form>
<!--3-->
<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:
-
Main question: What is
<span id="typoResult"></span>and why it is used? -
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). -
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.
-
if (!res) return- I just don’t understand it -
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! -
Why scripts have two segments (why not one)? - puzzling span should be before/or in the middle of them?
-
<form name="foo" onsubmit="return false;"> . "return false;"The meaning in the form’s contest of the “return false”,; -
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 http://lanother.tk/ and this is http://lanother.tk/rc.php.
