Výuka JavaScriptu – 2.

V minulém dílu jsem slíbil, že si řekneme něco víc o tagu script a syntaxi JavaScriptu. Sliby se mají plnit a proto je tu další díl.

Tag Script

V tagu <SCRIPT> může specifikovat, která verze JavaScriptu je použita. A to pomocí parametru LANGUAGE = hodnota. Může zde být "JavaScript", "JavaScript1.1", "JavaScript1.2", "JavaScript1.3" nebo "JavaScript1.5" a speciálně pro IE "JScript". Většina prohlížečů si zjistí verzi z parametru LANGUAGE a pokud tuto verzi nepodporuje, skript se ignoruje.

Poznámka: O tom, že Microsoft od IE 3 představil i vlastní implementaci JavaScriptu jsem se zmínil již v prvním dílu. Pro zopakování, Microsoftí implementace je pojmenována právě JScript.

Zpátky k parametru LANGUAGE. Pomocí tohoto parametru můžeme definovat odlišné skripty pro různé verze prohlížečů. Jednoduchý seznam různých verzí prohlížečů a podporované verze JavaScriptu byl taky v prvním dílu.

Například prohlížeč Netscape 2.0 ignoruje skript definovaný tagem <SCRIPT LANGUAGE="JavaScript1.2">, ale Netscape 4.0 tento kód vykoná. Tak můžeme odlišit různé verze skriptů na jedné stránce. Každá verze skriptu musí být uzavřena v samostatném tagu SCRIPT.

Příklad, jak si zjistit podporovanou verzi JavaScriptu:

<html>
<head>
  <title>Verze JavaScriptu</title>
</head>
<body>
  <script language="JavaScript1.1">
    // JavaScript pro staré prohlížeče
    document.write("JavaScript 1.1<br> <br>");
  </script>
  <script language="JavaScript1.2">
    // JavaScript pro novejší prohlížeče
    document.write("JavaScript 1.2<br> <br>");
  </script>
  <script language="JavaScript1.3">
    // JavaScript pro nejnovější prohlížeče
    document.write("JavaScript 1.3<br> <br>");
  </script>
    <script language="JavaScript1.5">
    // JavaScript pro nejnovější prohlížeče
    document.write("JavaScript 1.5<br> <br>");
  </script>
  <script language="JScript">
    // Speciální verze JavaScriptu pro IE - JScript
    document.write("Jcript - pro IE<br> <br>");
  </script>
</body>
</html>

Doufám, že není co vysvětlovat.

Poznámka: Pokud se v příkladu výše uvede definice TYPE (viz první díl) nemusí skript vždy fungovat správně. To jsou paradoxy.

  <script language="JavaScript" type="text/javascript">
    function f1() {
      // Zde bude skript v JavaScriptu pro starší prohlížeče.
      ...
    }
  </script>
  <script language="JavaScript1.2" type="text/javascript">
    function f1() {
      // JavaScript 1.2 kód pro novější prohlížeče.
      ...
    }
  </script>

Tady si už skript vysvětlíme. Prohlížeč Netscape 2.0 použije definici funkce f1 uzavřenou v prvním párovém tagu <SCRIPT>, ale definici uzavřenou v druhém tagu <SCRIPT> ignoruje. Prohlížeč Netscape 4.0 použije také první definici, avšak pokud má druhá funkce (f1=f1) stejné jméno přepíše první definici.

Základy syntaxe

Ještě než začneme psát vlastní skripty, musíme znát minimálně základy syntaxe a struktury JavaScriptu. Co můžem používat, kam co a jak umístit, atd.

Syntaxe JavaScriptu je podobná C/C++ a JAVĚ. Kompletní popis hledejte na Netscape`s JavaScript Reference nebo Microsoft`s JScript Reference. Zde najdete seznam podporovaných příkazů, operátorů a standardních funkcí JavaScriptu. Teď si vysvětlíme základy pro začátek.

Proměnné

Proměnnou deklarujeme pomocí slova var. Identifikátor proměnné může mít libovolnou délku a sestávat z jakéhokoliv písmene, čísla a znaku podtržítka (_), pokud není první znak číslo. Jako identifikátor nemůžeme použít klíčová slova - slova mající v JavaScriptu speciální význam. JavaScript je case-sensitive (rozlišuje malá a velká písmena), identifikátory count a Count odkazují na dvě odlišné proměnné!

Proměnné deklarované mimo funkci jsou globální, tzn. jsou být dostupné odkudkoli ve skriptu a z funkcí ve skriptu. Nejčastěji definujeme proměnou mimo funkci, tedy jako globální. Globální proměnou můžeme přepsat lokální proměnou (definovanou uvnitř funkce), pokud bude mít identifikátor proměnné stejné jméno. Tomu říkáme překrývání proměnných.

Pár příkladů:

var text;
var max_score;
var cislo3 = 1;
var ErrorMessage = "Spojení selhalo."
var dnyPryc = 5.7;
var 82sester = true;    // chyba proměnná začíná číslem!

Textové řetězce

Řetězce jsou uzavřené mezi uvozovky jednoduché (`) nebo dvojité ("). Jeden typ uvozovek můžete kombinovat s druhým bez omezení. Používáte-li pořád stejný typ uvozovek a nechcete jej měnit, vložte před uvozovací uvozovky zpětné lomítko.

Příklad bude asi nejlepší:

var text1 = "Ahoj světe.";
var text2 = `Zdravím opět.`;
var text3 = "Neklikej na mě.";
var text4 = "Řekl jsem "NE"";    // chyba, jeden typ uvozovek bez zpětného lomítka
var text5 = `Řekl jsem "NE"`;    // výsledek: Řekl jsem "NE"
var text6 = "Řekl jsem \"NE\"";  // výsledek: Řekl jsem "NE"

Operátory a výrazy

Většina operátorů (+; -; *; /; ++; --; atd.) a výrazů používaných v C/C++ a JAVĚ je podporována i v JavaScriptu.

Opět příklad:

proměnná = výraz

soucet += 4;
i++;
vzkaz = "Chyba " + kodchyby;

Příkazy

A znovu, většina příkazů používaných v C/C++ a JAVĚ je podporována i v JavaScriptu. Klíčová slova jsou:

  • komentáře - // pro jeden řádek, /* a */ pro více řádků

  • cykly - for, do, while a další

  • podmíněné příkazy - if, then, else; switch, case

  • objekty - new, this, with a další

Funkce

Funkce použijeme v případech, kdy potřebujeme v programu na různých místech provádět stejné činnosti. Použitím funkcí kód programu zkrátíme, zpřehledníme a půjde snadněji modifikovat.

Funkce se definuje následujícím způsobem:

function jmeno_fce(arg1, arg2, ...) {
  příkazy JavaScriptu ...
}

Jméno funkce musí dodržovat sejná pravidla, jako jméno proměnné. K volání funkce (spuštění), použijeme její jméno a přidáme argumenty, pokud je funkce požaduje.

var vyska = 5;
var sirka = 3;
spocti_obsah(vyska, sirka);

Poznámka: Samozřejmě, že funkce může být i bez argumentů.

Jak už jsem zmínil, funkce se nejčastěji vkládají do hlavičky dokumentu, mezi tagy <HEAD> a </HEAD>. Což nám zajistí, že funkce bude načtena a k dispozici ještě než bude volána.

Funkce může vracet i hodnoty. Těmto funkcím se říká funkce s návratovou hodnotou a docílíme toho tak, že na konec funkce přidáme příkaz return.

Příklad funkce s návratovou hodnotou:

function secti(x, y) {
  return x + y;
}
...
var soucet = secti(7, 10);

Doufám, že se vám druhý díl líbil stejně jako ten první. A nezoufejte, pokud jste něčemu úplně nerozuměli, nic není ztraceno. Mezi jednotlivými díly se budeme odkazovat a v dalších částech se ještě k některým věcem vrátíme. Příště se blíže podíváme na operátory a příkazy (cykly a podmínky). Jako bonus bude uveden seznam klíčových slov.

Diskuze (10) Další článek: Odklad slyšení v kauze Microsoftu se nekoná

Témata článku: , , , , , , , , , , , , , , , , , , , , , , , , ,