Výpočet času sťahovania dát pomocou JavaScriptu

Dnes by som vám ukázal ako je možné jednoducho pomocou JavaScriptu a HTML formulárov vytvoriť jednoduchý skript na výpočet času potrebného na stiahnutie daného množstva dát, danou prenosovou kapacitou.

Samozrejme, keďže som použil JavaScript, tak výpočet je len teoretický, lebo JavaScript neponúka metódy na zistenie reálnej prenosovej kapacity daného spojenia. Tento skript sa dá použiť na stránkach, aby si užívateľ pred tým, ako začne sťahovať súbor(y), mohol predbežne vypočítať čas strávený týmto sťahovaním. Aby som vás dlho nenapínal, ukážku nájdete tu.

V ukážke som okrem JavaScriptu použil HTML formuláre a kaskádové štýly (CSS). Štýly som použil iba ako ukážku vylepšenia vzhľadu formulárov a ich použitie nie je vôbec závislé od funkcie skriptu. Z HTML formulárov som použil textové polia, tlačítka a roletové menu.

Roletové menu som využil na výber prenosovej rýchlosti (prenosovej kapacity) spojenia a na výber jednotiek množstva dát. Textové pole som použil na zadanie množstva dát a tiež aj na zobrazenie konečného výsledku, čiže času. Použitie tlačítiek je myslím jasné. Teraz budem popisovať jednotlivé časti HTML dokumentu – definíciu štýlov, formulárov a nakoniec jedinú funkciu JavaScriptu, ktorá vykoná daný výpočet. Samozrejme pre lepšiu orientáciu odporúčam pozrieť si zdrojový kód príkladu.

Kaskádové štýly:

Tu som definoval niekoľko štýlov. Prejdem ich narýchlo, keďže nie sú potrebné pre správne fungovanie skriptu.

• BODY – farba textu a pozadia pre celú stránku
• .prvok – tiež farba textu a pozadia a tiež aj rez písma pre všetky prvky formuláru okrem tlačítok
• .tlacitko – to isté ako .prvok, ale pre tlačítka – je to preto lebo majú vymenené farby
• .form – tu je definovaná šírka formuláru a jeho orámovanie

Teraz uvediem postupne po riadkoch definovanie samotných prvkov formuláru.

Formulár treba pomenovať, aby som potom mohol JavaScriptom pristupovať k jednotlivým prvkom formulára. Na to slúži parameter name. Parametrom class som priradil triedu CSS celému formuláru.

Výber prenosovej rýchlosti:

Tág select označuje celý roletové menu. Tak isto má definovaný atribút name a class. Tágy option sú jednotlivé položky menu. Atribút value označuje vybranú položku a je to vlastne hodnota tágu select. Pomocou nej viem, ktorá položka menu bola vybratá. Atribút selected označuje preddefinovanú počiatočnú položku. Tak isto je aj definované roletové menu výberu jednotiek množstva dát:

Tento prvok predstavuje textové pole na zadanie počtu prenášaných dát. Atribút type označuje, že sa práve jedná o textové pole; maxlength je dĺžka reťazca, ktorý je možné do tohoto poľa vpísať; size je veľkosť (šírka) zobrazovaného prvku; value je počiatočná hodnota poľa, resp. toho, čo sa do neho vpíše pri jeho zobrazení; name a class som už vysvetľoval. Presne takto isto som vytvoril aj formulár pre konečný výsledok, resp. čas:

Toto textové pole je uživateľom editovateľné, ale pridaním atribútu disabled môžem dosiahnúť, aby toto pole nebolo editovateľné. No a posledným prvkom formulára sú tlačítka. Použil som dve – jedno na výpočet času a druhé na zresetovanie formulára.

Typ button označuje, že prvkom je tlačítko. Atribút value je text tlačítka; Udalosť onClick spôsobí, že keď sa na tlačítko klikne, tak sa zavolá funkcia Vypocet(). Podobne je na tom aj tlačítko na vymazanie (zresetovanie) formulára,

pričom typ reset je zabudovaný typ a automaticky zresetuje formulár, v ktorom je definovaný. Ostáva už iba popísať funkciu Vypocet(), ktorá je napísaná v JavaScripte.

Pochopeniu by mali napomôcť aj komentáre v samotnom skripte. Najprv som si definoval premenné:

• mn – užívateľom definované množstvo, vyčítané z formuláru
• JednMn – jednotkové množstvo, podľa typu jednotiek (megabajty (MB), alebo kilobajty (KB)) prenesené za 1 sekundu
• CasS – celkový čas v sekundách, potrebný na prenesenie požadovaného množstva s danou priepustnosťou
• HH, MM, SS – hodiny, minúty a sekundy odvodené (vypočítané) z CasS

Uvediem poznámku pre prístup pomocou JavaScriptu k jednotlivým prvkom formulára. Všeobecne sa k nim pristupuje pomocou objektu forms takto:

Ja si v príklade vystačím s vlastnosťou value, v ktorej je uložená hodnota vybraná/zadaná užívateľom v danom prvku formulára. Teda v tomto riadku

som premennej mn priradil číslo, ktoré užívateľ zadal do prvku pomenovaného size, formulára s menom dwnd. Ak si pozriete definíciu formuláru a ich prvkov v tomto príklade, ktoré sú uvedené vyššie, tak uvidíte, že formulár má meno dwnd a prvok s menom size je textové pole slúžiace na zápis veľkosti dát.

Potom pomocou príkazu if-else zisťujem, či sú jednotlivé dáta zadané v megabajtoch (MB), alebo kilobajtoch (KB).Tu si dovolím uviesť poznámku: Prenosové rýchlosti sú uvedené podľa modemov, kde sa udávajú v baudoch, čo je vlastne v bitoch za sekundu. Potom sú medzi MB a KB a bitmi nasledujúce vzťahy:

1 kilobajt KB = 1024 bajtov B = 8 x 1024 bitov, lebo 1B = 8 bitov 1 megabajt MB = 1024 KB

Teda ak sú vybraté kilobajty, tak sa vypočíta jednotkové množstvo prenesené za 1 sekundu vzhľadom na prenosovú rýchlosť (document.forms.dwnd.spd.value) a je to množstvo v kilobajtoch. Ak sa nejedná o kilobajty, tak musia byť vybrané megabajty, lebo toto rozbaľovacie menu má iba dve položky:

toto je teda jednotkové množstvo v megabajtoch. Ďalej som vypočítal celkový čas prenosu dát v sekundách. Množstvo som vydelil jednotkovým množstvo. Lebo najmenšou jednotkou, s ktorou počítam je sekunda, tak som výsledný čas v sekundách zaokrúhlil pomocou matematickej funkcie round() objektu Math:

Ďalej už iba prepočítavam celkový čas v sekundách na hodiny, minúty a sekundy. Tu používam ešte jednu funkciu z objektu Match – floor(). Táto funkcia vráti najbližšie celé číslo, ktoré je menšie alebo rovné zadanému číslu. Teda v podstate odrežem vždy desatinnú časť čísla.

Výpočet sekúnd:

Od celkového času v sekundách (je už zaokrúhlený) odčítam celé (bez desatinného miesta) minúty(Math.floor(CasS/60)) a tie (minúty) potom vynásobím 60-timi. Takto som dostal zvyšné sekundy. Podobný princíp použijem pri výpočte minút:

Od celých minút odčítam celé hodiny (Math.floor(CasS/3600)) a tie sú znova vynásobené 60-timi. No a u hodín je to jasné – sú to celé hodiny:

Takto som teda dostal postupne zložky času – hodiny, minúty a sekundy. Ostala iba jedna maličkosť – síce, že keď je hodina, minúta, alebo sekunda len jednociferná tak sa obvykle píše pred tú jednu cifru ešte nula. To som dosiahol podmienkou, že ak je daná hodnota menšia ako 10, tak sa jednoducho pred ňu pridá nula:

Takto som to urobil aj pre minúty a hodiny. Ostáva teda už iba jediné – zapísať tieto hodnoty do textového poľa na to určeného:

Tak a to je všetko. Snáď ste úplne pochopili ako sa jednoducho pracuje s formulármi, resp. ich prvkami. Tento príklad má veľké množstvo možných modifikácií. Napr. prenosové rýchlosti sa nemusia zadávať cez roletové menu, ale cez textové pole, prípadne výpis výsledného času nemusí byť v textovom poli, ale iba napr. v pomocnom okne, pomocou metódy window.alert(), alebo je tiež možné pomocou DOM-u (document object model) zmeniť priamo text na stránke, t.j. výsledná hodnota by mohla byť iba ako „normálny“ text na stránke. Možností je veľa a je to iba na vás.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.