24. diel - Práca s číslami a knižnica Math v JavaScripte

V predchádzajúcom kvíze, Kvíz - Pokročilé podmienky a cykly v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

Dnes sa v JavaScript tutoriále podrobne pozrieme na prácu s číslami a predstavíme si knižnicu Math, ktorá poskytuje užitočné matematické funkcie.

Práca s číslami

S číslami je možné samozrejme vykonávať väčšinu nám známych základných operácií ako sčítanie, odčítanie, násobenie a delenie. Použijeme na to známych operátorov +, -, * a /.

Mali by sme už vedieť tiež vypočítať zvyšok po celočíselnom delení, takzvané modulo, pre ktoré využívame operátor %.

Percentá sa na slovenskej klávesnici napíšu pomocou Shift a nasledujúce klávesy:

Okrem klasických operátorov si pripomeňme operátorov unárne. Zápis i++ použijeme najmä vo for cykle, v ktorom takto zvyšujeme hodnotu premennej i o 1. Keby sme chceli túto hodnotu naopak znižovať, použijeme zápis i--. Existujú aj varianty ++i a --i, ktoré je možné využiť pri výpise aktuálnej hodnoty premennej. Daná hodnota sa najprv vypíše a ihneď potom dôjde k jej navýšeniu alebo zníženiu.

Nakoniec spomeňme operátorov priradenia s operáciou – +=, -=, *= a ďalšie. Tie umožňujú skrátiť napríklad zápis a = a + 5; na a += 5;. Podobne je možné takto hodnotu premennej odčítať, násobiť alebo deliť.

Poďme si ale ukázať ďalšie možnosti, ako pracovať s číslami.

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

Čísla je možné zapísať dvoma spôsobmi. Klasickým zápisom, ako sme zvyknutí. Tento zápis je najbežnejší a používa sa pre väčšinu numerických operácií:

let x = 10;
let y = 2.25;

Druhý spôsob predstavuje exponenciálny zápis, známy tiež ako zápis s pohyblivou desatinnou čiarkou. Využíva notácie e alebo E, ktorá reprezentuje "krát desať na mocninu". Je užitočný pri deklarácii premenných s veľmi veľkým alebo veľmi malým číslom:

let x = 23e5; // 2 300 000 (= 23*10^5)
let y = 146e-7; // 0,0000146 (= 146*10^-7)

Funkcia isNaN()

Pomocou tejto funkcie zistíme, či je v premennej uložená číselná hodnota.

NaN je skratkou Not a Number a funkcia vracia true, pokiaľ v premennej nenájde číslo:

let name = "Barbara";
let age = 22;
let height = "168 cm";
let phoneNumber = "123456789";

document.write(isNaN(name) + "<br />");
document.write(isNaN(age) + "<br />");
document.write(isNaN(height) + "<br />"); // returns true
document.write(isNaN(phoneNumber)); // returns false

Výsledok v prehliadači:

Formátovanie čísel

Číselné hodnoty môžeme formátovať pomocou nasledujúcich metód:

• toPrecision() – Oreže číslo na počet požadovaných znakov, ktoré uvedieme v parametri (v zátvorkách) metódy.
• toExponential() – Prevedie číslo na exponenciálnu notáciu, v parametri uvádzame počet desatinných miest v exponenciálnom zápise.
• toString() – Prevedie číslo na textový reťazec. Táto metóda má nepovinný parameter, v ktorom je možné špecifikovať požadovanú číselnú sústavu (2 - 36).

Ukážme si to prakticky:

let radius = 123.456;
const volume = 47857.942;
let id = 228;

document.write(radius.toPrecision(4) + "<br />");
document.write(volume.toPrecision(2) + "<br />");
document.write(volume.toExponential(3) + "<br />");
document.write(id.toString() + "<br />");
document.write(id.toString(16) + "<br />");
document.write(typeof id.toString());

Výsledok v prehliadači:

Vlastnosti MAX_VALUE a MIN_VALUE

Pri matematických výpočtoch a manipulácii s číslami býva dôležité skontrolovať, či naše hodnoty neprekračujú extrémne rozsahy. K tomu využijeme vlastnosti MAX_VALUE a MIN_VALUE, ktoré nám vrátia najväčšie alebo najmenšie kladné číslo v JavaScripte:

let largestValue = Number.MAX_VALUE;
let smallestValue = Number.MIN_VALUE;

document.write("Largest possible value: " + largestValue + "<br />");
document.write("Smallest possible value (greater than 0): " + smallestValue);

Výsledok v prehliadači:

Knižnica Math

Základné matematické funkcie sú v JavaScripte obsiahnuté v knižnici Math. Knižnica nám poskytuje dve základné konštanty PI a E Konštanta PI je pochopiteľne číslo Pí (3.1415...) a E je Eulerovo číslo, teda základ prirodzeného logaritmu (2.7182...).

Tu sú najčastejšie používané konštanty a funkcie:

Math.PI         // PI number
Math.E          // Euler's number
Math.min()      // returns the smallest number
Math.max()      // returns the largest number
Math.pow()      // power, we enter the base and exponent in the parameter
Math.sqrt()     // square root
Math.random()   // random number 0 – 1
Math.abs()      // the absolute value of a number
Math.round()    // rounding
Math.ceil()     // rounding up
Math.floor()    // rounding down
Math.cos()      // cosine
Math.sin()      // sine
Math.log()      // natural logarithm (based on Euler's number)

Goniometrické funkcie (sin(), cos() a ďalšie) vracajú hodnotu pre uhol v radiánoch, ktorý odovzdáme ako parameter.

Ukážme si pár konkrétnych príkladov. Začneme mocninou:

let base = 2;
let exponent = 3;
let power = Math.pow(base, exponent);
document.write(base + " to the power of " + exponent + " is " + power);

Výsledok v prehliadači:

Takto vypočítame odmocninu:

let base = 9;
let squareRoot = Math.sqrt(base);
document.write("Square root of the number " + base + " is " + squareRoot);

Výsledok v prehliadači:

Nakoniec si ukážeme použitie funkcie sin(). Tá ako parameter berie uhol v radiánoch, vstup v stupňoch musíme teda najskôr na radiány previesť:

let angleInDegrees= 90;
let angleInRadians= angleInDegrees * (Math.PI / 180); // degrees to radians conversion
let result = Math.sin(angleInRadians);
document.write("Sine of an angle " + angleInDegrees + " degrees is " + result);

Výsledok v prehliadači:

Zisťovanie dátového typu premennej

Dátový typ premennej zistíme pomocou operátora typeof. Ukážme si to na jednoduchom príklade. Deklarujeme v ňom niekoľko premenných a následne vypíšeme ich dátový typ:

let length = 16;
let width = 7.5;
const unit = "cm";
let isLonger = true;
let color;

document.write(typeof length + "<br />");
document.write(typeof width + "<br />");
document.write(typeof unit + "<br />");
document.write(typeof isLonger + "<br />");
document.write(typeof color);

V prehliadači sa nám vypíše:

V budúcej lekcii, Obrázky a kreslenie na canvas v JavaScripte, sa budeme venovať práci s obrázkami.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.