Co je je programovací jazyk, který se používá v internetových stránkách. Zapisuje se přímo do HTML kódu, což je velká výhoda, protože je to jednoduché. je klientský skript. To znamená, že se program odesílá se stránkou na klienta (do prohlížeče) a teprve tam je vykonáván. (Protikladem klientských skriptů jsou skripty serverové, které jsou vykonávány na serveru a na klienta jdou už jen výsledky.) Existují i jiné jazyky klientských skriptů, například VBScript. Jsou ale tak málo používané, že když se dnes mluví o "skriptech", myslí se tím y. není Java je často zaměňován s Javou. Java je samostatný programovací jazyk. Má s em pouze podobnou syntaxi. Čte se to různě Někdo čte javascript s j, někdo s dž na začátku. Oboje je používané. Já to čtu většinou [džavaskript], ale hodně to střídám a málokdy si všimnu, jak jsem to vlastně řekl. V angličtině se to vyslovuje [džev'skript]. Co je potřeba umět HTML, alespoň základy základy programování, alespoň trochu Charakteristiky jazyka je jazyk interpretovaný -- nemusí se kompilovat objektový -- využívá objektů prohlížeče a zabudovaných objektů závislý na prohlížeči -- funguje ale ve většině prohlížečů case sensitivní -- záleží na velikosti písem v zápisu syntaxí podobný jazykům C, Java a podobným Omezení jazyka funguje pouze v prohlížeči. - 1 -
Uživatel může zakázat Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám. Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům. Neumí žádná data uložit (kromě cookies). Začlenění skriptu do stránky Tři způsoby zápisu 1. Pomocí tagu <script> normálně do proudu dokumentu. 2. Tagem <script> s odkazem na externí soubor 3. In-line (řádkový) zápis jako atribut tagu bez použití tagu <script> Pro začátek nemusíte umět všechny způsoby, stačí ten první. Chcete-li se naučit skriptovat rychle, tuto stránku přeskočte a později se k ní vraťte. Normálně do HTML kódu Skript se vloží mezi značky <script> a </script>. Tento způsob je asi nejčastější a byl použit i na stránce prvních příkladů tohoto kurzu. Příklad normálního začlenění skriptu, který zobrazí povzbuzující okénko: <script> alert('hlavu vzhůru, bude hůř!'); </script> Skript se může objevit kdekoliv v HTML kódu -- jak v hlavičce, tak v těle dokumentu. Prohlížeč pak skript zpracovává okamžitě, jakmile na něj narazí. Externím souborem Program v u se dá uložit i do jiného souboru a potom ho do stránky načítat. Příklad: Do souboru externi_skript.js uložím toto: document.write("toto napsal externí Java Script"); Do stránky, do které pak chci skript vložit, vložím tento kus HTML kódu: <script src="externi_skript.js"></script> Stane se to samé, jako bych ten skript vypsal mezi tagy <script>. Zobrazte si příklad použití externího skriptu. Obliba skriptů v externích souborech je velmi široká. Nejčastěji se to používá k načítání stejného skriptu do různých stránek, což je netušená zbraň. In-line zápis In-line znamená "v řádku" a je to třetí způsob začlenění u do HTML stránek. Nevyužívá tag <script>, ale zapisuje se jako atribut jiného tagu. Většinou reaguje na nějakou uživatelovu událost. Raději ukážu příklad: <a href="http://www.meuslany.cz" onmouseover="alert('na úřadě je myš!!!')">městský úřad Slaný</a> - 2 -
Příklad ukazuje normální odkaz (tag <a>) s textem Městský úřad Slaný. Důležitý je tam ten atribut onmouseover, což znamená "při přejetí myší". No a při přejetí myší se spouští ten skript, co je zapsán jako hodnota atributu. Všimněte si, že v in-line zápisu je nutno používat apostrofy místo uvozovek (protože uvozovky by zakončily zápis skriptu). A takhle to vypadá, zkuste si přejet myší: Městský úřad Slaný Onmouseover je jednou z událostí, kterých existuje asi tucet. Bez existence událostí by in-line zápis skriptu nedával smysl. href="javascript:..." Jiný in-line způsob nepoužívá události, ale odkazů. Místo adresy cíle (URL) ale začíná textem "javascript: a následuje program". Např. <a href="javascript: alert('toto není odkaz')">skript</a> Namísto přechodu na jinou adresu se prostě provede skript. Ukázka: Skript Tento způsob začlenění scriptu se moc nedoporučuje. Kombinace způsobů Všechny způsoby začlenění skriptů do stránky jsou sice rovnocenné, ale v různých případech různě výhodné. V naprosté většině složitějších skriptů se tedy způsoby kombinují, protože je to efektivní. Sami jistě chápete, že například zapisovat příliš dlouhý in-line skript vede k chybám a zmatku, takže se in-line zapisuje většinou jenom volání funkcí, které jsou definované dříve. Nejčastější způsob kombinace: externím skriptem jsou definovány funkce normálním zápisem (pomocí <script> ) jsou inicializovány proměnné a startovní funkce in-line skripty volají funkce podle událostí v závislosti na reakcích uživatele Deklarace proměnných Příklad: <body> <script> var x = "Obsah proměnné"; document.write(x); </script> </body> Tento příklad s jednoduchou proměnnou si můžete zobrazit v prohlížeči. Výstup je jednoduchý: Obsah proměnné Vysvětlení skriptu Předpokládám, že každý už pozná, kde začíná a končí skript (tagy <script></script>). - 3 -
Názvem proměnné může být libovolné slovo (s výjimkou několika klíčových slov jazyka). Záleží na velikosti písmen. V u je dobré proměnné deklarovat. Na deklarování slouží klíčové slovo var následované výpisem použitých proměnných. Ale nemusí se to dělat. Proměnná použitá v příkladu má jméno x. Do proměnné x je načtena hodnota "Obsah proměnné", která je dalším příkazem document.write zapsána do proudu dokumentu. Všimněte si, že v příkazu document.write(x) už není to x obaleno uvozovkami, protože se jedná o proměnnou. Kdyby tam ty uvozovky byly, tak to vypíše x namísto Obsah proměnné. document.write(x); /* vypíše Obsah proměnné */ document.write("x"); /* vypíše x */ Počítání s proměnnou Proměnné se inicializují při prvním přiřazení hodnoty (což doporučuji udělat hned při deklaraci). Není třeba deklarovat typ proměnné (číslo, text apod.), určí typ proměnné automaticky podle obsahu (řetězec, číslo nebo logická hodnota). Je to velmi pohodlné. S proměnnými se dají dělat normální výpočty. Syntaxe je v jednoduchých případech zřejmá. Příklad: <script> var y, text; y = 13; y = y * 2 * 7 * 11; text = "Hezké číslo je " + y; document.write(text); </script> Příklad výpočtů s proměnnými si můžete zobrazit. Program by měl vypsat Hezké číslo je 2002. Používají se zde dvě proměnné y a text; y je proměnná číselná, text je proměnná textová. Je zde vidět i příklad automatické konverze -- k textovému řetězci se přičte číslo (v proměnné y), které se přitom automaticky převede na řetězec. Poznámka o velikosti písem je jazyk case-senzitivní, to znamená, že v něm všude záleží na velikosti písmen (na rozdíl od HTML). Je na to třeba dávat pozor zejména u jmen proměnných. Takže například proměnná x je různá od proměnné X. Pokud vám přijde, že to zdůrazňuji zbytečně často, při zoufalém ladění chyb poznáte, že to zdůrazňuji málo. :-) Textové proměnné Všechny proměnné typu text musejí mít hodnoty zadané v uvozovkách nebo v apostrofech. Apostrofy je nutno použít, pokud se celý skript nachází v uvozovkách (in-line zápis). Např.: <a onmouseover="myska='prejeta' ">... Jak dostat do proměnné dostat nějaký znak, který by Javascript pochopil jako součást programu? Například uvozovky? Znaku se předřadí zpětné lomítko. Např: - 4 -
promenna = "<a href=\"index.html\">obsah</a>"; document.write( promenna ); Tento prográmek by vypsal text, který by byl pochopen jako odkaz. To zajímavé je použití zpětných lomítek pro vypsání uvozovek. V tomto případě by se náhodou problém dal řešit také těmi apostrofy: promenna = "<a href='index.html'>obsah</a>"; document.write( promenna ); Logické proměnné Do proměnné se dá uložit pravda nebo nepravda. To je moc výhodné (zejména se to ocení při větvení programu, protože se zkrátí zápis). Pro logické hodnoty existují v u dvě klíčová slova true a false. Zapisují se bez uvozovek. Např. takmer = true; ozaj = false; Základy syntaxe u Příkazy se oddělují středníkem nebo koncem řádku jeden příkaz; další příkaz další příkaz který ale nemůže pokračovat na dalším řádku; V praxi se doporučuje středníky používat, protože přidávají přehlednost. Záleží na velikosti písmen Všude. V názvech proměnných, v názvech objektů. Proměnná je něco jiného než proměnná. Objekt window.location je špatně, protože tam má být window.location. Řetězce se uzavírají do uvozovek Přípustné jsou i apostrofy (na české klávesnici Alt + 39). Je to jedno, zda se použije apostrofy nebo uvozovky. Někdy jsou apostrofy nutné, zejména při in-line zápisu. <img onmouseover="alert('ahoj')"> Při přejetí obrázku se zobrazí hláška s textem AHOJ. Jindy je třeba využít escape sekvencí. Escape sekvence Pokud je nějaký speciální znak, který interpretuje, potřeba zapsat do stránky, musí se využít tzv. escape sekvence. Před ten znak se napíše zpětné lomítko. Nejčastěji se to používá u uvozovek. Předchozí příklad lze zapsat i takto: <img onmouseover="alert(\"ahoj\")"> Logické hodnoty zná speciální hodnotu pro pravdu: true a pro nepravdu: false. - 5 -
Další pravidla Objekty a jejich metody a vlastnosti se oddělují tečkami: objekt.podobjekt.vlastnost Programové sekvence se uzavírají do složených závorek {} (zejména při větvení a deklaraci funkcí). Operátory Operátory vycházejí z jazyka Java nebo C. Kromě níže uvedených existují ještě bitové operátory, které se ale skoro nepoužívají. Operátory přiřazení Slouží k nastavení hodnot proměnných. Normálně by stačilo jenom =, ale používají se i jiné operátory. = přiřazení += přičtení *=, -=, / přinásobení, odečtení, "přidělení" ++ přičtení 1 Například je to samé a += 4 a = a + 4 b ++ b = b + 1 Početní operátory + sčítání, spojování řetězců - odčítání, unární negace * násobení / dělení Logické operátory == rovnost (dvě rovnítka)!= nerovnost <,<=,>=,> &&, aritmetické srovnání (teď nevím, jestli tam je >= nebo =>) logické AND (a zároveň), logické OR (nebo)! logické NOT (negace)? : podmínkový výběr (ternální operátor), logické spojení (třeba v zápisu parametrů funkcí) - 6 -
Logické operátory se používají zejména při větvení programů na stanovení podmínek. Podmínky nabývají hodnot true (pravda) a false (nepravda). Zejména je třeba upozornit na dvě rovnítka (zjišťování rovnosti). Kdyby se použilo jenom jedno, tak by to znamenalo přiřazení. Jedná se o nejčastější a nejhůře odhalitelnou chybu. Větvení Základní způsoby větvení a cyklů v u jsou příkazy if, while a for. if(podmínka) {program} while(podmínka) {program} for(iniciace; podmínka; navýšení){program} jestliže je splněna podmínka, vykonává se program program se opakuje, dokud trvá podmínka cyklus (vykonávaný většinou přesně několikrát) if if(podmínka) { příkazy prováděné při splnění podmínky; } else { příkazy prováděné při nesplnění podmínky; } Jako podmínka se musí uvést výraz, jehož logická hodnota je true nebo false (pravda nebo nepravda). Např.: if (volby == "svobodne"){ document.write("možná máme demokracii"); pokracovat = true;} else { document.write("máme diktaturu"); pokracovat = false;} Zápis je ve většině případů jednodušší. Např.: if (puntiku!= 12) document.write("nemáme celý ciferník!"); Jak je vidět, pokud je příkaz jenom jeden, nemusí se uzavírat do složených závorek. Také lze vynechat else, není-li potřeba. Časté chyby u if: špatný zápis podmínky (pro rovnost se musejí používat dvě rovnítka) chybějící středníky nebo složené závorky nadbytečné středníky mezery většinou nehrají v zápisu roli rozhodovací operátor? : Ternální operátor umožňuje rychlejší zápis rozhodování, pokud chci pouze přiřadit hodnotu proměnné. Syntaxe: - 7 -
proměnná = podmínka? hodnota1 : hodnota2; Pokud je podmínka pravdivá, má proměnná hodnotu hodnota1, pokud je podmínka nepravdivá, má proměnná hodnotu hodnota2. switch case Pro větvení do více alternativ existuje příkaz switch, který ale nefunguje v trojkových verzích prohlížečů, proto je lepší jej nepoužívat. Sytaxe je: switch(proměnná) { case hodnota : příkaz; case hodnota2 : příkaz2;... default : příkazx} while Cyklus s podmínkou na začátku. Sekvence vnitřních příkazů se provádí dokola, dokud platí podmínka. Jakmile podmínka neplatí, pokračuje program dál. while (podmínka) { sekvence příkazů } Následující příklad zvyšuje proměnnou o pět jednotek, dokud nebude větší nebo rovna třiceti: while(promenna < 30) { promenna += 5; } Časté chyby u while: zápis podmínky musí být logická hodnota (pozor na dvě rovnítka) uvědomte si, zda podmínka má nebo naopak nesmí platit pokud podmínka nezávisí na měněných proměnných, můžete dostat nekonečný cyklus. do while Cyklus s podmínkou na konci nefunguje v trojkových verzích prohlížečů. Syntaxe: do {sekvence příkazů} while (podmínka) Je-li podmínka pravdivá, cyklus se ukončí a program jde dál. for Cyklus obvykle určený pro daný počet opakování (třebaže to může být jinak). Syntaxe: for (počáteční hodnota; podmínka; navýšení) { příkazy; } Např. tento program vypíše všechny HTML velikosti písma: for (i=1; i <= 7; i++) { document.write("<font size=\"" + i + "\">Vzorek písma</font>"); document.write("<br>"); } Zobrazte si příklad. Drobný komentář: používám proměnnou i, která má na počátku hodnotu 1. Navýšení i++ znamená, že při každém dalším průchodu cyklem se i zvýší o 1 (++ je navýšení o - 8 -
jedna). Trochu komplikovanější věcí je použití sekvence \", což je způsob, jak do výstupu vložit uvozovky. for in Cyklus přiřazuje proměnné postupně všechny vlastnosti objektu. Nefunguje v IE 3. Syntaxe: for (proměnná in objekt) {příkazy} break Příkaz break předčasně ukončí cyklus while nebo for. continue Příkaz continue skočí na začátek cyklu. - 9 -
Funkce Syntaxe deklarace funkce v u: function jmenofunkce(parametry) {tělo funkce}; nebo podrobněji zapsáno: function jmenofunkce(parametr, parametr) { příkaz; příkaz; return hodnota }; Například: function upozorneni(stranka) { alert("tímto se dostanete na stránku s názvem " + stranka) }; Volání funkce: jmenofunkce(hodnota, hodnota); Velmi často se funkce volají na základě událostí dokumentu přímo z HTML kódu, například: <a href="index.htm" onclick="upozorneni('hlavní stránka');">obsah</a> Při kliknutí na slovo "Obsah" se vyvolá funkce upozorneni() s hodnotou parametru "hlavní stránka". Předtím samozřejmě musí být funkce inicializovaná (v předchozím příkladu). Pokud funkce vrací hodnotu (deklarace obsahuje return hodnota), dá se funkce volat zápisem proměnná = jmenofunkce(parametry); Proměnné ve funkci Proměnná deklarovaná ve funkci klíčovým slovem var je lokální. Lokální proměnné jsou i parametry funkce (to, co je v závorce za jménem funkce). Pokud se ve funkci použije jméno jiné nedeklarované proměnné, jde o proměnnou globální. Zabudované funkce u eval Eval je od slova vyhodnotit (evaluate). Funkce vezme svoje argumenty a vyhodnotí je jako by to byl kus programu. Používá se zejména pro dynamickou změnu kódu. Tuto funkci mají v oblibě všichni programátoři u, protože umožňuje zápis konstrukcí běžných z vyšších jazyků, které by jinak nevzal. Příklad: promenna="document.write"; promenna2="(1 + 1)"; eval(promenna + promenna2) Funkce eval() vezme argument promenna + promenna2 a vyhodnotí ho. Dostane řetězec document.write(1 + 1) a rovnou to provede. Takže se vypíše dvojka. Můžete se přesvědčit. - 10 -
parsefloat a parseint Převodní a zaokrouhlovací funkce. Argumentem je řetězec, který je převeden na číslo. parseint z něj vrátí jenom celou část, parsefloat i s desetinou částí. Události u Přehled uživatelských událostí Události okna a dokumentu: Událost Popis Lze použít na Nefunguje v onload při úplném načtení stránky body, img onunloa d při opouštění stránky body onresize při změně velikosti okna body onscroll při skrolování, posouvání obsahu body, textarea, cokoli s overflow Události myši Událost Popis Lze použít na Nefunguje v onclick při kliknutí na prvek nebo při přednastavené akci ondblclick při dvojkliku na prvku onmouseover při najetí myší na prvek všechny elementy, onmouseout onmousemove při odjetí z prvku při pohybu myši nad prvkem v 4. verzích prohlížečů ale jenom některé onmousedow n při stisknutí tlačítka nad prvkem onmouseup při uvolnění tlačítka nad prvkem - 11 -
Události klávesnice Událost Popis Lze použít na Nefunguje v onkeypress při stisknutí klapky ve chvíli, kdy je element aktivní onkeydow n onkeyup při stlačení klapky ve chvíli, kdy je element aktivní při uvolnění klapky ve chvíli, kdy je element aktivní asi cokoliv Test onkeypress Události formuláře a formulářových polí Událost Popis Lze použít na Nefunguje v onsubmit těsně před odesláním formuláře, příklad form onreset při vynulování formuláře tlačítkem reset form onfocus při aktivaci políčka (okna) input, select, textarea, window onblur při deaktivaci políčka (okna) input, select, textarea, (window nepotvrzeno) onchang e při změně hodnoty políčka input, select, textarea při výběru jiné hodnoty v onselect selectu nebo při vybrání textu select, body (výběr textu) výběr textu nefunguje v a NN* myší - 12 -
Další události Událos t Popis Lze použít na Popor a onabor t při přerušení načítání img, body Události okna a dokumentu Událost Popis Lze použít na Nefunguje v onload při úplném načtení stránky se všemi objekty body, img onunloa d při opouštění stránky body onresize při změně velikosti okna body onscroll při skrolování, posouvání obsahu body, textarea, cokoli s overflow OnLoad Událost onload nastává ve chvíli, kdy je objekt načten. Praktický význam má pro dokument (tag <body>) nebo pro obrázek (<img>). Podle mých zkušeností nelze vázat na jiné tagy (možná ještě <object>, nevím). Příklad vyhození hlášky ve chvíli načtení dokumentu: <body onload="alert('dokument je načten')> Událost onload se spouští až po té, co jsou načteny i všechny vložené objekty, např. obrázky. (Nevím, jestli událost čeká i na načtení obsahů do <iframe>, ale asi ano.) V některých návodech se uvádí, že se onload spouští ve chvíli, kdy se načte poslední znak zdroje. Není to tak, čeká se i na obrázky. Velmi praktické je použít událost onload také na obrázek. Dejme tomu, že chci nějakou akci spustit až ve chvíli, kdy je obrázek načten. To se hodí, pokud ta akce pracuje s tím obrázkem. Kdyby byla totiž funkce volána jinak, mohla by se spustit ve chvíli, kdy obrázek ještě není ze serveru načtený. Příklad: <img src="obrazek.gif" onload="animuj(this)"> Příklad předpokládá dřívější deklaraci té funkce animuj(), ale o to v tuto chvíli nejde. Jde o to, že se pracuje s už načteným obrázkem. Animované gify spouštětjí onload chybně při každém zobrazování prvního snímku. - 13 -
Jako synonymum k události onload umí Internet Explorer od 4. verze použít také onreadystatechange. Praktický rozdíl v tom není, snad jen že onload je událostí okna, kdežto onreadystatechange je událostí dokumentu. OnUnload Událost se spouští těsně před opuštěním dokumentu. To může být přechod na jinou stránku nebo zavření okna prohlížeče. Událost se váže na objekt window a zapisuje se do tagu body: <body onunload="window.alert('nashledanou!')"> V tomto příkladu stránka před zavřením vyhodí hlášku s textem Nashledanou!. Daly by se dělat i jiné kousky, například se leckde vidí hláška "Opravdu chcete odejít z této super stránky?" Na základě odpovědi se dá i zavírání skriptem zrušit. Vlastnosti onunload na vyhazování hlášek nebo jiných záludností doporučuji nepoužívat. Je to jako takový křik malého fracka "mamí nesmíš jít pryč!", prostě to považuji za nedůstojné. Je ale dobré vědět, že vlastnost onunload existuje a v případě potřeby na ní navěsit skript, který nebude uživatele obtěžovat. OnResize Událost onresize nastane vždy, když se změní velikost okna prohlížeče. Využívá se zejména na stránkách s dynamickým obsahem, které mají elementy vkládány stylem na přesnou pozici. Když se změní velikost okna, je potřeba pozice přepočítat. Onresize se dá navázat i na jiné objekty v dokumentu, které mají definovanou šířku. (Pouze v Intenret Exploreru, v Mozille mi to nefunguje.) Např. <div onclick="this.style.width = '50px'" onresize="alert('měním velikost')">klikni si!</div> Klikni si! Jiný příklad. V některých případech změny velikosti okna se ze záhadných důvodů spouští událost onresize několikrát po sobě. Také se spouští ve chvíli, kdy se nějakým skriptem změní šířka dokumentu. Na to je třeba myslet a nevázat na onresize akce, které mění velikost dokumentu, protože by mohlo dojít k zacyklení. OnScroll Událost onscroll nastává obecně při rolování. Dá se použít u všeho, co má rolovací lišty. Nejčastěji se váže na tag <body>, protože to je z hlediska skriptování nejpoužitelnější. Pak se dá například přepočítávat pozice elementů, které mají být viditelné, i když se se stránkou posouvá. Příklad objektu zafixovaného na stránce. Test události onscroll. Událost onscroll neprobublává. - 14 -
Události myši Událost Popis Lze použít na Nefunguje v onclick při kliknutí na prvek nebo při přednastavené akci ondblclick při dvojkliku na prvku onmouseover při najetí myší na prvek všechny elementy, onmouseout onmousemove při odjetí z prvku při pohybu myši nad prvkem v 4. verzích prohlížečů ale jenom některé onmousedow n při stisknutí tlačítka nad prvkem onmouseup při uvolnění tlačítka nad prvkem OnClick Onclick se spouští ve dvou případech: 1. jestliže se na element kliklo myší 2. nebo pokud dojde k předdefinované akci elementu. Předdefinovaná akce elementu nastává zejména při práci s tabulátorem a Entrem -- ťukáním tabulátoru se aktivují odkazy a formulářová políčka. Když se pak dá Enter, odkaz proklikne i bez myši. I v tom případě je ale volána událost onclick. OnClick se na stránkách bohatě používá. Při kliknutí pravým nebo prostředním tlačítkem se událost onclick nevyvolá. Tam je potřeba využít události onmousedown nebo onmouseup. Samotné události paknejsou schopné rozlišit, zda se kliklo levým nebo pravým tlačítkem. Události pravého tlačítka se musejí odchytávat z události onmousedown a následnou podmínkou. Informace o tom, které tlačítko bylo stisknuto, se uložena ve vlastnosti event.button. Hodnoty event.button jsou 1 pro levé tlačítko, 2 pro pravé, 4 pro prostřední a případně se to sčítá. Hodnota 3 tedy odpovídá stisknutí pravého a levého tlačítka najednou, nulová hodnota event.button znamená, že myš nikdo neutiskuje. Příklad: <img onmousedown="if(event.button == 2) alert('bylo stisknuto pravé myšítko')"> Po kliknutí na obrázek (<img>) pravým tlačítkem se objeví hláška. Při kliknutí levým se nic dít nebude, ačkoli proběhla událost onmousedown i onclick. Zrušení kliknutí Dost častý problém u odkazů je ten, že chci, aby po kliknutí spouštěly nějaký skript a aby nenutily prohlížeč přejít na jinou stránku. Kdyby totiž prohlížeč přešel na jinou stránku, tak je ten provedený - 15 -
skript většinou na nic. Zrušení navigace se provede pomocí klauzule return false, čímž jakoby odkazu řeknu, že nebyl prokliknut: <a href="někam_úplně_jinam" onclick="něcoudělej(); return false">odkaz</a> OnDblClick Dvojklik nastává, pokud se na elementu klikne dvakrát rychle za sebou. Není to moc použitelná věc, protože lidé nejsou na internetu zvyklí klikat dvakrát. Rychlost dvojkliku záleží na nastavení systému. OnMouseOver, onmouseout, onmousemove Tyto tři vlastnosti jsou taková trojčata. Událost onmouseover se spouští ve chvíli, kdy myš najede na element. OnMouseOut se spouští, když myš element opustí. Mezitím probíhá události onmousemove s výjimkou situace, kdy se myš úplně zastaví. Onmouseover a onmouseout se většinou používají ve dvojkombinaci. Něco se stane, když myš na prvek najede, jiná akce (zpravidla inverzní) se děje, když myš prvek opustí. Klasickým příkladem je záměna obrázků po najetí myší: <img src="privni.gif" onmouseover="this.src = 'druhy.gif'" onmouseout="this.src = 'prvni.gif'"> (Nyní pomíjím, že by příklad nefungoval ve starších prohlížečích, to ale není způsobeno událostmi, leč použitím objektu this.) Událost onmousemove se používá dost zřídka. Není totiž moc šikovná a při uměleckém zápisu dokáže navíc pěkně zavařit procesor (např. SMS brána Oskara v roce 2002), protože se spouští opakovaně ve velmi krátkých intervalech. OnMouseDown, onmouseup Zřídka používané události zachycují stisknutí a uvolnění tlačítka myši, nikoliv samotný klik. Ke kliknutí (onclick) dojde jen v tom případě, že na jednom elementu nastane po sobě onmousedown a onmouseup. Pokud tedy někde myšítko stisknu, odjedu na jiný element a tam myš pustím, k události onclick na elementech nedojde. (Onclick ale zachytí pravděpodobně pouze objekt document, protože myš se stiskla i uvolnila na něm.) Podstatná výhoda těchto dvou událostí je v přesném načasování skriptu a také v tom, že narozdíl od onclick reagují i na stisknutí pravého nebo prostředního tlačítka. Příklady: Identifikace pravého tlačítka, Pofidérní zakázání pravého tlačítka OnContextMenu Událost se volá při vyvolání kontextové nabídky, nejčastěji kliknutím pravého tlačítka. Nefunguje v Opeře. Nejjednodušší zakázání pravého tlačítka myši: <body oncontextmenu="return false"> A zcela mimochodem: nezakazujte pravé tlačítko, je to prasárna. - 16 -
Události klávesnice Událost Popis Lze použít na Nefunguje v onkeypress při stisknutí klapky ve chvíli, kdy je element aktivní onkeydow n onkeyup při stlačení klapky ve chvíli, kdy je element aktivní při uvolnění klapky ve chvíli, kdy je element aktivní asi cokoliv Události klávesnice se dají použít ve chvíli, kdy je aktivní nějaký element, který by měl na stisk kláves reagovat. Naprosto nejčastěji jsou to formulářové prvky (ale teoreticky i odkazy, ty si všímají Entru). Test onkeypress OnKeyDown reaguje na stlačení, onkeyup na uvolnění klávesy. Dohromady to dává událost onkeypress, která se také pro klávesové události používá v naprosté většině. Podrobnější informace Jan Ševčík mi poslal velmi zajímavé odkazy o událostech v javascriptu: http://www.interval.cz/clanek.asp?id=1666 http://www.interval.cz/clanek.asp?id=1933 http://www.webtip.cz/art/wt_tech_dhtml/dhtml_006.html - 17 -