3. díl - Základní datové typy v JavaScriptu a jejich funkce

JavaScript Základní konstrukce Základní datové typy v JavaScriptu a jejich funkce

V minulém tutoriálu o JavaScriptu jsme si naprogramovali několik prvních skriptů a naučili se pracovat s proměnnými. Dnes se 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), objekt a null nebo undefined.

Pole a objekty si vysvětlíme později, ostatní datové typy si popíšeme dnes.

String

String, v překladu ř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í RAM.

Jak už jsme si vysvětlili dříve, řetězce lze označit pomocí dvojitých nebo i jednoduchých uvozovek tzn.:

var s1 = "nějaký text";
var 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.

var s1 = 'Mám rád znak ", protože se mi líbí.';
var 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, aby ji interpret nevyhodnotil jako ukončení řetězce, ale pouze jako obyčejný znak. K tomu se používá zpětné lomítko:

var 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
  • \t – Horizontální tabulátor
  • \v – Vertikální tabulátor
  • \\ – Zpětné lomítko
  • \' – Jednoduchá uvozovka
  • \" – Dvojtá 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 stejně jako v poli. Pole si uvedeme až dále, takže toto je jen taková ukázka dopředu. 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.

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

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

var 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 nekomplikovali další zpracování. Pokud jsou uvnitř, zůstanou ponechány.

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

var str = "PHP je nejlepší!";
var s = str.replace("PHP", "JavaScript");
toUpperCase a toLowerCase

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

var 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";

var spojene = str1.concat(str2,str3);
var 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í 6 znaků znaky od druhé pozice, tedy "toriál"
podretezec2 = s.substring(2, 6); // vrací znaky od druhé do 6 pozice, tedy tori
Split

Rozdělí řetězec na pole řetězců pomocí určitého znaku.

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 regexu si napíšeme někdy příště
Match

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

Čísla

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

var x = 10;

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

var x = 10e5; // 10**5 = 100 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-bit double 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)

Změní zápis čísla 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 JS.

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 2(zhruba)
Math.max(1,10)                  // Vrátí větší číslo. Opakem max 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-1 (true-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ím tutoriálu se podíváme na podmínky a naše aplikace začnou být zas o něco zajímavější :)


 

  Aktivity (4)

Článek pro vás napsal Michael Olšavský
Avatar
...

Jak se ti líbí článek?
Celkem (22 hlasů) :
4.636364.636364.636364.636364.63636


 


Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Podmínky v JavaScriptu

 

 

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

Avatar
Taskkill
Redaktor
Avatar
Taskkill:

Sublime text, atom (od githubu), pokud bys mel ISIC nebo studentskej mail fakulty tak mas vsechno od JetBrains zdarma i to phpStorm i WebStorm.

 
Odpovědět 31.12.2015 15:26
Avatar
Pluhtík
Člen
Avatar
Pluhtík:

Ahoj, zkusil jsem si to zkopírovat, protože jsem přesně nepochopil, o co se má jednat (momentálně jsem u této lekce, ale cykly už trošku znám ze c#), a nefunguje mi to. Mám tam přesně tohle:

<!DOCTYPE html>

<html lang="cs-cz">
  <head>
    <meta charset="utf-8" />
    <title>První webová aplikace v JavaScriptu</title>
  </head>
  <body>
    <script type="text/javascript">
      for (var i = 0; i < 5; i++) {
      document.write((i + 1) + ". náhodné číslo = " + Math.floor((Math.random() * 100) + 1) + "<br />");
    </script>
  </body>
</html>

Můžeš mi poradit, proč to nefunguje? A co by to mělo dělat? Překládám si to zhruba takto:
pro proměnnou i, která začíná i = 0 přičteme číslo 1, jestliže i je menší než 5. Z toho vyplývá, že cyklus vždycky skončí v momentě, kdy i = 5. Na výstupu poté je i + 1, tzn. číslo 6 + náhodné číslo 0-1, které vynásobíme *100 a poté ho zaokrouhlíme dolů. K tomuto číslo z nějakého důvodu přičítáme znovu ještě 1, i když jestli chceme náhodné číslo, tak je to zbytečnost, ne? Trefil jsem se? A teď proč mi to nefunguje :/

 
Odpovědět 13. července 15:44
Avatar
Jan Bezdíček
Redaktor
Avatar
Odpovídá na Pluhtík
Jan Bezdíček:

Nemas ukonceny for cyklus :) na konci chybi }

 
Odpovědět  +1 13. července 17:30
Avatar
Pluhtík
Člen
Avatar
Odpovídá na Jan Bezdíček
Pluhtík:

Díky a mohl bys mi říct, co ten cyklus tedy dělá? Podle mě by mi mělo vyjít číslo, které bude velké 5 - 6 * 100 + 1 zaokrouhleno dolů, tedy 501 - 601. Z nějakého důvodu je ale výsledek jiný (viz níže). Mohl bys zkontrolovat můj výklad cyklu (předchozí komentář) a říct mi, co jsem pochopil nesprávně?

  1. náhodné číslo = 81
  2. náhodné číslo = 65
  3. náhodné číslo = 13
  4. náhodné číslo = 73
  5. náhodné číslo = 73
 
Odpovědět 13. července 19:39
Avatar
Pluhtík
Člen
Avatar
Pluhtík:

Mám to, očividně mám jen pomalé vedení. Proměnná i vlastně značí náhodné číslo a i + 1 je proto, aby nezačínalo od nuly (0. náhodné číslo = ?)
Cyklus trvá, dokud není 5 náhodných čísel, jejichž výsledek je interval <0;1> násoben 100, ke kterému je z nějakého důvodu přičtena 1 poté, co je zaokrouhlen směrem dolů. Nebylo by proto lehčí zaokrouhlit nahoru a nepřičítat jedničku? Výsledek by byl stejný, ne?
Díky za odpověď :)

 
Odpovědět 13. července 19:46
Avatar
Josef Kuchař (Pepa489):

Tak jo tady je vysvětlení:
Na začátku se i = 0, cyklus má podmínku že i < 5, takže může nabývat hodnot 0,1,2,3,4, což je pět průchodů cyklem(pět náhodných čísel). Uvnitř cyklu je nejdříve (i + 1), takže se vypíše hodnota i + 1 (1,2,3,4,5), k tomu se přidá string "náhodné číslo" a nakonec je to generování čísla, které vůbec nezávisí na hodnotě i. Math.random() generuje náhodné číslo mezi 0 a 1 to se vynásobí 100, takže číslo bude dvouciferné, k tomutu číslu se přičte 1 a to celé se zaokrouhlí dolů ;)

Odpovědět  +1 13. července 19:49
2x piš, jednou debuguj
Avatar
Odpovědět 13. července 19:50
2x piš, jednou debuguj
Avatar
Pluhtík
Člen
Avatar
 
Odpovědět 13. července 22:47
Avatar
Odpovídá na Jan Bezdíček
Libor Šimo (libcosenior):

Sorry, klikol som ommylom na minuss.

Odpovědět 14. července 5:52
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Jirka
Člen
Avatar
Jirka:

Ahoj,
malá chybka v odstavci "Concat" kde máte str1,str2 a str, ale spojujete str1,str2 a str3 ale str3 není definována.

J

 
Odpovědět 8. listopadu 10:57
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 35. Zobrazit vše