Lekce 24 - Práce s čísly a knihovna Math v JavaScriptu

V předchozím kvízu, Kvíz - Pokročilé podmínky a cykly v JavaScriptu, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Dnes se v JavaScript tutoriálu podrobně podíváme na práci s čísly a představíme si knihovnu Math, která poskytuje užitečné matematické funkce.

Práce s čísly

S čísly lze samozřejmě provádět většinu nám známých základních operací jako sčítání, odečítání, násobení a dělení. Použijeme k tomu známé operátory +, -, * a /. Na rozdíl od některých jiných jazyků (například Java nebo C#) JavaScript nerozlišuje mezi celými a desetinnými čísly, a proto je dělení vždy desetinné, nikoliv celočíselné.

Pro výpočet zbytku po celočíselném dělení, známého jako modulo, slouží operátor %.

Procenta se na české klávesnici napíší pomocí Shift a následující klávesy:

Kromě klasických operátorů si připomeňme operátory unární. Zápis i++ použijeme zejména ve for cyklu, v němž takto zvyšujeme hodnotu proměnné i o 1. Kdybychom chtěli tuto hodnotu naopak snižovat, použijeme zápis i--.

Existují také méně používané prefixové varianty ++i a --i, které se liší v pořadí provedení operace. Hodnota proměnné se nejprve zvýší nebo sníží a teprve poté se použije. U běžnější postfixové varianty (i++, i--) se nejprve použije původní hodnota a až následně dojde k jejímu navýšení nebo snížení.

Nakonec zmiňme operátory přiřazení s operací jako +=, -=, *=, \= a další. Ty umožňují zkrátit například zápis a = a + 5; na a += 5;. Obdobně lze takto hodnotu proměnné odečítat, násobit nebo dělit.

Pojďme si ale ukázat další možnosti, jak pracovat s čísly.

Zápis čísel

Čísla lze zapsat dvěma způsoby. Klasickým zápisem, jak jsme zvyklí:

const x = 10;
const y = 2.25;

Tento zápis je nejběžnější a používá se pro většinu numerických operací.

Druhý způsob představuje exponenciální zápis, známý také jako zápis s pohyblivou desetinnou čárkou:

const x = 23e5;
const y = 146e-7;

Využívá notace e nebo E, která reprezentuje "krát deset na mocninu". Je užitečný při deklaraci proměnných s velmi velkým nebo velmi malým číslem. Proměnná x v naší ukázce obsahuje číslo 2 300 000 (23*10^5), proměnná y číslo 0,0000146 (146*10^-7).

Stříšku ^ píšeme na české klávesnici pomocí Pravého ALT a klávesy š:

Funkce isNaN()

Pomocí této funkce zjistíme, zda je v proměnné uložená číselná hodnota:

const jmeno = "Bára";
const vek = 22;
const vyska = "168 cm";
const telefonniCislo = "123456789";

console.log("Proměnná jmeno není číslo: " + isNaN(jmeno));
console.log("Proměnná vek není číslo: " + isNaN(vek));
console.log("Proměnná vyska není číslo: " + isNaN(vyska));
console.log("Proměnná telefonniCislo není číslo: " + isNaN(telefonniCislo));

NaN je zkratkou pro Not a Number. Funkce isNaN() vrátí false, pokud jí v parametru předáme číslo. Za číslo považuje i řetězec obsahující pouze číslice. Například pro proměnnou telefonniCislo vrátí false, protože řetězec obsahuje jen čísla. Naopak pro proměnnou vyska vrátí true, protože obsahuje i text cm:

Proměnná jmeno není číslo: true
Proměnná vek není číslo: false
Proměnná vyska není číslo: true
Proměnná telefonniCislo není číslo: false

Formátování čísel

Číselné hodnoty můžeme dále formátovat pomocí následujících metod:

• toString() – Převede číslo na textový řetězec. Tato metoda má nepovinný parametr, v němž lze specifikovat požadovanou číselnou soustavu.
• toPrecision() – Zaokrouhlí číslo na zadaný počet požadovaných znaků (přesněji řečeno na zadaný počet významných číslic, v případě potřeby doplní nuly nebo použije exponenciální zápis) a vrátí ho jako řetězec.
• toExponential() – Převede číslo na exponenciální notaci a vrátí ho jako řetězec. V parametru uvádíme počet desetinných míst v exponenciálním zápisu.

Ukažme si to prakticky:

const polomer = 123.456;
const obsah = 47857.942;
const id = 228;

console.log(polomer.toPrecision(4));
console.log(obsah.toPrecision(2));
console.log(obsah.toExponential(3));
console.log(id.toString());
console.log(id.toString(16));
console.log(typeof id.toString());

Proměnné polomer a obsah jsme zaokrouhlili pomocí toPrecision(). U obsah jsme navíc použili toExponential() pro exponenciální tvar. id jsme převedli na text pomocí toString() a také na šestnáctkový zápis, přičemž výsledek zůstal typu string:

123.5
4.8e+4
4.786e+4
228
e4
string

Vlastnosti MAX_VALUE a MIN_VALUE

Při matematických výpočtech a manipulaci s čísly bývá důležité zkontrolovat, zda naše hodnoty nepřekračují extrémní rozsahy. K tomu využijeme vlastnosti MAX_VALUE a MIN_VALUE, které nám vrátí největší nebo nejmenší kladné číslo v JavaScriptu:

const nejvetsiHodnota = Number.MAX_VALUE;
const nejmensiHodnota = Number.MIN_VALUE;

console.log("Největší možná hodnota: " + nejvetsiHodnota);
console.log("Nejmenší možná hodnota (větší než 0): " + nejmensiHodnota);

Výsledek v prohlížeči:

Největší možná hodnota: 1.7976931348623157e+308
Nejmenší možná hodnota (větší než 0): 5e-324

Knihovna Math

Základní matematické funkce jsou v JavaScriptu obsaženy v knihovně Math.

Konstanty PI a E

Knihovna nám poskytuje dvě základní konstanty PI a E. Konstanta PI je pochopitelně číslo pí (3.1415...) a E je Eulerovo číslo, tedy základ přirozeného logaritmu (2.7182...). Konstanty bychom mohli použít například takto:

console.log("Hodnota čísla PI: " + Math.PI);
console.log("Hodnota Eulerova čísla: " + Math.E);

Výstup:

Hodnota čísla PI: 3.141592653589793
Hodnota Eulerova čísla: 2.718281828459045

Knihovna nám dále poskytuje velmi užitečné funkce pro výpočty. Podívejme se na ty nejzákladnější.

Nalezení minima a maxima

Funkce min() a max() slouží k nalezení nejmenšího a největšího čísla z předaných argumentů:

console.log("Nejmenší ze zadaných čísel je: " + Math.min(3, 1, 5, -2));
console.log("Největší ze zadaných čísel je: " + Math.max(3, 1, 5, -2));

V prohlížeči se vypíše:

Nejmenší ze zadaných čísel je: -2
Největší ze zadaných čísel je: 5

Umocnění a odmocnění

Pro práci s mocninami a odmocninami využijeme funkce:

• pow(x, y) – Vrátí hodnotu x umocněnou na y.
• sqrt(x) – Vrátí druhou odmocninu z čísla x.

Použijeme je takto:

console.log("Dvě na třetí je: " + Math.pow(2, 3));
console.log("Druhá odmocnina z 16 je: " + Math.sqrt(16));

Výsledek:

Dvě na třetí je: 8
Druhá odmocnina z 16 je: 4

Zaokrouhlování

JavaScript nabízí několik možností zaokrouhlování čísel:

• round(x) – Zaokrouhlí číslo x na nejbližší celé číslo (podle pravidel matematiky).
• ceil(x) – Zaokrouhlí číslo x směrem nahoru.
• floor(x) – Zaokrouhlí číslo x směrem dolů. V podstatě odstraní desetinnou část čísla.

Ukažme si vše opět na jednoduchém příkladu:

console.log("Zaokrouhlení čísla 4.7 na celé číslo: " + Math.round(4.7));
console.log("Zaokrouhlení čísla 4.1 směrem nahoru: " + Math.ceil(4.1));
console.log("Zaokrouhlení čísla 4.9 směrem dolů: " + Math.floor(4.9));

Výstup:

Zaokrouhlení čísla 4.7 na celé číslo: 5
Zaokrouhlení čísla 4.1 směrem nahoru: 5
Zaokrouhlení čísla 4.9 směrem dolů: 4

Absolutní hodnota

Funkce abs() vrátí absolutní hodnotu zadaného čísla:

console.log("Absolutní hodnota čísla -7: " + Math.abs(-7));

Výstup:

Absolutní hodnota čísla -7: 7

Náhodná čísla

Náhodná čísla generujeme pomocí funkce random(). Tato funkce generuje náhodné číslo v intervalu <0, 1), kde 0 je zahrnuta a 1 nikoli. Výsledné číslo tak může být například 0.9999, ale nikdy přesně 1.

V případě, že bychom chtěli získat náhodné číslo od nuly do desíti, musíme původní hodnotu vynásobit 10. Pokud potřebujeme vygenerovat celé číslo od nuly do desíti (včetně), původní hodnotu vynásobíme 11 a odstraníme desetinnou část pomocí funkce floor():

console.log("Náhodné číslo mezi 0 a 1: " + Math.random());
console.log("Náhodné číslo mezi 0 a 10: " + Math.random() * 10);
console.log("Náhodné celé číslo mezi 0 a 10: " + Math.floor(Math.random() * 11));

Výstup v prohlížeči:

Náhodné číslo mezi 0 a 1: 0.512265192694111
Náhodné číslo mezi 0 a 10: 2.1224943945520947
Náhodné celé číslo mezi 0 a 10: 1

const uhelStupne = 90;
const uhelRadiany = uhelStupne * (Math.PI / 180);

console.log("Sinus úhlu 90 stupňů: " + Math.sin(uhelRadiany));
console.log("Kosinus úhlu 90 stupňů: " + Math.cos(uhelRadiany));

Sinus úhlu 90 stupňů: 1
Kosinus úhlu 90 stupňů: 6.123233995736766e-17

console.log("Přirozený logaritmus čísla 10: " + Math.log(10));

Zjišťování datového typu proměnné

Datový typ proměnné zjistíme pomocí operátoru typeof. Ukažme si to na jednoduchém příkladu:

const delka = 16;
const sirka = 7.5;
const jednotka = "cm";
const jeDelsi = true;
let barva;

console.log("Proměnná delka je datového typu: " + typeof delka);
console.log("Proměnná sirka je datového typu: " + typeof sirka);
console.log("Proměnná jednotka je datového typu: " + typeof jednotka);
console.log("Proměnná jeDelsi je datového typu: " + typeof jeDelsi);
console.log("Proměnná barva je datového typu: " + typeof barva);

V kódu jsme deklarovali několik proměnných a přiřadili jim různé hodnoty. Jejich datové typy zjišťujeme pomocí operátoru typeof. Můžeme si všimnout, že při jeho použití nepíšeme zjišťovanou hodnotu do závorek, jako je tomu u běžného volání funkcí – typeof je skutečně operátor, nikoliv funkce. Všechny zjištěné datové typy následně vypisujeme do dokumentu:

Proměnná delka je datového typu: number
Proměnná sirka je datového typu: number
Proměnná jednotka je datového typu: string
Proměnná jeDelsi je datového typu: boolean
Proměnná barva je datového typu: undefined

V příští lekci, Obrázky a kreslení na canvas v JavaScriptu, se budeme věnovat práci s obrázky.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.