JavaScript - 1. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

JavaScript - 1. lekceJavaScript - 1. lekce

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

JavaScript - 1. lekce

Google       Google       2. 1. 2006       32 945×

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

Reklama
Reklama

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 <!-- a -->, 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…

  1. JavaScript rozlišuje velká a malá písmena, tudíž nazevFunkce(); a nazevfunkce(); není totéž, stejně jako není document.write(); totéž co Document.Write();.
  2. 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.
  3. Řá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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Tagy:
Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Tomáš BobekAutor je designérem stránek (2D grafika), ovládá jazyky HTML, CSS, PHP, JavaScript a zajímá se o programování v Javě.Krom programujte.com se podílí na projektech maths.cz (jako redaktor a grafik), ceskewebstudio.cz (jako designér) a webber.cz (jako JavaScript scriptař). Ostatní volný čas rád tráví s přáteli nebo sportuje (tenis, nohejbal, hokejbal, závodně fotbal).
Web     Twitter     Facebook    

Nové články

Obrázek ke článku Průzkum JetBrains: JavaScript mezi programátory vede, Kotlin získává na popularitě

Průzkum JetBrains: JavaScript mezi programátory vede, Kotlin získává na popularitě

Společnost JetBrains, přední tvůrce softwarových nástrojů pro profesionální vývojáře s centrálou v Praze, představila výsledky průzkumu, který pomáhá lépe porozumět a získat vhled do pracovních návyků programátorů. Zjištění mohou být nápomocná nejen pro zvýšení efektivity, ale také pro vytvoření ideálního pracovního prostředí pro programátory.  

Reklama
Reklama
Obrázek ke článku Jsou Youtubeři jen pro mladé?

Jsou Youtubeři jen pro mladé?

Každá generace má své, a tak zatímco v šedesátkách si celý svět ujížděl na Beatles a v devadesátkách jsme všichni hrdě nosili šusťákovky, dnešnímu světu jednoznačně vládne jiný fenomén, a to jsou Youtubeři. Jedná se o jakési novodobé idoly, které jsou mladým blíže než celebrity z dob minulých. 

Obrázek ke článku IT odborníkem na volné noze

IT odborníkem na volné noze

Práce na volné noze je lákavá hned z několika důvodů. Jedním z nich je časová flexibilita, nikdo vás nenutí být na osmou v práci, pracovat každý den přesně osm hodin nebo vybírat si dovolenou tak, jak se to hodí zaměstnavateli. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý