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: Software, Microsoft, Prohlížeče, Programování, Java, Javascript, Výuka, Syntax, První jméno, Speciální díl, Různé typy, Různé znaky, První funkce, První parametr, Pre, Klíčová funkce, Head, Stejné parametry, F1, Klíčový parametr, Podporovaný prohlížeč, Druhý typ, Funkce, První verze


Určitě si přečtěte

Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

Vybrali jsme 12 programovatelných hraček a stavebnic pro děti a jejich rodiče

** Získejte děti pro matematiku a základy techniky ** Kupte jim hračku nebo stavebnici, které vdechnou vlastní život ** Vybrali jsme stavebnice pro malé caparty i budoucí experty

Jakub Čížek | 10

Jakub Čížek
Stavebnice
Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

Nejlepší příslušenství k počítači. Tipy na osvědčené klávesnice, tiskárny, routery…

** Tipy na užitečné příslušenství k počítačům ** Poradíme, s jakými produkty neuděláte chybu ** Některé z věcí mohou být dobrými vánočními dárky

David Polesný, Stanislav Janů | 20

David PolesnýStanislav Janů
Příslušenství
Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

Co je to UWB? Nová technologie zastoupí Wi-Fi, Bluetooth i NFC a slibuje velké věci

** V nových mobilech se začíná objevovat tajemná zkratka UWB ** Jde o další technologii, jak navzájem propojit různá zařízení ** Oproti Wi-Fi a Bluetooth má řadu výhod

Lukáš Václavík | 36

Lukáš Václavík
UWBIoTTechnologie
Google chystá funkci, která z chytrého Gmailu udělá hloupý Gmail
Lukáš Václavík
SoukromíGmailGoogle
Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

Nejlepší notebooky do 20 000 Kč. Tipy, co se dnes vyplatí koupit

** S cenou do 20 tisíc lze vybrat solidní notebook na práci i hry ** Přenosné notebooky nabídnou i kovová těla a rychlý hardware ** Možná největší problém je nedostupnost, nejžádanější kusy jsou vyprodané

David Polesný | 33

David Polesný
VánoceNotebooky
Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

Jak v prohlížeči vypnout oznámení zasílaná webovými stránkami

** Obtěžují vás neustálé dotazy webů, zda chcete zobrazovat oznámení? ** Můžete je zakázat, a to jak kompletně, tak i pro jednotlivé stránky ** Připravili jsme návody pro Chrome, Firefox, Edge a Operu

Karel Kilián | 11

Karel Kilián
Jak na InternetTipyProhlížeče
Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

Fedora 33 prostě funguje. Linux si zaslouží dobýt laptop, je to ale asi opět marné

** Desktopový Linux funguje a vypadá stále lépe ** Fedora 33 není výjimkou ** Ve stínu Windows a macOS tu vyrostly skvělé alternativy

Jakub Čížek | 156

Jakub Čížek
FedoraOperační systémyLinux

Aktuální číslo časopisu Computer

Jak prodloužit výdrž notebooku

Velké testy: gamepady a inkoustové tiskárny

Důkladný test Sony Playstation 5