Pouze tento týden sleva až 80 % na e-learning týkající se Javy. Zároveň využij akce až 50 % zdarma při nákupu e-learningu - více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
discount 50 + hiring

Lekce 3 - Základní datové typy v JavaScriptu a jejich funkce

V minulé lekci, Začínáme s JavaScriptem - První skripty, jsme si naprogramovali několik prvních skriptů a naučili se pracovat s proměnnými.

Dnes se v JavaScript tutoriálu podrobně podíváme na základní datové typy a to přesněji řetězce, čísla a boolean. Ačkoli JavaScript řeší datové typy do určité míry za nás, nemůžeme se jim úplně vyhýbat a měli bychom rozumět tomu, jak fungují.

Rekapitulace

Javascript je dynamicky typovaný jazyk. Plně nás odstiňuje od toho, že proměnná má nějaký datový typ. Ona ho samozřejmě má, ale nedává nám to najevo. Lze vytvořit proměnnou s číselnou hodnotou, následně ji nastavit objekt a potom desetinné číslo. Jazyk se s tím sám vypořádá a typ automaticky změní. Protože typy u proměnných nemusíme uvádět, začínající programátoři se možná radují, ale časem zjistí, že má tento systém i určité nevýhody. Jedná se zejména o snížení schopností automatické kontroly správnosti kódu.

Základní datové typy jsou tyto:

  • String - text
  • Number - číslo s/bez desetinné čárky
  • Boolean - pravda/nepravda
  • Object
  • Null
  • Undefined

Některé datové typy, jako pole a další objekty, si vysvětlíme později. Ty ostatní si popíšeme dnes. Nový standard ECMA 6 přinesl ještě tzv. symboly, ale k těm se dostaneme až seriálu o OOP.

String

String, v překladu textový řetězec, je řada znaků uložená v za sebou jdoucích bajtech paměti. Maximální délka není přesně specifikována, záleží na interpretu. V některých variantách může být teoreticky nekonečná a je omezena pouze velikostí paměti RAM.

Jak jsme si již vysvětlili dříve, řetězce lze zapisovat pomocí dvojitých nebo i jednoduchých uvozovek. Další možností jsou pak zpětné uvozovky nebo tzv. tupý přízvuk:

let s1 = "nějaký text";
let s2 = 'nějaký text';
let s3 = `nějaký text`;

Všechny 3 proměnné obsahují stejný text "nějaký text". Různé uvozovky nám pak umožňují další techniky, které si dále vysvětlíme.

 Jednoduché uvozovky ' (apostrof) se napíši pomocí klávesy SHIFT a následující klávesy:

Apostrof

Tupý přízvuk na české klávesnici můžeme napsat pomocí pravého ALT a písmene ý:

Tupý přízvuk

Kombinace jednoduchých a dvojitých uvozovek

Uvozovky lze kombinovat i uvnitř řetězce. Pokud tedy např. chceme napsat jednoduchou uvozovku, vložíme řetězec do uvozovek dvojitých a naopak:

let s1 = 'Mám rád znak ", protože se mi líbí.';
let s1 = "David, yes, that's me!";

Escapování

Pokud je potřeba zapsat v řetězci stejnou uvozovku, jako ve kterých je řetězec zapsaný, musí se uvozovka tzv. odescapovat. To aby ji interpret nevyhodnotil jako ukončení řetězce, ale pouze jako obyčejný znak. K tomu se používá zpětné lomítko (\).

 Zpětné lomítko na české klávesnici se napíše pomocí pravého ALT a písmene Q:

Zpětné lomítko

Pro odescapování uvozovky nám už nic nebrání:

let x = "Mám rád znak \", protože se mi líbí.";

Znaky s tímto lomítkem se souhrnně nazývají escape sekvencí. Kromě uvozovek můžeme pomocí lomítka zapsat ještě několik speciálních znaků, které by se nám jinak zapisovali těžko. Zde je jejich seznam:

  • \a - Pípnutí
  • \b - Backspace
  • \f - Přeskočení na další "stánku"
  • \n - Nový řádek
  • \r - Carriage return (někdy jako součást odřádkování)
  • \t - Horizontální tabulátor
  • \v - Vertikální tabulátor
  • \\ - Zpětné lomítko
  • \' - Jednoduchá uvozovka
  • \" - Dvojitá uvozovka
  • \0 - Nulový znak (také používaný pro ukončení řetězce)

Všimněte si, že když chceme zapsat zpětné lomítko, musíme zapsat dvě. Jinak si JavaScript bude myslet, že píšeme nějaký speciální znak.

Interpolace řetězců

Dále na výpis textových řetězců můžeme použít tupý přízvuk (`) namísto uvozovek, což nám umožní tzv. interpolaci (vložit přímo do řetězce proměnné).

 Použijeme také znak dolaru $. Na klávesnici ho napíšeme pomocí pravého ALT a písmene ů:

Dolar

 Nakonec využijeme složené závorky {}. Tyto složené závorky se na české klávesnici napíši pomocí klávesy pravého ALT a písmene B či N:

Složené závorky

Díky těmto speciálním znakům můžeme vypsat proměnné přímo v textovém řetězci:

let a = 6;
let b = 4;
let c = 8;
let vypis = `Trojúhelník: a = ${a} cm, b = ${b} cm, c = ${c} cm.`;

Pokud vypíšeme proměnnou vypis pomocí funkce document.write(), dostaneme tento výsledek:

Tupý přízvuk
index.html

Víceřádkové řetězce

Zpětné uvozovky umožňují definovat také víceřádkový text přímo v kódu:

let s = `řádek 1
řádek 2`;

Což bychom jinak za použití jednoduchých nebo dvojitých uvozovek museli dělat přes skládání řetězců:

let s = "řádek 1\n" +
"řádek 2";

Ačkoli se mohou zpětné uvozovky zdát jako nejlepší volba, byly do JavaScriptu přidány až později. Proto je použijeme jen pokud potřebujeme nějakou z možností, které nabízejí.

Funkce a vlastnosti řetězců

Index

Za pomoci indexů lze procházet jednotlivé znaky v řetězci. Index se zapisuje do hranatých závorek za názvem proměnné. Čísluje se od nuly, takže pozor. Pokud chcete vybrat první znak, je to 0.

let x = "text";
document.write(x[0]); // vypíše první znak řetězce
document.write(x[3]); // vypíše čtvrtý znak

length

Vlastnost (jak již z názvu vypovídá) obsahuje délku řetězce ve znacích.

let s = "text";
document.write(s.length); // Vypíše hodnotu 4

trim()

Pokud text načítáme od uživatele, může se nám stát, že před něj nebo za něj napíše mezeru. Kolem řetězců se také často vyskytují další tzv. bílé znaky, např. konce řádků. Funkce trim() tyto bílé znaky okolo řetězce odstraní, aby nekomplikovaly další zpracování. Pokud jsou uvnitř, zůstanou ponechány.

let s = "  Homer Simpson  ";
s = s.trim(); // V s je nyní uloženo "Homer Simpson"

replace()

Funkce nahradí hledanou hodnotu v řetězci jinou.

let str = "PHP je nejlepší!";
let s = str.replace("PHP", "JavaScript");

toUpperCase() a toLowerCase()

Změní všechna písmena v řetězci na velká nebo na malá:

let s = "string";
s.toUpperCase(); // velké znaky
s.toLowerCase(); // malé znaky

concat()

Spojuje dva a více řetězců. Tato funkce je volána automaticky když se Stringy pokusíme sečíst pomocí operátoru +.

let str1 = "Karel";
let str2 = "Josef";
let str3 = "Petra";

let spojene = str1.concat(str2,str3);
let spojene2 = str1 + str2 + str3;

Poslední 2 řádky dělají to samé, spojí řetězce do jednoho dlouhého.

substring() a substr()

Funkce vrací vybranou část řetězce, které se říká podřetězec. Obě dělají v podstatě to samé, avšak liší se významem parametrů.

let s = "Wolfgang Amadeus Mozart";
podretezec1 = s.substr(9, 7); // Vrací znaky od deváté pozice, 7 znaků, tedy "Amadeus"
podretezec2 = s.substring(9, 16); // vrací znaky od deváté do 16. pozice, tedy "Amadeus"

split()

Rozdělí řetězec na pole podřetězců pomocí určitého znaku. S poli se teprve blíže setkáme.

let str = 'jak-se-máš';
str.split("-"); // [0] jak [1] se [2] máš

indexOf(), lastIndexOf() a search()

Vrací pozici daného podřetězce.

str.indexOf("ahoj"); // vrací první index
str.lastIndexOf("ahoj"); // vrací poslední nalezený index
str.search("ahoj"); // vrací index hledaného řetězce nebo REGEX výrazu (o těch se dozvíme dále)

match()

Vrací shodu s výrazem v řetězci. Používá se hlavně pro regulární výrazy(Regex), viz další lekce.

Čísla

Čísla lze zapsat dvěma zápisy. Zaprvé tak, jak jsme zvyklí:

let x = 10;

A druhý zápis pomocí vědecké (exponenciální) notace:

let x = 10e5; // 10**5 = 1 000 000

S čísly lze samozřejmě provádět většinu nám známých základních operací jako sčítání, násobení, dělení... Máme zde i zbytek po dělení (tzv. modulo) a to pomocí operátoru %.

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

Procento

Všechna čísla jsou v JavaScriptu ukládána jako 64 bitové a jsou počítána s přesností na 15 čísel.

Funkce a vlastnosti čísel

isNaN(hodnota)

Zjistí, zda je objekt v parametru funkce číslo či nikoli. NaN Označuje zkratku Not a Number.

Vrací true nebo false (pravda/nepravda) podle toho, zda je parametrem číslo.

toPrecision(x)

Ořízne číslo na danou přesnost.

i.toString()

Převede číslo na řetězec, tzn. číslo se stane plnohodnotným řetězcem znaků.

toExponential(x)

Převede číslo na exponenciální (vědeckou) notaci. Např. pro hodnotu 100 to bude 1e2.

Number.MAX_VALUE a Number.MIN_VALUE

Vrací největší / nejmenší možné číslo v JavaScriptu.

Knihovna Math

Knihovna Math je jednou ze základních knihoven JavaScriptu. Obsahuje velmi užitečné funkce a vlastnosti, např. číslo Pí, max(), umocňování... Zde si jich pár ukážeme.

K proměnným a funkcím knihoven přistupujeme pomocí operátoru tečky.

Math.PI             // číslo PI
Math.E              // Eulerovo číslo
Math.LN10           // Logaritmus 10
Math.SQRT2          // druhá odmocnina
Math.max(1,10)          // Vrátí větší číslo. Opakem je funkce min()
Math.pow(4,3)           // 4 na třetí == 64
Math.sqrt(9)            // 2 odmocnina čísla
Math.random()           // náhodné číslo 0 – 1
Math.abs(x)         // absolutní hodnota čísla
Math.round(x)           // zaokrouhlení podle obvyklých pravidel
Math.ceil(x)            // zaokrouhlení nahoru
Math.floor(x)           // zaokrouhlení dolů
Math.cos(x)             // cosinus
Math.sin(x)         // sinus
Math.log(x)             // přirozený logaritmus (základem je Eulerovo číslo)

Boolean

Logický datový typ, nabývá pouze dvou hodnot 0 nebo 1 (true nebo false). Jeho hodnota je tedy buď pravdivá nebo nepravdivá. Používá se pro vyhodnocení podmínek a cyklů, ke kterým se dostaneme v dalších dílech.

Null / Undefined

Oba dva datové typy zastupují prázdnou proměnnou. Avšak je zde rozdíl. null je nevytvořený objekt, undefined naopak objektem není.

A to je pro dnešek vše.


 

Předchozí článek
Začínáme s JavaScriptem - První skripty
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Kvíz - Úvod, konzole a proměnné v JavaScriptu
Článek pro vás napsal Michael Olšavský
Avatar
Uživatelské hodnocení:
337 hlasů
...
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (54)

Avatar
Oldřich Tylšar:3. dubna 10:38

Velmi oceňuji obrázky klávesnice, jak napsat jaký znak. Toto je můj druhý jazyk (po pythonu), na tomto webu a u Pythonu mi to docela chybělo (Jako začínajícímu). Tady už to sice většinou znám, ale je to perfektní a musím to pochválit :-)

 
Odpovědět
3. dubna 10:38
Avatar
Květa S.
Člen
Avatar
Květa S.:13. dubna 10:13

K nadpisu indexOf(), lastIndexOf() bych napsané upřesnila takto:

let str = "ahojahojahoj";
document.write("<br />" + str);
document.write("<br />" + str.indexOf("a"));
document.write("<br />" + str.lastIndexOf("j"));
 
Odpovědět
13. dubna 10:13
Avatar
Jaroslav Drobek:26. dubna 6:14

Hodnocení:

  • "...až seriálu o OOP.."
  • "...neboli tzv. tupý přízvuk:"
  • "...znaků, které by se nám jinak zapisovali těžko."
  • indexOf(),..."Vrací pozici daného podřetězce." Přesněji: pozici jeho prvního znaku.
  • isNaN(hodnota): bylo by vhodné doplnit (překvapivým) upřesňujícím příkladem, třeba isNaN(4)=false.
 
Odpovědět
26. dubna 6:14
Avatar
Blanka Svobodová:29. května 22:25

zas mi tam chybí ukázka celého kódu, abych nezapomínala vypsat document.write a jak pak přesně má takový řádek vypadat.

Odpovědět
29. května 22:25
Kdy, když né teď. Kdo, když né já?
Avatar
Adam Ingr
Člen
Avatar
Adam Ingr:13. června 12:50

Jen drobný návrh na vylepšení: u Math.SQRT2 chybí čeho je druhá odmocnina (v tomto případě 2)

 
Odpovědět
13. června 12:50
Avatar
Ondřej Raška:23. srpna 12:01

Lekci by prospělo rozdileti do dvou.

Na začátku se vysvětlují a ukazují relativně jednoduché věci názorně a podrobně.

Na konci přibývá kotel řekněme složitějších metod a podrobnost a názornost zmizela úplně.

 
Odpovědět
23. srpna 12:01
Avatar
Jan Kotulič
Člen
Avatar
Jan Kotulič:14. září 10:27

Já jsem možná slepý, ale proč že v testu 70-20 není 50? U tohoto zadat správnou odpověď pro mě byl fakt oříšek.

 
Odpovědět
14. září 10:27
Avatar
Odpovídá na Jan Kotulič
Blanka Svobodová:23. září 15:35

hele,je to 50, ale v zadání máš NEvypíše 50.... a to je ten poslední,kde máš stringy, takže ty se sečtou za sebe jako 2525.

Odpovědět
23. září 15:35
Kdy, když né teď. Kdo, když né já?
Avatar
Jan Havlát
Člen
Avatar
Jan Havlát:26. září 14:15

Moc textu, občas jsem postrádal názorné ukázky atd...

´Jinak super.

 
Odpovědět
26. září 14:15
Avatar
Radek Pluhař:Včera 19:47

Ahoj, mohli byste sem prosím dodat ještě vzorové skripty této lekce ke stažení?
Děkuji

 
Odpovědět
Včera 19:47
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 64. Zobrazit vše