2. díl - jQuery - Neobtruzivní JavaScript a události

JavaScript jQuery jQuery - Neobtruzivní JavaScript a události

Minule jsme nakousli jQuery a vytvořili jsme si jednoduchou webovou kalkulačku. Dnes se na jQuery podíváme podrobněji, naučíme se psát čistší kód a ukážeme si, na jaké události na webové stránce jsme schopni reagovat. Nejprve si ale řekněme něco o tom, jak vidí webovou stránku prohlížeč.

Document Object Model (DOM)

Document object model (zkráceně DOM) je stromová struktura webové stránky tak, jak ji má v paměti načtenou prohlížeč. Cokoli v ní změníme se okamžitě projeví i na zobrazeném webu, takhle fungují aktivní stránky. Jak jistě víte, webová stránka se skládá z elementů. Úplně nejvýše je HTML, v něm je HEAD a BODY, v BODY je potom samotný obsah, který je rozdělený v nějakých odstavcích, divech a podobně. V minulém díle jsme si řekli, že jQuery používá k manipulaci s obsahem webové stránky selektory podobné těm v CSS. Například příkaz $("#kontejner") projede vnitřní DOM stránky a vrátí nalezený element s ID kontejner. Element je navíc obalen speciální funkcionalitou, která nám velmi jednoduše umožňuje ho skrýt, zobrazit, číst nebo zapisovat jeho obsah, vkládat do něj další podelementy, volat na něm animované efekty a podobně.

Pozn.: Čistý JavaScript bez jQuery obsahuje také určitý způsob, jak si o tyto elementy říkat, ale je těžkopádný, složitý, neobsahuje žádnou rozšířenou funkcionalitu a navíc se chová v různých prohlížečích různým způsobem. Přijde mi zbytečné tu s ním ztrácet čas a i nebezpečné ho používat, ale kdybyste někdy viděli příkazy typu document.getE­lementById, element.childNo­des[0].nodeTy­pe atd., víte, o co se jedná.

V naší ukázce s kalkulačkou jsme si z DOM vytáhli políčka s čísly a přečetli jejich obsah. Podobně jsme si pomocí DOM nalezli příslušné tlačítko, abychom na něj mohli navěsit událost (přiřadit k němu funkci, která se při kliknutí provede).

jQuery je tedy založena na selektorech, kterými si vybíráme elementy z DOM, se kterými chceme pracovat.

Neobtruzivní JavaScript

Až doposud jsme byli zvyklí psát skripty tam, kam se nám to hodilo, aby se spustily (vypsaly). To jsme dělali však jen proto, abychom začali co nejjednodušeji. Stejně, jako je špatné míchat HTML a CSS (CSS styl by měl být v externím souboru), je špatné míchat HTML a JavaScript. V HTML souboru nesmí být ani stopy po jiném jazyku. Ideálně by všechny JavaScript skripty měly být v externích souborech s příponou .js, hovoříme potom o tzv. neobtruzivním neboli nevtíravém JavaScriptu. Upravme si nyní naší kalkulačku zminula tak, aby byla v souladu s dobrým zápisem.

Pozn.: Na starých webech jsme se mohli setkat s HTML atributy jako je onclick, který byl vyplněn u elementu input a byl v něm odkaz na JavaScriptovou funkci. To je přesná ukázka toho, jak to nemá vypadat :)

Připomeňme si, jak naše kalkulačka vypadala:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
        <title>Jednoduchá webová kalkulačka</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
        <p>Vítejte v jednoduché kalkulačce!
        <br />
        <input type="text" id="cislo1" size="5" /> + <input type="text" id="cislo2" size="5" /><br /><input type="button" id="tlacitko" value="Spočti!"></p>
                <script type="text/javascript">
                        var kliknuti = function()
                        {
                                var cislo1 = $("#cislo1").val();
                                var cislo2 = $("#cislo2").val();
                                var vysledek = parseInt(cislo1) + parseInt(cislo2);
                                alert(vysledek);
                        };
                        $("#tlacitko").click(kliknuti);
                </script>
</body>

</html>

Vidíme ošklivě vložený JavaScript v tagu script rovnou v body. Vyjmeme JavaScriptový kód a uložíme si ho do souboru kalkulacka.js (již bez tagů <script>). Je dobrým zvykem mít JS soubory v nějaké složce, pojmenujeme si ji např js. Na js soubor v HTML pouze odkážeme v hlavičce. HTML bude tedy vypadat následovně:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
        <title>Jednoduchá webová kalkulačka</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
                <script src="js/kalkulacka.js" type="text/javascript"></script>
</head>

<body>
        <p>Vítejte v jednoduché kalkulačce!
        <br />
        <input type="text" id="cislo1" size="5" /> + <input type="text" id="cislo2" size="5" /><br /><input type="button" id="tlacitko" value="Spočti!"></p>
</body>

</html>

Máme hezky čisté HTML. Kalkulačka však nyní nebude fungovat, veškerá funkcionalita je sice přítomna, ale nespustí se, protože není vložena do HTML kódu. Prohlížeč ví, co má dělat, ale nikde není řečeno kdy to má udělat. Nyní nastupují tzv. události.

Události

Ke spuštění skriptů se používá událost Document Ready, která se vyvolá v tu chvíli, kdy se načte DOM, tedy struktura webu. Obrázky se mohou ještě načítat, ale kostra webu je již v paměti. Do této události vložíme kód, který se dříve povaloval uvnitř HTML kódu a plně nahradí naše "hloupé" vkládání tagu script někam do BODY.

Výhod je mnoho, kromě již zmíněné přehlednosti např také to, že v momentě, když JS pracuje s DOM, je již celý načtený. Předtím jsme nemohli manipulovat s prvky, které byly napsané až za skriptem, protože ještě nebyly stažené.

Události jsme si již vlastně vyzkoušeli u našeho tlačítka, kterému jsme na událost click navěsili funkci, která se při kliknutí spustila. Nyní to podobně uděláme s událostí Document Ready, která se volá na elementu document. Obsah souboru kalkulacka.js ve složce js bude tedy vypadat následovně:

var kliknuti = function()
{
        var cislo1 = $("#cislo1").val();
        var cislo2 = $("#cislo2").val();
        var vysledek = parseInt(cislo1) + parseInt(cislo2);
        alert(vysledek);
};

var pocatecni_nastaveni = function()
{
        $("#tlacitko").click(kliknuti);
}

$(document).ready(pocatecni_nastaveni);

Skript se rozšířil o funkci pocatecni_nas­taveni, která se zavolá ve chvíli, když je DOM připravený k použití. V této funkci provedeme vše potřebné, tedy přiřazení callbacku k tlačítku. Říkali jsme si, že funkci lze zapsat i anonymně, ukážeme si, jak by náš kód vypadal s použitím anonymních funkcí. Většinou se to v praxi takhle dělá (je to kratší), ale pokud vám to přijde nepřehledné, klidně funkce deklarujte normálně :)

$(document).ready(function() {
        $("#tlacitko").click(function() {
                var cislo1 = $("#cislo1").val();
                var cislo2 = $("#cislo2").val();
                var vysledek = parseInt(cislo1) + parseInt(cislo2);
                alert(vysledek);
        };);
});

Pozn.: Na starých webech možná narazíte na JavaScript vložený v body do události On load. Tato událost se však vyvolá ve chvíli, kdy je načtená celá stránka i s obrázky a podobně, což je ve většině případů nevhodné a pomalé.

Začínáme zjišťovat, že jQuery se točí i okolo událostí. Kromě stěžejní Document ready, která se dá zkráceně zapsat i jen jako $() známe tedy ještě událost click, o kteér jsme si ale neřekli vše. Pojďme si zmínit i několik dalších:

  • click - Vyvolá se při kliknutí myšlí a to nejen na tlačítko, ale na libovolný element (např. obrázek).
  • dblclick Vyvolá se při dvojkliku.
  • change - Vyvolá se, pokud se změnil obsah nějakého formulářového prvku.

Příklad události change:

$(".policko").change(function(){
   // reakce na změnu, např. kontrola, zda jsou zadané povolené znaky
   // pro přístup k elementu, který událost vyvolal, použijeme $(this)
});
  • focus - Vyvolá se, když se na formulářové pole klikne (zaktivní se)
  • blur - Vyvolá se, když se formulářové pole opustí

Události myší:

  • mouseenter - Vyvolá se ve chvíli, kdy na element najedeme myší.
  • mouseleave - Vyvolá se ve chvíli, kdy kurzor element opustí.

Události klávesnicí:

  • keydown - Vyvolá se ve chvíli stiknutí klávesy.
  • keypress - Vyvolává se když klávesu držíme.
  • keyup - Vyvolá se ve chíli puštění klávesy.

Události okna:

  • resize - Vyvolá se při změně velikosti okna prohlížeče.
  • scroll - Vyvolá se při scrollování stránkou v prohlížeči.

Všechny výše zmíněné metody jsou vlastně zkrácené zápisy a vnitřně volají metodu bind s parametry název události a callback. Událost lze tedy deklarovat i takto (vhodné použít v případě, kdy během zápisu nevíte, jakou událost budete volat, protože se zadává jako textový řetězec):

$(#id_elementu).bind("click", function() {...});

Kompletní seznam událostí naleznete na http://api.jquery.com/…gory/events/ . Během seriálu si jednotlivé události vyzkoušíme.

Příště si ukážeme, jak lze přes JS měnit obsah webové stránky, tedy manipulaci s DOM. A těšte se i na pořádnou porci efektů.


 

Stáhnout

Staženo 738x (817 B)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (19 hlasů) :
4.894734.894734.894734.894734.89473


 


Miniatura
Předchozí článek
Úvod do jQuery
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Vkládání obsahu v jQuery (DOM)

 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
j.martenek
Člen
Avatar
j.martenek:

Omlouvám se , ale přesně jsem nepochopil funkci callback a co znamená to val.Děkuji předem za odpověď.

 
Odpovědět 5.1.2013 20:02
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

David Čápka, budeš dělat i další díly do seriálu s jQuery ? :)

Odpovědět 24.3.2013 0:26
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na j.martenek
Michael Olšavský:

Callback je vlastne to, co se stane po nejake udalosti. => "odpoved" na udalost. A val je zkratka value a ziskava hodnotu daneho elementu stranky.

 
Odpovědět 24.3.2013 7:34
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Ahoj, dělám stránku kde budu klikáním na položky seznamu vybírat ze schovaných divu jeden a ten zobrazím. Mám tento script na konci body:

var vypis = function()
{
        alert("baf!");
}
var nastav = function()
{
        vypis();
        var button = document.getElementById('button');
        $(button).click(vypis);
}
$(document).ready(nastav());

ovšem pokud ho vložím do externího js souboru, tak se zavolá metoda výpis při načtení stránky ale nezavolá se již při kliknutí na tlačítko :( Co dělám špatně?

Editováno 24.3.2013 13:39
Odpovědět 24.3.2013 13:38
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Jiří Gracík
Jiří Gracík:

Jsem sem dal špatnej kód, to už jsem s tím experimentoval. Jsem totiž nevěděl že tohle získává podle tagu a ne podle id :P

$('li')

Nicméně teď mám toto:

<script>
  var vypis = function()
  {
          alert("vypsalo se");
  }
  var nastav = function()
  {
          vypis();
          $('li').click(vypis);
  }
  $(document).ready(nastav());
  </script>

a jak poznám na kterou konkrétní položku seznamu se kliklo? Předpokládám že nějak přes ID :)

Odpovědět 24.3.2013 14:03
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Jiří Gracík
Jiří Gracík:

Tak dobrý, už jsem si to pořešil :D

//edit - Tak dobrý, ještě jsem to nepořešil :D

//edit editu - Pravděpodobně to nefunguje s ID proto, že je ten seznam v dalších prvcích s různými ID :P

Editováno 24.3.2013 14:25
Odpovědět 24.3.2013 14:19
Creating websites is awesome till you see the result in another browser ...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
David Čápka:

V callbacku funguje proměnná $(this)..., referencuje na původní objekt co vyvolal událost. Je to napsané v článku.

Odpovědět 24.3.2013 14:34
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
kleofas.hatlapatka:

Zdravím,

po pročítání a testování scriptů jsem objevil, že v jednom přebývá "středník" navíc (viz. níže).

$(document).ready(function() {
        $("#tlacitko").click(function() {
                var cislo1 = $("#cislo1").val();
                var cislo2 = $("#cislo2").val();
                var vysledek = parseInt(cislo1) + parseInt(cislo2);
                alert(vysledek);
        };); // ZDE PŘEBÝVÁ STŘEDNÍK
});
Odpovědět  +2 28.1.2014 21:30
Apeluji na všechny co odpovídají na dotazy, tak pokud je to jen trochu možné dávejte rovnou reálná řešení třeba v htt...
Avatar
Odpovídá na David Čápka
Libor Šimo (libcosenior):

Presne:

$(document).ready(function() {
         $("#tlacitko").click(function() {
                 var cislo1 = $("#cislo1").val();
                 var cislo2 = $("#cislo2").val();
                 var vysledek = parseInt(cislo1) + parseInt(cislo2);
                 alert(vysledek);
         }<strong>;</strong>); //
});

Treba to v článku opraviť, pretože pri skúšaní mi to nešlo a nevedel som prečo.
Všimol som si to až po niekoľkých hodinách testovania a surfovania na w3school.

Odpovědět 11.3.2014 13:34
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Šimon Raichl
Redaktor
Avatar
Šimon Raichl:

Mě funguje i když to mám v *.js souboru:

var klik = function()   {
var c1 = $("#c1").val();
var c2 = $("#c2").val();
var v1 = parseInt(c1) + parseInt(c2);
var v2 = parseInt(c1) - parseInt(c2);
var v3 = parseInt(c1) * parseInt(c2);
        if (c2 != 0)
        var v4 = parseInt(c1) / parseInt(c2);
        else
        var v4 = "Nelze dělit nulou!"
alert(" Sčítání " +  v1 + " Odečítání " + v2 + " Násobení " + v3 + " Dělení "+ v4);
}
$("#bt").click(klik)
 
Odpovědět 13.8.2014 17:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 11. Zobrazit vše