02 Proměnná a komentáře

V dnešní lekci začneme konečně programovat. Nejdříve si vysvětlíme co jsou to komentáře, které jsou nepostradatelným pomocníkem každého programátora. Ukážeme se výpisy z programu (ze skriptu). A nakousneme proměnné.

Komentáře

Komentáře jsou část zdrojového kódu, který počítač nevidí. Do komentářu si tedy můžeme psát různé poznámky, například význam příkazů apod.

Většina programovacích jazyků používá na označení komentářů dvě lomítka nebo lomítka s hvězdičkou:

// odsaď až nakonec řádků je to komentář a můžu si tu psát co chci
/* mezi těmito znaky je komentář */ tohle už by komentář nebyl a program by chtěl tyto kecy vykonat.

Aby to nebylo tak jednoduché, tak HTML má své vlastní komentáře a tím je toto:

<!-- komentář v HTML je schovaný v tomhle divném tágu s vykřičníkem a pomlčkami -->

Ukázky různých kódů s komentáři (obrázky):

 

Zdojáky k obrazkům

Zdroják k bombě

 

Příkaz

Program je tvořen příkazy, které postupně vykonává. Příkazy jsou odděleny střdníky ; Mohou se tedy psát vedle sebe, ale pro lepší přehlednost se zvyknout psát pod sebe. 

Na obrázcích výše jsou ukázky různých zdrojových kódů. Dokážeš z nich zjistit, co vykoná tento příkaz:

document.write("Ahoj");

Nevíš? Tak si zkus vytvořit JavaScriptový prográmek tímto příkazem ve svém HTML dokumentu. Programovou část musíme vyčlenit pomocí tágů

 <SCRIPT> .... zde je program ...</SCRIPT>

Mezi těmito tágy, používáme příkazy JavaScriptu, nikoli HTML tágy. Potřebujeme-li uvnitř scriptu použít html tág, nápříklad <br> pro odsazení nového řádku. Musíme jej vypsat jako text, příkazem pro výpis.

První program

Chceme-li zjistit co dělá výše uvedený příkaz JavaScriptu, napíšem jej mezi tágy <script></script>, které umístíme do těla HTML.

 
<html>
    <head><title>Muj 1. program</title></head>

    <body>         
          Pozor teď se stane program:<br>

          <script>
                document.write("Ahoj");         
         </script>

   </body>
</html>

Proměnná

Takže už víme jak udělat výstup z programu. Vypisovat text, můžeme ale i bez programování jen v HTML, takže pouze s tímto příkazem si moc nezaprogramujeme. Co už HTML neumí, je vypisovat proměnné, respektive hodnotu proměnných.

Proměnná je něco jako hrníček s etiketou. Na etiketu si napíšeme název a do hrníčku můžeme něco strkat a vybírat (kamínky, vodu, papírky s textem). A stejně tak proměnná má nějaký název a můžeme do ní něco strkat (čísla, text, logické hodnoty - boolean).

Proměnnou jménem sklenka obsahující hodnotu 6 vytvoříme (deklarujeme) takto:

var sklenka = 6;

A nyní vyíšeme sklenku již známým příkazem:

document.write(sklenka);
document.write("<br>");
document.write("sklenka");

Všiměte si rozdíl mezi prvním a třetím příkazem document.write. Zatímco první vypsal hodnotu promenne, třetí vypsal text v uvozovkách. A to je rozdíl mezi výpisem textu a výpisem proměnné. Chceme-li vypsat text, musíme jej vždy dát do uvozovek. Pokud tím textem je tag, jako v druhém příkazu a script je umístěn v html dokumentu, bude se tento text v důsledku chovat jako html tág. Tágy samy o sobě uvnitř scriptu nemají co dělat.

K čemu proměnná

S proměnnou můžeme dělat všelico. Máme-li v ní čísla můžeme provádět různé výpočty. Máme-li v ní text, můžeme jej různě spojovat, rozdělovat a jinak zpracovávat. Na zpracování a vyhodnocování textů jsou založeny všechny vyhledávače, sociální sítě, kontextové reklamy a v podstatě celý Internet.

Na závěr si pojďme vyzkoušet sčítání proměnných:

var kuk = 4;
var huhu = 12;
var plusik = kuk + huhu;

kuk = kuk + 1;
huhu = huhu + 2;

document.write(kuk);
document.write(huhu);
document.write(plusik);

Víte proč tento program vypsal šílené číslo 51416? Protože jsme jednotlivé výpisy neoddělili ani novým řádkem ani mezerou. Všechny tři výpisy jsou tedy těsně za sebou. Nový řádek vypsat umíme. Místo tagu <br>, samozřejmě můžeme vypsat jiný oddělovač čárku nebo mezeru " ". Vložíme-li tyto výpisy mezi výpisy proměnných, výstup hned bude srozumitelnější.

document.write(",");

Ještě zkusme, co se stane když sečtu dva texty.

var osloveni = "Ahoj ";
var jmeno = "Lucka";
var pozdrav = osloveni + jmeno;

document.write(pozdrav);

A nebo to můžeme nakombinovat rovnou:


document.write("<br>Čago belo"+jmeno);

Operátor + má tedy pro text význam slepovače :)

Kam dál?