Slevový týden - Květen Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
30 % bodů zdarma na online výuku díky naší Slevové akci!

3. diel - Základné dátové typy v JavaScripte a ich funkcie

V minulej lekcii, Začíname s JavaScriptom - Prvý skripty , sme si naprogramovali niekoľko prvých skriptov a naučili sa pracovať s premennými. Dnes sa v JavaScript tutoriálu pozrieme podrobnejšie na základné dátové typy a to presnejšie reťazca, čísla a boolean. Hoci JavaScript rieši dátové typy do určitej miery za nás, nemôžeme sa im úplne vyhýbať a mali by sme rozumieť tomu, ako fungujú.

Rekapitulácia

Javascript je dynamicky typizovanom jazyk. Plne nás odtieňuje od toho, že premenná má nejaký dátový typ. Ona ho samozrejme má, ale nedáva nám to najavo. Možno vytvoriť premennú s číselnou hodnotou, následne ju nastaviť objekt a potom desatinné číslo. Jazyk sa s tým sám vysporiada a typ automaticky zmení. Pretože typy u premenných nemusíme uvádzať, začínajúci programátori sa možno radujú, ale časom zistí, že má tento systém aj určité nevýhody. Ide najmä o zníženie schopnosťou automatickej kontroly správnosti kódu.

Základné dátové typy sú tieto:

  • String - text
  • Number - číslo s / bez desatinnej čiarky
  • Boolean - pravda / nepravda
  • Object
  • Null
  • Undefined

Niektoré dátové typy, ako polia a ďalšie objekty, si vysvetlíme neskôr. Tie ostatné si popíšeme dnes. Nový štandard ECMA 6 priniesol ešte tzv. Symboly, ale k tým sa dostaneme až seriálu o OOP.

String

String, v preklade textový reťazec, je rad znakov uložená v za sebou idúcich bajtoch pamäte. Maximálna dĺžka nie je presne špecifikovaná, záleží na interpretu. V niektorých variantoch môže byť teoreticky nekonečná a je obmedzená len veľkosťou pamäte RAM.

Ako sme si už vysvetlili skôr, reťazce je možné zapisovať pomocou dvojitých alebo aj jednoduchých úvodzoviek, tzn .:

let s1 = "nejaký text";
let s2 = 'nejaký text';

Úvodzovky je možné kombinovať aj vnútri reťazca. Ak teda napr. Chceme napísať jednoduchú úvodzovky, vložíme reťazec do úvodzoviek dvojitých.

let s1 = 'Mám rád znak ", pretože sa mi páči.';
let s1 = "David, yes, that's me!";

Pokiaľ je potrebné zapísať v reťazci rovnakú úvodzovky, ako v ktorých je reťazec zapísaný, musí sa úvodzovky tzv. Odescapovat. To aby ju interpret nevyhodnotil ako ukončenie reťazca, ale iba ako obyčajný znak. K tomu sa používa spätné lomítko (\):

let x = "Mám rád znak \", pretože sa mi páči.";

Znaky s týmto lomkou sa súhrnne nazývajú escape sekvencií. Okrem úvodzoviek môžeme pomocou lomky zapísať ešte niekoľko špeciálnych znakov, ktoré by sa nám inak zapisovali ťažko. Tu je ich zoznam:

  • \a - Pípnutie
  • \b - Backspace
  • \f - Preskočenie na ďalšie "stánku"
  • \n - Nový riadok
  • \r - Carriage return (niekedy ako súčasť odriadkovanie)
  • \t - Horizontálne tabulátor
  • \v - Vertikálne tabulátor
  • \\ - Spätné lomítko
  • \' - Jednoduchá úvodzovky
  • \" - Dvojitá úvodzovky
  • \0 - Nulový znak (tiež používaný pre ukončenie reťazca)
Všimnite si, že keď chceme zapísať spätné lomítko, musíme zapísať dve. Inak si JavaScript bude myslieť, že píšeme nejaký špeciálny znak.

Funkcie a vlastnosti reťazcov

Index

Za pomoci indexov možno prechádzať jednotlivé znaky v reťazci. Index sa zapisuje do hranatých zátvoriek za názvom premennej. Čísluje sa od nuly, takže pozor. Pokiaľ chcete vybrať prvý znak, je to 0.

let x = "text";
document.write(x[0]); // vypíše prvý znak reťazca
document.write(x[3]); // vypíše štvrtý znak

Length

Vlastnosť (ako už z názvu vypovedá) obsahuje dĺžku reťazca v znakoch.

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

Trim ()

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Ak text načítame od užívateľa, môže sa nám stať, že pred neho alebo za neho napíše medzeru. Okolo reťazcov sa tiež často vyskytujú ďalšie tzv. Biele znaky, napr. Konce riadkov. Funkcia trim() tieto biele znaky okolo reťazca odstráni, aby nekomplikovali ďalšie spracovanie. Ak sú vnútri, zostanú ponechané.

let s = "  Jan Novák  ";
s = s.trim(); // Vs je teraz uložené "Ján Novák"

Replace ()

Funkcia nahradí hľadanú hodnotu v reťazci inú.

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

ToUpperCase () a toLowerCase ()

Zmení všetky písmená v reťazci na veľké alebo na malá:

let s = "string";
s.toUpperCase(); // veľké znaky
s.toLowerCase(); // malé znaky

Concat ()

Spája dva a viac reťazcov. Táto funkcia je volaná automaticky keď sa String y pokúsime sčítať pomocou operátora +.

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

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

Posledné 2 riadky robia to isté, spojí reťazce do jedného dlhého.

Substring () a substr ()

Funkcia vracia vybranú časť reťazca, ktorej sa hovorí podreťazec. Obe robia v podstate to isté, avšak líšia sa významom parametrov.

s = "Tutoriály na ITnetworku";
podretezec1 = s.substr(2, 6); // Vracia znaky od druhej pozície, 6 znakov, teda "toriál"
podretezec2 = s.substring(2, 6); // vracia znaky od druhej do 6 pozície, teda tori

Split ()

Rozdelí reťazec na pole podreťazcov pomocou určitého znaku. S poli sa ešte len bližšie stretneme.

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

IndexOf (), lastIndexOf () a search ()

Vracia pozíciu daného podreťazca.

str.indexOf("ahoj"); // vracia prvý index
str.lastIndexOf("ahoj"); // vracia posledný nájdený index
str.search("ahoj"); // vracia index hľadaného reťazca alebo Regex výrazu (o tých sa dozvieme ďalej)

Match ()

Vracia zhodu s výrazom v reťazci. Používa sa hlavne pre regulárne výrazy (Regex), pozri ďalší lekcie.

Čísla

Čísla možno zapísať dvoma zápisy. Po prvé tak, ako sme zvyknutí:

let x = 10;

A druhý zápis pomocou vedeckej (exponenciálna) notácie:

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

S číslami možno samozrejme vykonávať väčšinu nám známych základných operácií ako sčítanie, násobenie, delenie ... Máme tu aj zvyšok po delení (tzv. Modulo) a to pomocou operátora %.

Všetky čísla sú v JavaScripte ukladané ako 64 bitové a sú počítaná s presnosťou na 15 čísel.

Funkcie a vlastnosti čísel

IsNaN (hodnota)

Zistí, či je objekt v parametri funkcie číslo alebo nie. NaN Označuje skratku Not a Number.

Vracia true alebo false (pravda / nepravda) podľa toho, či je parametrom číslo.

ToPrecision (x)

Oreže číslo na danú presnosť.

I.toString ()

Prevedie číslo na reťazec, tzn. číslo sa stane plnohodnotným reťazcom znakov.

ToExponential (x)

Prevedie číslo na exponenciálny (vedeckú) notáciu. Napr. pre hodnotu 100 to bude 1e2.

Number.MAX_VALUE a Number.MIN_VALUE

Vracia najväčšie / najmenšie možné číslo v JavaScripte.

Knižnica Math

Knižnica Math je jednou zo základných knižníc JavaScriptu. Obsahuje veľmi užitočné funkcie a vlastnosti, napr. Číslo Pí, max(), umocňovanie ... Tu si ich pár ukážeme.

K premenným a funkciám knižníc pristupujeme pomocou operátora bodky.

Math.PI             // číslo PI
Math.E              // Eulerovo číslo
Math.LN10           // Logaritmus 10
Math.SQRT2          // druhá odmocnina
Math.max(1,10)          // Vráti väčšie číslo. Opakom je funkcia min ()
Math.pow(4,3)           // 4 na tretiu == 64
Math.sqrt(9)            // 2 odmocnina čísla
Math.random()           // náhodné číslo 0 – 1
Math.abs(x)         // absolútna hodnota čísla
Math.round(x)           // zaokrúhlenie podľa bežných pravidiel
Math.ceil(x)            // zaokrúhlenie nahor
Math.floor(x)           // zaokrúhlenia nadol
Math.cos(x)             // cosinus
Math.sin(x)         // sinus
Math.log(x)             // prirodzený logaritmus (základom je Eulerovo Číslo)

Boolean

Logický dátový typ, nadobúda iba dvoch hodnôt 0 alebo 1 (true alebo false). Jeho hodnota je teda buď pravdivá alebo nepravdivá. Používa sa pre vyhodnotenie podmienok a cyklov, ku ktorým sa dostaneme v ďalších dieloch.

Null / Undefined

Oba dva dátové typy zastupujú prázdnu premennú. Avšak je tu rozdiel. null je nevytvorenie objekt, undefined naopak objektom nie je.

A to je pre dnešok všetko. V budúcej lekcii, Riešené úlohy k 4. lekcii JavaScriptu , sa pozrieme na podmienky a naše aplikácie začnú byť zas o niečo zaujímavejšie :)

V nasledujúcom cvičení, Riešené úlohy k 4. lekcii JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.


 

 

Aktivity (1)

 

 

Komentáre

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

Díky, opraveno :)

Odpovedať
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

 
Odpovedať
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á"?

 
Odpovedať
7.10.2018 17:00
Avatar
Adam Bíba
Člen
Avatar
Odpovedá 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ě.

 
Odpovedať
5.11.2018 16:50
Avatar
Jan Jedlička:4.5.2019 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

 
Odpovedať
4.5.2019 23:08
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Odpovedá na Jan Jedlička
Reaktivní uživatel:5.5.2019 18:33

Kdybys do HTML kódu napsal

Hello
world

taky by výsledek byl

Hello world

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

Odpovedať
5.5.2019 18:33
Kdo je připraven, toho zaskočí něco jiného
Avatar
Odpovedá na Jan Jedlička
Lukáš Kovář:7.5.2019 18:29

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

 
Odpovedať
7.5.2019 18:29
Avatar
Víťa Š.
Člen
Avatar
Odpovedá na Jan Jedlička
Víťa Š.:7.10.2019 23:05

Nebo i takhle:

var i1 = 'Hello1 <br/>  World';
var i2 = "Hello2 <br/>  World";
document.write(i1,"<br/> <br/>",  i2);
Odpovedať
7.10.2019 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.12.2019 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ěď.

 
Odpovedať
6.12.2019 21:45
Avatar
Jurajs
Člen
Avatar
Odpovedá na Jan Doležal
Jurajs:6.12.2019 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);
 
Odpovedať
6.12.2019 23:05
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!