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

JavaScript jQuery jQuery - Neobtruzivní JavaScript a události

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 833x (817 B)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
25 hlasů
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.
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)
Aktivity (1)

 

 

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

Avatar
Vladislav Ladicky:19.12.2017 13:23

No dobre, tak vysvetlím čo mám proti: Výraz unobtrusive vznikol pred 15 rokmi. Neskôr, pred 10 rokmi ho "presnejšie definovali" a zahŕňal sedem pravidiel. Dnes, keď sú moderné weby nie závislé, ale vyslovene postavené na JS, pravidlo "gracefully degradation" prakticky nemá zmysel - nepostavíš SPA bez JS. Pravidlo separácie vrstiev na štruktúru/výzor/sprá­vanie - písať zvlášť HTML/CSS/JS - je už zasa plne zakotvené v HTML5. A podobne - dnes už proste nemá zmysel hovoriť o unobtrusive JS, lebo ten princíp zastaral. Takže načo pliesť s takými termínmy? Separácia je proste potrebná a je to proste separácia, nevidím potrebu iného termínu. Feature detection treba o to viac ako kedysi, lebo za tých 15 rokov je tu podstatne viac prehliadačov a ich verzií ako vtedy. Ale to je feature detection, načo nový termín. Graceful degradation už prakticky nie je možná, JS hrá dnes vo weboch plne inú úlohu ako vtedy. Atď, atď... Vlastne ma prekvapuje, keď sa vidím, ako sa všetci snažia byť prudko "in" a v protiklade tomu používajú naďalej také prežité výrazy. Asi to potom bude o tom, vyzerať strašne vzdelane používaním zbytočných pseudoodborných výrazov, bez ohľadu na ich aktuálnosť... PS: To rovno nazvi kombináciu HTML a JS ako DHTML...

 
Odpovědět  -1 19.12.2017 13:23
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Vladislav Ladicky
David Čápka:19.12.2017 13:29

Zase jen zaměňuješ "Graceful degradation" a "Unobtruzive JavaScript". Neobtruznivní JavaScript je, že jej nemícháš s HTML kódem, je to v článku vysvětlené, možná by bylo dobré si jej nejprve přečíst.

Odpovědět 19.12.2017 13:29
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
Taskkill
Redaktor
Avatar
Odpovídá na Vladislav Ladicky
Taskkill:19.12.2017 13:35

Sedni za klávesnici a pro jednou místo prázdných tlachů napiš článek, aktualizuj ten stávající, angažuj se, generuj hodnotu. Kritizovat bez snahy přinést zlepšení v diskuzi umí kdekdo.

 
Odpovědět  +3 19.12.2017 13:35
Avatar
Odpovídá na David Čápka
Vladislav Ladicky:19.12.2017 13:38

Nie, nie je a v oficiálnej špecifikácii preto tento výraz ani nenájdeš. To, čo tam opisuješ, je separácia na vrstvy. Načo iný výraz, obzvlášť ak je nepresný a navyše už prežitý, ak tu máme oficiálny, presnejší výraz?

 
Odpovědět 19.12.2017 13:38
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Vladislav Ladicky
Jindřich Máca:19.12.2017 13:40

Dobře, možná je to archaismus, ale uvědom si, že tyto články už jsou také staršího data. To přeci nic nemění na významu toho slova, který je zde popsán dobře. Je to tutoriál pro začátečníky, v prvním díle byl napsán JS přímo do HTML a zde se tedy vysvětluje, proč by se to dělat nemělo a v dalších dílech se to bere jako samozřejmost. Ale je přeci dobře říct začátečníkům, proč to tak je.

 
Odpovědět  +1 19.12.2017 13:40
Avatar
Odpovídá na Taskkill
Vladislav Ladicky:19.12.2017 13:51

Nekritizujem, navrhujem aktualizáciu. A rád prispejem, len tú možnosť tu nemám a hlavne akýkoľvek môj návrh sa tu večne vníma ako kritika a nie návrh, tak načo. Aby celú námahu napokon niekto ješitne zmietol zo stola? Alebo aby som pod článok uviedol 30 referencií, hoci to tu nikto nerobí? Nehovoriac o tom, že referencia ešte nie je dôkaz správnosti a môže byť tiež mylná? Nie som tu jediný, čo má problém diskutovať vecne a logicky.

 
Odpovědět 19.12.2017 13:51
Avatar
Odpovídá na Jindřich Máca
Vladislav Ladicky:19.12.2017 13:56

Ale veď ja som len navrhol aktualizáciu. Navyše, prepísať to a označiť za separáciu na vrstvy im rozhodne dá do budúcnosti viac, lebo sa s takým označením budú stretávať ešte častejšie ako s unobtrusive, keďže dnes sa všetko separuje na vrstvy s čoraz subtílnejším významom.

 
Odpovědět 19.12.2017 13:56
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Vladislav Ladicky
Jindřich Máca:19.12.2017 14:17

Tak to myslím už dobře napsal Taskkill :-) Bohužel nemáme úplně kapacitu každý rok projít a aktualizovat všechny články, když jich je tu tolik. Proto se právě může každý stát redaktorem a přiložit ruku k dílu tam, kde si myslí, že je to potřeba. ;-)

 
Odpovědět  +1 19.12.2017 14:17
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Vladislav Ladicky
Taskkill:19.12.2017 14:23

Možná bys tedy měl změnit způsob jakým navrhuješ, když se to tu "věčně vnímá jako kritika".
A to další jsou jen slabý výmluvy - "Nebudu sám nijak přispívat, stejně byste nebyli spokojeni." Jojo, tohle je přesně ten přístup, kterej tebe a tvoje okolí někam posune.

Editováno 19.12.2017 14:24
 
Odpovědět  +1 19.12.2017 14:23
Avatar
Odpovídá na Taskkill
Vladislav Ladicky:19.12.2017 15:40

Hm. Áno. Nie, žeby moje návrhy nemali logiku, ale vedieť tie návrhy následne podať ľudskou formou - to je zjavne moja slabina. Permanentne sa mi darí pôsobiť prinajmenšom arogantne. Ospravedlňujem sa za to, niečo s tým urobím.

 
Odpovědět  +2 19.12.2017 15:40
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 26. Zobrazit vše