PHP týden Předvánoční slevová akce
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 podíváme podrobněji 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, tzn.:

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

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

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

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 (\):

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.

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()

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 = "  Jan Novák  ";
s = s.trim(); // V s je nyní uloženo "Jan Novák"

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

str1 = "Karel";
str2 = "Josef";
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ů.

s = "Tutoriály na ITnetworku";
podretezec1 = s.substr(2, 6); // Vrací znaky od druhé pozice, 6 znaků, tedy "toriál"
podretezec2 = s.substring(2, 6); // vrací znaky od druhé do 6 pozice, tedy tori

split()

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

str.split("-"); // jak-se-mas == [0] jak [1] se [2] mas

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

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. V příští lekci, Podmínky v JavaScriptu, se podíváme na podmínky a naše aplikace začnou být zas o něco zajímavější :)


 

 

Aktivity (12)

 

 

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

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:4.5.2017 16:34

Díky, opraveno :)

Odpovědět
4.5.2017 16:34
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Patrik Weber
Člen
Avatar
Patrik Weber:12.12.2017 10:31

řekl bych že toto je o poznání těžší než HTML a CSS dohromady :D

 
Odpovědět
12.12.2017 10:31
Avatar
Jakub Stryja
Člen
Avatar
Jakub Stryja:7.10.2018 17:00

s = "Tutoriály na ITnetworku";
podretezec1 = s.substr(2, 6); // Vrací znaky od druhé pozice, 6 znaků, tedy "toriál"
podretezec2 = s.substring(2, 6); // vrací znaky od druhé do 6 pozice, tedy tori

Ahoj, nemělo by být v proměnné podretezec2 uloženo "toriá"?

 
Odpovědět
7.10.2018 17:00
Avatar
Adam Bíba
Člen
Avatar
Odpovídá na Jakub Stryja
Adam Bíba:5.11.2018 16:50

Tato metoda vrací znaky mezi 2 a 6, 6 už nezahrnuje, takže "tori" je správně.

 
Odpovědět
5.11.2018 16:50
Avatar
Jan Jedlička:4. května 23:08

ahoj poradite mi jak pouzivat \n dalsí radek a \a pipnuti? Kdyz napisu:
var i = 'Hello \n World'; document.write(i) tak mi slovo world neda na dalsi radek. pokud napisu alert(i) tak to funguje. v cem delam chybu? dekuju

 
Odpovědět
4. května 23:08
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jan Jedlička
Reaktivní uživatel:5. května 18:33

Kdybys do HTML kódu napsal

Hello
world

taky by výsledek byl

Hello world

Takže musíš použít br.

Odpovědět
5. května 18:33
Kdo je připraven, toho zaskočí něco jiného
Avatar
Odpovídá na Jan Jedlička
Lukáš Kovář:7. května 18:29

Stačí to hodit do <pre> tagu, ktery umozni mit vlastni formatovani textu

 
Odpovědět
7. května 18:29
Avatar
Víťa Š.
Člen
Avatar
Odpovídá na Jan Jedlička
Víťa Š.:7. října 23:05

Nebo i takhle:

var i1 = 'Hello1 <br/>  World';
var i2 = "Hello2 <br/>  World";
document.write(i1,"<br/> <br/>",  i2);
Odpovědět
7. října 23:05
Život by byl mnohem snazší, kdybychom k němu měli zdrojový kód.
Avatar
Jan Doležal
Člen
Avatar
Jan Doležal:6. prosince 21:45

Ahoj, mám takový obecný dotaz. Chvilku mi nešlo rozchodit x.toUpperCase tak jsem googlil a jak na w3schools.com tak na developer.moz­zila.org radí jak to správně zapsat a pokaždé jinak. Má otázka tedy je, jestli je v JavaScriptu a programovacích jazycích obecně více způsobů jak zapsat jednu věc nebo je vždy aktuální pouze jeden? Díky za odpověď.

 
Odpovědět
6. prosince 21:45
Avatar
Jurajs
Člen
Avatar
Odpovídá na Jan Doležal
Jurajs:6. prosince 23:05

No podle mě, na developer.moz­zila.org to zjednodušili, pokud se koukám na to samé....pomocí
console.log(sen­tence.toUpper­Case());

Ale jinak bych šel po tom co je na w3schools.com viz kód níže :)

var x = "Nejaky text";
var y = x.toUpperCase();
document.write(y);
 
Odpovědět
6. prosince 23:05
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 45. Zobrazit vše