Ú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 <!-- 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 [ http://programujte.com/index.php?rubrika=296-webdesign&sekce=362-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();anazevfunkce();není totéž, stejně jako nenídocument.write();totéž coDocument.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.