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

JavaScript - 1. lekceJavaScript - 1. lekce

 

JavaScript - 1. lekce

Google       Google       2. 1. 2006       29 789×

Ú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 Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý