2. díl - Začínáme s JavaScriptem - První skripty

JavaScript Základní konstrukce Začínáme s JavaScriptem - První skripty

Dnes si něco konečně naprogramujeme a vyzkoušíme. Nebudeme říkat, že píšeme programy, protože budeme psát spíše jen takové útržky kódu, které budou dělat jednoduchou a specifickou věc. Udělejme si tedy první script. Rovnou na začátku říkám, že když chcete pracovat s JavaScriptem, musíte umět alespoň základy HTML. Doporučuji tedy pročíst sérii tutoriálů Jak psát moderní web (HTML a CSS), přičemž CSS můžete vynechat. Scripty nemusíme na rozdíl od serverových jazyků (např. PHP) nikam nahrávat, budeme si je spouštět pěkně doma, ve svém prohlížeči. Prohlížečem mám na mysli buď Chrome (ten je úplně ideální) nebo Firefox s doplňkem FireBug. Oba totiž obsahují perfektní nástroje pro debugování scriptů, tím mám na mysli hledání chyb v našich scriptech. Pusťme se tedy do toho!

Vytvořte si novou HTML stránku a její obsah upravte do následující podoby:

<!DOCTYPE html>

<html lang="cs-cz">
        <head>
                <meta charset="utf-8" />
                <title>První webová aplikace v JavaScriptu</title>
        </head>

        <body>
                <script type="text/javascript">
                document.write("Ahoj ITnetwork!");
                </script>
        </body>
</html>

Když si stránku nyní spustíte v prohlížeči, měla by obsahovat text "Ahoj ITnetwork!".

Hello World v JavaScriptu

Je to obdoba aplikace Hello World (ahoj světě), která se používá při výuce programování v prvních aplikacích. Vysvětleme si, co jsme to vlastně udělali. Když prohlížeč zobrazuje HTML stránku, jede odshora dolů. Jakmile narazí na tag <script>, chápe text v tomto tagu jako zdrojový kód pro jazyk JavaScript a rovnou ho spustí. Po ukončení pokračuje dále s parsováním stránky. Toto může vést k problému, když chceme shora ovlivnit JavaScriptem element, který je až na konci stránky a prohlížeč ho tedy ještě nenačetl. Proto se JavaScript často vkládá do hlavičky a spouští se až když je celá stránka načtená. Tím se však budeme zabývat později. Máme tu tedy první příkaz:

document.write("nějaký text");

Prozradím, že dokument je objekt, který symbolizuje HTML dokument, tedy naší webovou stránku. Write je jeho metoda, která zapíše na dané místo v kódu HTML stránky vložený text. Cokoli na stránce přes JavaScript změníme, to se okamžitě projeví. Zde se tedy zobrazí náš text Ahoj ITnetwork! Je zvykem psát za všemi příkazy středník - ;, i když to v JavaScriptu není nutné.

Nyní se podíváme jak se pracuje s proměnnými.

Proměnné

Slovo proměnná byste měli znát ze školy, pro neprogramátory je to místo v paměti, kam si můžeme ukládat data a potom s nimi pracovat. Každá proměnná má svůj datový typ, v JavaScriptu může obsahovat číslo, text, hodnotu boolean (pravda nebo nepravda, o té až příště) nebo objekt. Datové typy proměnným přiřazuje sám JavaScript podle toho, co do nich zrovna ukládáme. Proto říkáme, že je JavaScript dynamicky typovaný jazyk (dynamicky mění typy proměnných podle jejich obsahu).

Všechny proměnné se v JavaScriptu deklarují pomocí slova var! Když nepoužijete toto slovo, na rozdíl od jiných jazyků vytvoříte tzv. globální proměnnou, což není vždy úplně to, co chcete. Ta je totiž potom přístupná ze všech funkcí ve scriptu a to může vyvolat konflikty.

Vytvořme si několik proměnných:

var a;       // vytvoří proměnnou a, ve které zatím nic není
var b = 40;  // vytvoří proměnnou b s hodnotou 40
c = 30;      // vytvoří globální proměnnou c s hodnotou 30
s = "Text";  // vytvoří proměnnou s, která bude obsahovat textový řetězec

Kód výše obsahuje vytvoření číselných proměnných a vytvoření proměnné, která obsahuje text (ten píšeme do uvozovek, aby překladač věděl, že je to jen text a ne název nějaké další proměnné nebo funkce). Zároveň jsme si ukázali, jak se v kódu dělají komentáře, tedy poznámky pro programátory, kterých si intepret (váš prohlížeč) nevšímá. Použijeme k tomu dvě lomítka - //. Kdybychom chtěli komentář na víc řádků, používá se /* a */ . S proměnnými samozřejmě můžeme dělat nejrůznější operace. Začněme sčítáním. Můžeme sčítat čísla, ale dokonce i textové řetězce (ty se tím spojí v jeden text). Vše se dělá pomocí operátoru +.

Dokonce můžeme sčítat i číslo a textový řetězec, interpret si číslo převede na řetězec a výsledkem bude součet řetězců.

var a = 10;
var b = 20;
var c = a + b;
document.write("Zde je součet čísel a a b: ");
document.write(c);
document.write("<br />"); // vložíme HTML tag pro novou řádku
var s1 = "10";
var s2 = "20";
var s3 = s1 + s2;
document.write("Zde je součet řetězců s1 a s2: ");
document.write(s3);

Výsledek:

Proměnné v JavaScriptu

Z výstupu tohoto programu byste měli pochopit rozdíl mezi číslem a řetězcem :) Můžeme samozřejmě i násobit, odčítat a dělit, jsou k tomu operátory *, -, /. Všimněte si, že jsme stále v HTML, pokud chceme nový řádek, vložíme do stránky prostě HTML tag pro odřádkování.

Datum a čas

Podívejme se ještě jak se pracuje s datem a časem. Výsledkem bude první script do vašich stránek, který bude mít nějaké praktické využití. Vše potřebné nalezneme v objektu Date, tedy čas i datum. Ukážeme si, jak si objekt vytvořit a jak s ním pracovat. Vytvoříme ho pomocí klíčového slova new, které nám ho uloží do proměnné podobně, jako jsme to dělali s čísly nebo textem:

d = new Date(); // vytvoří proměnnou, ve které je aktuální datum

Pozn. Klasická proměnná neumí nic moc jiného, než uchovávat hodnotu. Co nejjednodušeji řečeno, objekt je chytřejší. Když si ho uložíme do proměnné, můžeme na něm potom volat tzv. metody. Vzpomeňte si na objekt document a metodu write. S datem je to něco podobného.

Na objektu date budeme volat následující metody:

  • getDate() - vrátí číslo dne v měsíci, 1 je prvního
  • getMonth() - vrátí číslo měsíce v roce, leden je 0, takže je nutné přičíst 1
  • getFullYear() - vrátí aktuální rok jako 4 číslice
  • getHours() - vrátí hodiny
  • getMinutes() - vrátí minuty
  • getSeconds() - vrátí sekundy
  • getTime() - tato metoda vrací počet milisekund od 1.1.1970, tento formát se v informatice často používá (tzv. UNIX TimeStamp)

Jména metod nejsou úplně šťastně zvolená, no, co naděláme :)

Vypišme si tedy aktuální datum a čas:

d = new Date(); // vytvoří proměnnou, ve které je aktuální datum
document.write("Dnes je: " + d.getDate() + ". " + (d.getMonth() + 1) + ". " + d.getFullYear());
document.write("<br />");
document.write("Čas je: " + d.getHours() + ":" + (d.getMinutes()));

Výsledek:

Datum a čas v JavaScriptu

Datum a čas se bere samozřejmě z počítače uživatele (opět opakuji, JavaScript běží u klienta), když tedy čas změníte, měl by se změnit i na stránce :) Příště se podíváme na podmínky, cykly a pole. Všechny 3 zdrojové skripty jsou níže ke stažení pro případ, že jste někde udělali chybu. Bude tomu tak vždy.


 

Stáhnout

Staženo 392x (2.24 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

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


 


Miniatura
Předchozí článek
Úvod do JavaScriptu
Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript

 

 

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

Avatar
Robert Poč
Člen
Avatar
Robert Poč:

funckeVypisuji­ciSekundy(), je třeba koncipovat tak, aby se aktualizoval čas, ta funkce se nejmenuje aktualizujStranku()

 
Odpovědět 3. května 13:08
Avatar
pgarsky
Člen
Avatar
Odpovídá na Robert Poč
pgarsky:

Nechápu to slovo koncipovat a taky co mám např. napsat do toho funkceVypisuji­ciSekundy() ?

 
Odpovědět  +1 4. května 10:54
Avatar
Jaromír Jíra:

Ahoj, existuje v js nějaký jednoduchý způsob, jak vypsat do prohlížeče řetězce, které obsahují html tagy? Zkouším-li to příkazem document.write, chová se to rovnou jako html, i když místo <> používám /x3c a /x3e. Jde mi o prostý výpis html kódu do browseru.

 
Odpovědět 31. května 13:40
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Jaromír Jíra
Taskkill:

Kdyz se kouknes sem http://stackoverflow.com/…n-javascript tak uvidis, jak je mozny to resit ... prelozeno a zjednoduseno vezmes funkci :

function escapeHtml(text) {
  var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

a pouzijes ji takhle document.write(es­capeHtml(tvuj­Retezec));

v zasade nahrazuje vsechny vyskyty kritickejch html znaku ... o jednodussim reseni nevim.

 
Odpovědět 31. května 14:32
Avatar
Odpovídá na Taskkill
Jaromír Jíra:

děkuju moc, 100% funkční :)

 
Odpovědět 31. května 22:01
Avatar
krepsy3
Redaktor
Avatar
krepsy3:

Z pohledu vývojáře byl vždy nejlepším prohlížečem Firefox, protože nejlépe rozumí standardům (hovořím zejména o HTML a CSS). Co se týče Chromu, jedná se o velice zajímavý prohlížeč, který ale v základu špehuje vše co se v něm děje a sděluje to tatíčkovi googlovi. Ve Firefoxu to může pouze přes cookies, ale chrom to dělá sám od sebe. Ví třeba úplně všechno, co kdo napsal, tedy odkazy, mailové adresy, hesla, jména lidí, částky, bezpečnostní kódy, čísla kreditních karet...

Tak proboha neprezentujte, že Chrome je ideální!!

Jinak článek je velice pěkný, děkuji :D

Odpovědět 8. září 20:51
Programátor je stroj k převodu kávy na kód.
Avatar
Odpovídá na krepsy3
Michal Štěpánek:

Vážně si myslíš, že to, co jsi vytknul Chromu, ostatní prohlížeče nedělají? Ach ty idealisto...

Odpovědět 9. září 12:51
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na Michal Štěpánek
krepsy3:

Mozilla pokud vím neshromažďuje takto důvěrná data, kór pokud to prohlížeči zakážeš. To ti Chromm neumožní... A především Mozilla se nechová jako Microsoft, Facebook či Google, a tato data neposkytuje třetím stranám.

Odpovědět 9. září 20:51
Programátor je stroj k převodu kávy na kód.
Avatar
Odpovídá na krepsy3
Michal Štěpánek:

Nevím, kde bereš tu jistotu, já bych za to ruku do ohně rozhodně nedal...

Odpovědět 9. září 21:42
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na Michal Štěpánek
krepsy3:

Já asi též ne. Ale asi opravdu více věřím Mozille než Googlu/Firefoxu než Chromu ;)

Odpovědět 9. září 22:02
Programátor je stroj k převodu kávy na kód.
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 44. Zobrazit vše