| Einstein.cz | O Životě.cz | All4web | Chat4U | Soldát.cz |
Tvorba WWW
 
Odběr emailů

Aktuality
Články
 
 
Partnerské weby
 JakNaWeb.com - vše pro tvorbu webu - HTML, PHP, MySQL, ASP, CSS,
XML, JavaScripty, PHP
 
Informace o serveru
šéfredaktor
Marek Soldát

hostujeme u
WEB4U

kontaktní email
marek@soldat.cz

ISSN 1214-0082
 
Hledání
 
 
 
Anketa
Jakého používáte mobilního operátora?

Eurotel (20%)


T-Mobile (21%)


Oskar (26%)


Jiný (12%)


Nemám mobil (21%)



Celkem hlasovalo 110 lidí.
 
Co s článkem ?
 
Už jste četli...?
 
Ikonka serveru
 

Javascript za 5 minut

vydáno : 30. 01. 2003, autor : Marek Soldát, kategorie : Tvorba WWW - JavaScript

Tento článek je určen pro ty, jež chtějí pochopit základní podstatu JavaScriptu, jak se používá a kam se vkládá. Není to žádná učebnice, jen spíše takový úvod pro ty, jež chtějí javascript na svých stránkách používat.

JavaScript je skriptovací jazyk, který se provádí na straně klienta tj. na cílovém počítači. Vkládá se do dokumetů HTML, buď přímo, nebo pomocí externího souboru K jeho běhu potřebujete pouze prohlížeč, podporující JavaScript. Zdrojový kód JavaScriptu se vkládá buď přímo do dokumentu:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
--- kód JavaScriptu ---
</SCRIPT>

nebo do externího souboru s příponou .js :

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="mujskript.js">
</SCRIPT>

Samozřejmě můžeme javascripty provést po určité akci nějakého objektu(onLoad, onMouseOver, ...), příkaz(y) se pak vkládají rovnou jako hodnota atributu:

<IMG SRC="obrazek.gif" OnMouseOver="this.src=\'obrazek2.gif\'">

Pokud vkládáme JavaScript přímo do dokumentu, bylo by vhodné celý kód vložit do komentáře. Vyhneme se tak nechtěnému zobrazování částí zdrojového kódu u prohlížečů, které JavaScript nepodporují:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
--- kód JavaScriptu ---
// ->
</SCRIPT>

V Javascriptu můžeme psát více příkazů na řádek, ale pak je musíme oddělovat středníkem:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'Vítejte na mé stránce!\'); window.alert(\'Přeji mnoho zábavy.\');
// ->
</SCRIPT>

Teď, když víme, jak a kam se JavaScripty vkládají, vytvoříme si jednoduchý skript, který v vypíše text "Vítejte na mých stránkách":

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write(\'Vítejte na mých stránkách\');
// ->
</SCRIPT>

Otázkou je, zdali v JavaScriptu psát jednoduché, nebo dvojité uvozovky. Obojí je správně, ale Vám doporučuji v JavaScriptu uvozovky vždy jednoduché, nevznikají pak problémy při vkládání JavaScriptů do efektu nějakého objektu. Dvojitými uvozovkami bych efekt předčasně ukončil a zbytek kódu by ležel jentak uprostřed tagu, což rozhodně není to pravé. Teď si ale ukážeme, jak v JavaScriptu provádět jednoduché početní operace:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
cislo = 56 + 4;
document.write(\'Součet čísel 56 a 4 je: \'+cislo+\'.\');
// ->
</SCRIPT>

Nyní ale přichází okamžik, kdy budeme po uživateli vyžadovat určitá vstupní data. V následujícím skriptu použijeme funkci prompt, což je dialogové okno se vstupním polem.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
jmeno=window.prompt(\'Jak se jmenujete ?\');
document.write(\'Vaše jméno je: \'+jmeno+\'.\');
// ->
</SCRIPT>

Další dvě funkce, které s uživatelem komunikují formou dialogových oken jsou alert a confirm. Obě si je (s opětovným využitím funkce prompt) představíme v dalším příkladu:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'Začínáme !\');
souhlas=window.confirm(\'Souhlasíš ?\');
barva=window.prompt(\'Jaká je tvoje oblíbená barva ?\');
document.write(\'Začali jsme.\');
if (souhlas) {document.write(\'<FONT COLOR="green">Souhlasil si.</FONT>\');} else
{document.write(\'<FONT COLOR="red">Nesouhlasil si.</FONT>\');}
document.write(\'Tvoje oblíbená barva je \'+barva+\'.\');
// ->
</SCRIPT>

Slabá stránka tohoto příkladu se projeví ve chvíli, kdy v dialogovém vstupním poli kliknete na STORNO. Jak si sami můžete ověřit, v tomto případě bude mít proměnná BARVA hodnotu NULL, což není ono. V tomto skriptu se pokusíme tuto chybu odstranit:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'Začínáme !\');
souhlas=window.confirm(\'Souhlasíš ?\');
barva=window.prompt(\'Jaká je tvoje oblíbená barva ?\');
document.write(\'Začali jsme.\');
if (souhlas) {document.write(\'<FONT COLOR="green">Souhlasil si.</FONT>\');} else
{document.write(\'<FONT COLOR="red">Nesouhlasil si.</FONT>\');}
if (barva==null) {document.write(\'Oblíbená barva nebyla zadána.\');} else
{document.write(\'Tvoje oblíbená barva je \'+barva+\'.\');}
// ->
</SCRIPT>

Použitím jiného operátoru celou věc ještě zjednodušíme:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
window.alert(\'Začínáme !\');
souhlas=window.confirm(\'Souhlasíš ?\');
barva=window.prompt(\'Jaká je tvoje oblíbená barva ?\');
document.write(\'Začali jsme.\');
if (souhlas) {document.write(\'<FONT COLOR="green">Souhlasil si.</FONT>\');} else
{document.write(\'<FONT COLOR="red">Nesouhlasil si.</FONT>\');}
if (barva!=null) {document.write(\'Tvoje oblíbená barva je \'+barva+\'.\');}
// ->
</SCRIPT>

Na závěr snad jen to, že obsah Vašich stránek by měl být přístupný i prohlížečům bez javascriptu (nebo, pokud mají javascript vypnutý). První možností, jak toho docílit je používání javascriptu pouze na doplňkové efekty (jako například změna obrázku tlačítka po najetí myší atd.). Pokud chcete ale JavaScriptem vypisovat i informace, které se má návštěvník dozvědět, musíte udělat ještě "náhradní" text pro ty, kteří javascript nemají. Tento text pak vložíte kamkoli do těla dokumentu mezi tagy <noscript> a </noscript>. Existují i takoví rádoby webdesignéři, kteří mezi tyto tagy napíší text typu Pořiďte si lepší prohlížeč!. To je ale rozhodně neprofesionální. I trochu rozházený design totiž určitě působí lépe, než-li takovéto hlášky. Věřím, že javascript budete používat jen střízlivě a s rozvahou, v opačném případě to může silně zeštíhlit množství Vašich návštěvníků.

Fotografie autora
Marek Soldát, marek@soldat.cz
Autor je šéfredaktorem serveru Einstein.cz.
 
Komentáře
VěcAutorDatum a čas

K článku nejsou žádné komentáře.

Zobrazit Vše | Přidat nový