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

JavaScript - 1. lekceJavaScript - 1. lekce

 

JavaScript - 1. lekce

Google       Google       2. 1. 2006       31 773×

Ú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

Reklama
Reklama
Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

Obrázek ke článku Seznamte se s open source platformou NopCommerce – 1. díl

Seznamte se s open source platformou NopCommerce – 1. díl

Hledáte e-commerce řešení, které si dokážete přizpůsobit podle vašich požadavků? Chcete čistý a srozumitelný kód, se kterým bude radost pracovat? Prozkoumejte s námi možnosti open source projektu NopCommerce. Seriál programování pod NopCommerce vám pomůže překonat první kroky nejistoty a úspěšně zvládnout vývoj pod platformou NopCommerce.

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