script - Český HTML 5 manuál

HTML a CSS Manuál Ostatní tagy script - Český HTML 5 manuál

Do HTML dokumentu můžeme vložit klientské skripty, které obohatí jeho obsah o dynamické funkčnosti. Obvykle se jedná o různá menu a efekty.

<script>

<script> slouží k vložení klientského skriptu do HTML dokumentu. Nejčastěji se jedná o JavaScript. Tag slouží jak pro přímé vložení kódu, tak pro odkázání na externí soubor s kódem. Druhé použití je častější, preferuje se totiž nemíchat HTML s dalšími jazyky. <script> je párový tag.

Skript je (pokud není nastaveno jinak) spuštěn v tu chvíli, co je parsován a parsování je v tu chvíli pozastaveno.

Atributy

Tag má nasledující atributy:

  • async - Spustí skript asynchonně a jeho běh tedy nenaruší parsování stránky. Funguje pouze pro externí skripty. Atribut je typu boolean, stačí ho tedy uvést a na hodnotě nezáleží.
  • defer - Skript je spuštěn až po dokončení parsování stránky. Atribut je též typu boolean.
  • type - Obsahuje MIME typ skriptu. Nejčastěji se používá hodnota text/javascript.
  • charset - Specifikuje znakovou sadu uvnitř skriptu.
  • src - Specifikuje umístění externího skriptu. Pokud je atribut uveden, musí být obsah tagu <script> prázdný.

<script> se vkládá většinou do hlavičky (a je nastaven tak, aby se spustil až po naparsování dokumentu), nebo se vloží těsně před ukončující tag </body>.

Ukázka použití

Ukázka jednoduchého skriptu:

<script type="text/javascript">
<!--
alert('Tuto zprávu zobrazil JavaScript');
-->
</script>

Skript výše je napsán přímo do HTML kódu a vypíše jednoduchou hlášku přímo ve chvíli, kdy se na něj při parsování stránky narazí. Je zvykem psát skripty do komentářů, aby byly ignorovány prohlížeči, které je nepodporují, i když dnes takové již asi nejsou.

Preferovanější způsob vložení by byl následující a byl by umístěn v hlavičce stránky:

<script type="text/javascript" src="scripts/zprava.js"></script>

Skript je nyní odkázán na soubor zprava.js ve složce scripts. Je tak odděleno HTML od kódu skriptu. V souboru by byl následující kód:

alert('Tuto zprávu zobrazil JavaScript');

Ideálně se k načítání skriptů využívá událost DOM ready, a to zejména pomocí frameworku jQuery. Více se JavaScriptu věnuje sekce JavaScript , která také obsahuje kompletní tutoriály.

<noscript>

<noscript> slouží k zobrazení alternativního obsahu v případě, že prohlížeč zpracování klientských skriptů nepodporuje, nebo ho uživatel zakázal. Do HTML 4 směl být <noscript> obsažen pouze v <body>, nyní může být umístěn i v <head>.

Ukázka použití <noscript> v <body> je následující:

<noscript>
        Vas prohlizec nepodporuje JavaScript a tudiz nebude fungovat validace formulare.
</noscript>

A použití <noscript> v <head>:

<head>
        <title>Ukázka noscript</title>
        <noscript>
                <style>body{background:red}</style>
        </noscript>
</head>

 

  Aktivity (1)

Manuál 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.

Miniatura
Všechny články v sekci
Ostatní tagy - Český HTML 5 manuál

 

 

Komentáře

Avatar
Kit
Redaktor
Avatar
Kit:

Bohužel se často setkávám s nesprávným použitím <noscript> přesně podle prvního příkladu. Jeho účelem není informovat uživatele o něčem, co ví, ale poskytnout alternativní obsah. Je nutné si uvědomit, že vyhledávače značku <noscript> neznají a proto její obsah normálně indexují. Vypadá pak hodně divně, když jako výsledek vyhledávání vypadá takto:

**Ukázka noscript**

Vas prohlizec nepodporuje JavaScript a tudiz nebude fungovat validace formulare.

Daleko výhodnější je do této značky umístit "žrádýlko pro Googla". Tedy text, který má být ve vyhledávačích indexován. Dejte si však pozor na to, aby přímo souvisel s obsahem stránky. Jinak si vysloužíte velmi nepříjemnou penalizaci.

Text "Vas prohlizec nepodporuje JavaScript" nesouvisí s obsahem stránky a proto by se na webstránce neměl nikdy objevit ani v <noscript>.

Odpovědět  +1 18.8.2012 13:25
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

Máš pravdu, s tou validací to není nejlepší příklad. Nicméně s tebou nesouhlasím s tím, že uživatel ví o tom, že má JS vypnutý. Naopak si myslím, že bychom ho na to měli upozornit. Nenapadá mě jiný způsob, jak to jednoduše udělat, než přes noscript.

Odpovědět 18.8.2012 13:45
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
Kit
Redaktor
Avatar
Odpovídá na David Čápka
Kit:

U některých prohlížečů mám Javascript trvale zapnutý, u jiných ho vůbec nemám podporován a vím o tom. Někteří uživatelé ho nikdy nezapínají.

Pokud by uvnitř <noscript> byl odkaz na neskriptovanou verzi stránky, tak bych to bral. Bez toho mi tato informace připadá bez užitku.

Do <noscript> se dá krásně umístit rozcestník nebo mapa stránek a to považuji za velmi užitečné.

Odpovědět 18.8.2012 13:52
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

Dnes určitě nemá smysl dělat neskriptovanou verzi stránky. Co většina webmasterů chce, je říci uživateli s vypnutým JS, že mu polovina věcí nepůjde, tak aby se nedivil. Je to podobné, jako když se před X lety řešili uživatelé s vypnutým CSS, ti už dnes snad nejsou a pokud ano, tak je lituji.

Pokud tedy není správné mít v noscript tuto informaci, nenapadá mě, k čemu by se element reálně využil, protože všechny ty navigační JS menu a další widgety se i s vypnutým JS bez problému zaindexují (viz třeba to zde na devbooku které je realizováno pomocí seznamu).

Odpovědět 18.8.2012 14:02
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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Kit
Drahomír Hanák:

V aplikacích postavených na JavaScriptu dávám obvykle do noscript návod, jak JavaScript zapnout (resp. odkaz na google) nebo odkazy na podporované prohlížeče. Na webech, které jsou z větší části v PHP a kde není JS moc potřeba se snažím, aby fungovali i bez JS, čehož lze dosáhnout někdy jen samotnými styly, kdy JS zpracovává jen efekty (např. menu o více úrovních atp.). Dnes je to ale celkem na nic, protože spousta věcí je na JS postavených (Google Maps API, Facebook API atd.), takže bych řekl, že je někdy lepší dát tam tu informaci, než třeba pracně vytvářet nějaké nejavascriptové verze.

 
Odpovědět 18.8.2012 14:08
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
Kit:

Stránka s beztabulkovým designem a s vypnutým CSS vypadá zpravidla docela dobře. Není to sice nic elegantního, ale účel to zpravidla splní. Totéž platí i pro Javascript: Stránka by měla fungovat v nějakém degradovaném režimu, který by však uživatele neměl omezit např. při odesílání diskuzního příspěvku.

Javascript je často používán i tam, kde je zbytečný. Pokud například jen chci změnit vzhled ikony po najetí myší nebo kliknutí, tak se to daleko elegantněji a rychleji dá vyřešit v CSS.

Odpovědět 18.8.2012 14:13
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
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 6 zpráv z 6.