Home >> JavaScript Návod >> JavaScript & HTML

JavaScript & HTML

V předchozí lekci jsme se naučili něco o syntaxi JavaScriptu a řekli jsme si jakými způsoby lze JavaScript vložit do HTML dokumentu. V této lekci se na tyto možnosti podíváme podrobněji.

JavaScript umístěný v HTML souboru

První se podíváme na možnost vložit JavaScript přímo do HTML souboru. Rozumíme tím, že celý kód je vypsán v HTML souboru. Takový kód se umisťuje buď do hlavičky (<head>) nebo do těla (<body>) dokumentu. Jako příklad nám poslouží tento jednoduchý JavaScript:



<script language="javascript" type="text/javascript">

<!--

	alert('Vítejte na Klikzone.cz');

-->


</script>

Zde si můžete zobrazit náhled.

Jestliže umístíme tento kód do HTML dokumentu, spustí se pokaždé jakmile je dokument načten. To znamená, že se po každé aktualizaci stránky spustí znovu.

Ale co když chceme, aby se skript spustil až po nějaké určité události? Například po kliknutí na nějaký prvek.

K tomu nám poslouží tzv. Události v JavaScriptu.

Co jsou to události?

Události (Events) umožňují vložit JavaScript do HTML prvku. Jedná se tedy o speciální atributy, které se přídavájí přímo do HTML prvku.

Následující příklad by to měl objasnit:


<h1 onClick="alert('Toto je nadpis o velikosti h1!!!');">Klikni na tento text!!!</h1>

Výsledek:

Klikni na tento text!!!

Jedná se o jednoduchý příklad vložení JavaScriptu přímo do HTML prvku. Script se narozdíl od prvního příkladu spustí až po provedení požadované události, v tomto případě po kliknutí (onClick).

Když používate Javascript jako v tomto příkladu, není třeba psát tagy script.

V JavaScriptu existují samozřejmě ještě další události (Celkem 18), ale k těm se dostaneme až později. V této lekci nám posloužily jako příklad pro vložení JavaScriptu do HTML prvku.

JavaScript umístěný v externím souboru

Javascript můžete také umístit do externího souboru (s koncovkou .js). Do HTML dokumentu se poté umístí odkaz na tento soubor. Tento způsob se používá v případě, že se jeden skript opakuje na více stránkách.

Odkaz na externí JavaScript se zapisuje takhle:



<script language="javascript" style="text/javascript" src="soubor.js"></script>

Externí JavaScript je velmi užitečný zejména, pokud je stejný skript umístěn na několika stránkách (například 20). Oceníte to ve chvíli, kdy chcete tento skript upravit - stačí totiž upravit pouze jeden soubor, jelikož v HTML dokumentu se na tento soubor pouze odkazuje.

Další lekce >>

<< Předchozí lekce