JavaScript - 1. lekce

Úvodní díl série článků kurzu JavaScriptu.

Pár slov úvodem

JavaScript je mutiplatformní interpretovaný scriptovací jazyk s podporou jednoduchého objektově orientovaného programování (OOP). JavaScript běží na straně klienta (v internetovém prohlížeči) na rozdíl od PHP, Perlu, či jiných jazyků, které běží na straně serveru. Byl vydán v roce 1995 s tehdejší novou verzí Netscape Navigatoru (tudíž je Netscape tvůtrcem JavaScriptu). Jak už se můžete dovtípit v názvu, JavaScript dokáže dobře komunikovat s Java applety, ovšem původem s ní nemá vůbec nic společného (i syntaxe má blíže k jazyku C, ovšem podobnost s Javou se také nezapře). Výhoda tohoto jazyka je v jeho rychlosti, která je paradoxně velmi malá, ale protože JavaScript dokáže vyhodnocovat operace v uživatelově prohlížeči, není potřeba se spojovat se serverem, a tudíž ušetříte mnoho času a proces se „jeví rychlejším“. JavaScripty jsou uvedeny ve zdrojových kódech stránek mezi tagy <script> a </script> (jejich obsah se většinou zapisuje ještě do HTML poznámky , ale to pouze pokud jsou součástí těla stránky – elementu <body>) nebo jako samostatné soubory s příponami .js či .jse.

Dnes již existuje technologie založená na JavaScriptu, která dokáže komunikovat se serverem, a to bez znovunačtení stránky. Možná ji znáte, možná jste o ní jen slyšeli, možná je to pro vás novinka – jedná se o Ajax. Seriál k tomuto jazyku pro vás zpracovává kolega Petr Láslo a najdete ho v sekci Ajax.

Předpoklady k výuce

Znalost jazyka HTML
Vyplatí se alespoň částečná znalost CSS

Zápis scriptu

Než se dostanu k samotnému zápisu, chtěl bych vás upozornit, že verze JavaScriptu, se kterou budeme pracovat je 1.7.

JavaScript zapisujeme mezi již známé tagy <script> a </script>, a to buď přímo do těla dokumentu (mezi tagy <body> a </body>) a nebo do hlavičky dokumentu (mezi tagy <head> a </head>). Do hlavičky ovšem zapisujeme pouze definice jednotlivých funkcí nebo objektů, deklarují se až v těle dokumentu.

V následujícím příkladu je ukázka hlavičkového zápisu scriptu i zápisu scriptu v těle stránky.

<html>
  <head>
    <title>titul</title>
  
    <script type="application/javascript;version=1.7">
      Definice scriptu (funkce či objektu).
    </script>
  
  </head>
  <body>
  
    Tělo dokumentu.

    <script>
    <!--
      Deklarace (možno i definice) scriptu (funkce či objektu).
    -->
    </script>

    Tělo dokumentu.
  
  </body>
</html>

Script ovšem nemusí být zapsán pouze mezi taky <script> a </script>, ale může být obsažen i v atributech různých HTML tagů, a to jako atributy událostí, o kterých se zmíním v některé z následujících lekcí. Jen pro představu, takový zápis vypadá takto (použiji událost onLoad, která vykoná script po načtení daného elementu, což pro nás ale teď není vůbec podstatné).

<body onLoad="nazevFunkce();">

Zápis je pro vás určitě velice povědomý z běžných HTML atributů. Zde je po načtení stránky volána funkce s názvem nazevFunkce, která nemá žádné vstupní hodnoty (prázdné závorky za názvem funkce) a definována musí být v hlavičce, jelikož musíte funkci vždy definovat, než ji zavoláte. O funkcích se dozvíte více také v pokračování kurzu.

První script

Je načase napsat první funkční script. Obejdeme používaný Hello World a zavoláme script, který vypíše do těla stránky následující text – „Text napsaný JavaScriptem“). K výpisu textu do dokumentu používáme objekt document a jeho metodu write; můžete to nazývat funkcí a zapisuje se document.write();

<html>
  <head>
    <title>titul</title>
  </head>
  <body>

    Tělo dokumentu.

    <script type="application/javascript;version=1.7">
    <!--
      document.write("Text napsaný JavaScriptem.");
    -->
    </script>

    Tělo dokumentu.

  </body>
</html>

Takto zapsaný kód nám stvoří toto:

Tělo dokumentu. Text napsaný JavaScriptem. Tělo dokumentu.

Nyní vás může snad zarazit pouze atribut type. Udává typ obsahu daného elementu, u kterého je zapsán, tedy že jde o aplikaci JavaScriptu verze 1.7 (budeme tedy psát všude application/javascript;version=1.7).

Externí připojení JavaScriptu

Scripty si můžete vytvářet do samostatných souborů (scripty, jež můžete psát do hlavičky, takže víceméně definice funkcí a objektů) a pouze se na ně odkazovat. Není v tom žádná věda a funguje to podobně jako importování stylů s tím rozdílem, že zápis je trochu odlišný. Dejme tomu, že mám soubor se sciptem s názvem script.js a chceme ho importovat do HTML stránky. Stačí do hlavičky napsat toto:

<script type="application/javascript;version=1.7" src="script.js" />

Komentáře

Komentáře vám určitě velmi pomohou při psaní složitějších scriptů. Když pracujete na větším projektu, často ho nezvládnete za jeden den. A když si dáte mezi psaním třeba týden prodlevu, bude vám trvat nějakou dobu, než se se scriptem plně dorozumíte a budete moci pokračovat (nemluvě o tom, když váš script bude editovat někdo jiný). Tuto dobu vám zkrátí komentáře v kódu. Díky nim se budete moci snadněji zorientovat v kódu, proto je pro vlastní dobro používejte. Komentáře můžete požívat jednořádkové a víceřádkové. Jejich zápis je uveden v kódu níže.

<script type="application/javascript;version=1.7">
<!--
  document.write("text");     // jednořádkový komentář - na tomto řádku už nelze pokračovat v psaní kódu

  document.write("text");     /* Víceřádkový komentář - script se vykoná, ale
  vše ostatní po uzavírací lomítka s hvězdičkou
  bude jen a jen komentář
  document.write"text"); - tento script se nevykoná */

  // document.write("text"); - ani tento příkaz nebude do výsledku scriptu zahrnut

  document.write("text");     /* Tento zápis můžete též použít jednořádkově */
-->
</script>

Na závěr pár rad, čeho se vyvarovat…

JavaScript rozlišuje velká a malá písmena, tudíž nazevFunkce(); a nazevfunkce(); není totéž, stejně jako není document.write(); totéž co Document.Write();.
Ve funkci document.write();, ale i jiných určených k zápisu textu, se nesmí zalomit v textu v uvozovkách řádek. Kdybyste tak učinili, script by pozbyl funkčnosti.
Řádek scriptu (příkaz) je nutné zakončovat středníkem, následuje-li řádek další. Předvedu na příkladu níže.

if (neco) {
  document.write("kus textu")     // správně
}

if (neco) {
  document.write("kus textu");     // správně
}

if (neco) {
  document.write("kus textu");     // správně
  document.write("kus textu");
}

if (neco) {
  document.write("kus textu")     // špatně
  document.write("kus textu");
}

if (neco) {
  document.write("kus textu")     // špatně
  document.write("kus textu")
}

if (neco) {
  document.write("kus textu");     // správně
  document.write("kus textu")
}

V příští lekci se můžete těšit na práci s textem, proměnnými, varovným oknem alert a bude na vás čekat první úkol v kurzu.

JavaScript - 1. lekce

Programátoři po celém světě dnes slaví Den programátorů
Celá zprávička