Lekce 25 - 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 reálné, 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é varianty ++i a --i, které lze využít při výpisu aktuální hodnoty proměnné. Daná hodnota se nejprve vypíše a ihned poté dojde k jejímu navýšení nebo snížení.

Nakonec zmiňme operátory přiřazení s operací – +=, -=, *= 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.

Klasický a exponenciální zápis čísel

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

let x = 10;
let 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:

let x = 23e5;
let 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:

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

document.body.innerHTML += isNaN(jmeno) + "<br />";
document.body.innerHTML += isNaN(vek) + "<br />";
document.body.innerHTML += isNaN(vyska) + "<br />";
document.body.innerHTML += 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:

Formátování čísel

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

• 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.
• toString() – Převede číslo na textový řetězec. Tato metoda má nepovinný parametr, v němž lze specifikovat požadovanou číselnou soustavu.

Ukažme si to prakticky:

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

document.body.innerHTML += polomer.toPrecision(4) + "<br />";
document.body.innerHTML += obsah.toPrecision(2) + "<br />";
document.body.innerHTML += obsah.toExponential(3) + "<br />";
document.body.innerHTML += id.toString() + "<br />";
document.body.innerHTML += id.toString(16) + "<br />";
document.body.innerHTML += 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:

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:

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

document.body.innerHTML += "Největší možná hodnota: " + nejvetsiHodnota + "<br />";
document.body.innerHTML += "Nejmenší možná hodnota (větší než 0): " + nejmensiHodnota;

Výsledek v prohlížeči:

Knihovna Math

Základní matematické funkce jsou v JavaScriptu obsaženy v knihovně Math. 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:

document.body.innerHTML += "Hodnota čísla PI: " + Math.PI + "<br>";
document.body.innerHTML += "Hodnota Eulerova čísla: " + Math.E;

Výstup:

Funkce knihovny Math

Knihovna nám také 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ů:

document.body.innerHTML += "Nejmenší ze zadaných čísel je: " + Math.min(3, 1, 5, -2) + "<br>";
document.body.innerHTML += "Největší ze zadaných čísel je: " + Math.max(3, 1, 5, -2);

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

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:

document.body.innerHTML += "Dvě na třetí je: " + Math.pow(2, 3) + "<br>";
document.body.innerHTML += "Druhá odmocnina z 16 je: " + Math.sqrt(16);

Výsledek:

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ů.

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

document.body.innerHTML += "Zaokrouhlení čísla 4.7 na celé číslo: " + Math.round(4.7) + "<br>";
document.body.innerHTML += "Zaokrouhlení čísla 4.1 směrem nahoru: " + Math.ceil(4.1) + "<br>";
document.body.innerHTML += "Zaokrouhlení čísla 4.9 směrem dolů: " + Math.floor(4.9);

Výstup:

Absolutní hodnota

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

document.body.innerHTML += "Absolutní hodnota čísla -7: " + Math.abs(-7);

Výstup:

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 zaokrouhlíme funkcí floor():

document.body.innerHTML += "Náhodné číslo mezi 0 a 1: " + Math.random() + "<br>";
document.body.innerHTML += "Náhodné číslo mezi 0 a 10: " + Math.random() * 10 + "<br>";
document.body.innerHTML += "Náhodné celé číslo mezi 0 a 10: " + Math.floor(Math.random() * 11);

Výstup v prohlížeči:

Goniometrické funkce

JavaScript poskytuje základní goniometrické funkce, které pracují s úhly v radiánech:

• Math.sin(x) – Vrátí sinus úhlu x.
• Math.cos(x) – Vrátí kosinus úhlu x.

Pro převod stupňů na radiány použijeme vzorec stupně * (Math.PI / 180):

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

document.body.innerHTML += "Sinus úhlu 90 stupňů: " + Math.sin(uhelRadiany) + "<br>";
document.body.innerHTML += "Kosinus úhlu 90 stupňů: " + Math.cos(uhelRadiany);

Výsledek:

Funkce pro logaritmus

Přirozený logaritmus zadaného čísla získáme pomocí funkce log():

document.body.innerHTML += "Přirozený logaritmus čísla 10: " + Math.log(10);

Výstup:

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:

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

document.body.innerHTML += typeof delka + "<br />";
document.body.innerHTML += typeof sirka + "<br />";
document.body.innerHTML += typeof jednotka + "<br />";
document.body.innerHTML += typeof jeDelsi + "<br />";
document.body.innerHTML += 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:

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š.