The ready event

V předchozí kapitole jsme uvedli, že je dobrým zvykem počkat, až bude dokument plně načten a připraven, než s ním začnete pracovat. To také umožňuje mít váš tag "script" před částí "body" vašeho dokumentu, buď přímo v sekci "head", nebo odkazem na externí soubor JavaScript. Můžete to udělat tak, že svůj kód umístíte do události document ready. Použijeme stejný příklad jako v kapitole "Ahoj, světe!", ale tentokrát je kód uvnitř události ready:

<div id="divTest1"></div>
<script type="text/javascript">
function DocumentReady()
{
	$("#divTest1").text("Hello, world!");	
}

$(document).ready(DocumentReady);
</script>

Vytvoříme funkci nazvanou DocumentReady, která by se měla spustit, jakmile je dokument připraven pro manipulaci s DOM. V posledním řádku použijeme metodu ready() k přiřazení naší funkce k události ready, abychom jQuery řekli, že jakmile bude dokument připraven, chceme, aby zavolal naši funkci.

Zápis můžeme zkrátit použitím anonymní funkce JavaScriptu. To v podstatě znamená, že místo toho, abychom funkci deklarovali a pojmenovali, ji jednoduše vytvoříme a poté okamžitě předáme odkaz funkci ready(). Pokud s JavaScriptem začínáte, může se vám to zdát příliš komplikované, ale jak si na to zvyknete, možná oceníte zkrácení kódu k dosažení stejného výsledku:

<div id="divTest2"></div>
<script type="text/javascript">
$(document).ready(function()
{
	$("#divTest2").text("Hello, world!");	
});
</script>

To ale samozřejmě nebylo ani dost krátké pro vývojáře jQuery, a tak se rozhodli vytvořit verzi (přetížení) konstruktoru jQuery, která má jako parametr připravenou funkci, aby byla ještě kratší:

<div id="divTest3"></div>
<script type="text/javascript">
$(function()
{
	$("#divTest3").text("Hello, world!");	
});
</script>

V posledním příkladu je naše anonymní funkce předána přímo konstruktoru jQuery, který ji přiřadí k události ready. Jak uvidíte při testování kódu, událost se spustí hned po načtení stránky, většinou tak rychle, že si to ani neuvědomíte.

Jak již bylo popsáno, zabalení kódu do funkce události "ready" je nejlepším postupem pro použití jQuery ve vašem dokumentu, a proto uvidíte v tomto tutoriálu pouužívat tento postup ve většině příkladů, pokud není přeskočen, aby se velikost příkladů snížila.