Javascript tahák - neukončeno

12. června 2009 v 16:55 | Paželv
Stručný přehled nejzákladnějších funkcí a syntaxe Javascriptu.



TAHÁK NENÍ DOKONČEN, NA ZVLÁŠTNÍ ŽÁDOST JE ALE PUBLIKOVÁN V PŘEDČASNÉ VERZI.

Jsem krátký (byl bych ještě kratší, kdybych neměl tak ukecaného autora) text, uvádějící se stručným (...no...) komentářem nejběžnější javascriptové příkazy, aby z nich bylo lze sestavit jednoduchý skript (skript - takový mikroprogram, kterým lze webovou stránku učinit interaktivní) nebo z něj kopírovat kousky kódu, pokud se vám je nechce psát.
Pro své uživatele předpokládám základní znalost Javascriptové syntaxe (lze nabýt ve vynikajícím tutoriálu na www.jakpsatweb.cz, z něhož z velké části čerpám) a průměrnou znalost HTML (lze nabýt tamtéž), jehož je Javascript rozšířením. Jinak jsem ale napsán s ohledem na naprosté lamy, takže některá řešení jsou mírně neprofesionální. Přesto by všechna řešení měla fungovat.
Jsem zpracován podle výkladu na Jakpsatweb.cz, JavaScript: The Definitive Guide od Davida Flanagana a osobních zkušeností mého autora, kterým je Paželv.
Na úvod bych chtěl říct jen tolik: dávejte pozor na velikost písmen a správný zápis mezer, Javascript je na to na rozdíl od některých jiných jazyků citlivý.

PSANÍ SKRIPTU, PSANÍ TEXTU, VYSKAKOVACÍ OKNA

<script>

Takto se značí začátek javascriptového scriptu. Cokoliv, to je před tímto tagem, je normální html, cokoliv po něm je už Javascript, dokud to neuzavřete z druhé strany. Jo, píše se samozřejmě do HTML souboru na místo, kde chcete mít script, kdyby to někoho nenapadlo ;)

document.write('text');

Tento příkaz vypíše text, který do něj napíšete. Javascript chápe jako text (datový typ string, ale na tom teď nezáleží) cokoliv, co obalíte anglickými uvozovkami ("něco") nebo apostrofy ('něco'), ale apostrofy jsou lepší, protože uvozovky se používají i na jiné věci a třeba při událostech to dělá bordel. Jo, a nezalamujte řádky Enterem, JVS by to pochopil jako konec příkazu. Zato můžete uvnitř uvozovek používat HTML tagy. Zalomit řádek se dá ještě jedním způsobem, než pomocí htmlovského </br>. Je to asi takhle:

document.write("Jsem řádek, však nejsem sám, \n druhý řádek taky mám.");

Dost o tom, teď si povíme pohádku o hláškách. Hláška znamená vyskakovací okno, které všichni uživatelé Windowsů znají až příliš dobře. Existuje jich několik druhů, nejveselejší je alert (používá se ke sdělení uživateli, který má jen jednu možnost odpovědi, totiž "OK"), nejužitečnější prompt (uživatel v něm uloží proměnnou, kterou pak vy můžete dále používat) a confirm (uživatel má na výběr ano / ne).

alert('Jsi looser a musíš s tím souhlasit.');

Tento příkaz vyhodí takové to chybové hlášení s textem nebo proměnnou, která je uvedena v závorce. Je jediná možnost odpovědi, tlačítko OK. Dá se to použít i v praxi, ale především (zvlášť pokud jich nakupíte několik set za sebou) tím můžete škodolibě způsobit uživateli chvilku horečného klikání, po níž vás nebude mít moc rád.


PROMĚNNÉ A OPERÁTORY


var ZivotVesmirAVubec = 42;

Vytvoří se proměnná s názvem ZivotVesmirAVubec. Proměnné se také přiřadí hodnota 42. Od této chvíle můžete tu proměnnou libovolně používat, třeba takhle:

document.write(ZivotVesmirAVubec);

Vypíše vám to hodnotu proměnné - zde 42. Javascript taky umí používat operátory. To znamená tohle:

var ZivotVesmirAVubec = 6 * 7;

Do proměnné se uloží hodnota 42. Dají se použít i jiné operátory (slovo operátor si můžete přeložit jako matematické znaménko): +, -, *, /, v praxi se hodí i ++ (totéž co + 1) a -- . Pozor na jeden detail - jedno rovnítko (=) znamená přiřazení, pokud chcete vyjádřit rovnost (hlavně při větvení v podmínkách), napište rovnítka dvě: ==. Při větvení se hodí i nerovnost (!=), značky z nerovnic (<,<=,>=,> ) a také některé značky z výrokové logiky - && ("a zároveň", totéž co AND) a || (OR, "nebo").

Operátory fungují, jen pokud máte v proměnné uloženo číslo. Pokud to je cokoliv jiného (text, booleyovská hodnota), hodí vám to error. Smutné, ale pravdivé.

FUNKCE PROMPT - VKLÁDÁNÍ INFORMACE UŽIVATELEM

jmenopromenne = prompt("Text nad textovým polem", "");

Prompt je sice hláška, ale uvádím ji až tady. Co to znamená: vyskočí okno s nějakým textem, který stanovíte vy a textovým polem, do kterého může uživatel zadat, co se mu zlíbí. To, co zadá uživatel, se pak uloží jako proměnná s názvem jmenopromenne (samozřejmě můžete zadat název, jaký chcete).

BOOLEYOVSKÁ HODNOTA A FUNKCE CONFIRM

var pravda = true;
var lez = false;

Do proměnné můžete uložit kromě textu a čísla i tzv. booleyovskou hodnotu - jsou dvě: pravda a nepravda, anglicky true a false, více na Wikipedii. Píše se bez uvozovek a hodí se při větvení a při hlášce confirm. Příklad použití najdete u cyklu IF.

svobodnytibet = confirm("jste pro svobodný Tibet?");

Confirm je dialog (=vyskakovací okno, u kterého máte dvě možnosti odpovědi, většinou OK a Storno, typický příklad - disclaimer u pornostránek). Pro vás znamená to, že se do proměnné s názvem svobodnytibet uloží hodnota true nebo false a vy ji pak můžete dál používat.



Větvení

cyklus IF

Nejběžnější formou větvení cyklus IF. Pokud platí tvrzení, obsažené v první závorce, splň příkaz v druhé závorce, pokud neplatí, splň příkaz ve druhé závorce. Programátorsky blbuvzdorné, ale nedá se použít vždy.

obecně

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;}

příklad (zároveň je to příklad k využití booleyovské hodnoty)

if(svobodnytibet = true) {document.write('Patrně soucítíte s trpícím Tibetem.');} else {document.write('Patrně jste pročínský komouš.');}

cyklus SWITCH

switch(proměnná) {
case hodnota : příkaz;
case jinahodnota : druhyprikaz;
default : tretiprikaz}

Užitečný příkaz, v podstatě IF, pokud potřebujete více variant. V první závorce stanovíte proměnnou, slova "hodnota" a "jinahodnota" nahraďte za hodnoty. Pokud proměnná z první závorky nabyde těchto hodnot, vykonají se určité příkazy, pokud ne, pak se vykoná příkaz pod defaultem. Casů může být, kolik chcete.

cyklus WHILE

while(podmínka) {příkaz;}

Dokud platí podmínka, vykonávej příkaz. Logicky příkaz většinou zahrnuje změnu podmínky. Trochu podobný je cyklus FOR ("opakuj přesně tolikrát), ale je celkem zbytečný, jen ušetří pár znaků, a cyklus WHILE na rozdíl od FOR funguje na všech prohlížečích.

UDÁLOSTI

Události se vkládají do objektů ve stránce (objekt je třeba obrázek, odstavec textu nebo samotná stránka, pokud ji vložíte do objektu body). Jde o zadání typu: pokud přejedete myší přes obrázek, ten zmodrá. Je to jedna z nejchytřejších funkcí Javascriptu. Zároveň ale jsou asi nejvíc závislé na prohlížeči, velké problémy dělá třeba Opera a některé muzeální verze IE, ale i některé verze Netscape.

Vkládají se mezi parametry příslušného objektu HTML (tj. ne mezi tagy <script>), třeba takhle:

<img (ostatní parametry) onclick="alert('Neklikej na mne, nemám to rád!')">

Překlad: na kliknutí (onclick) se splní příkaz, napsaný v uvozovkách (v tomto případě alert). Pochopitelně můžete použít jiný příkaz (pokud je mi známo, jen jeden) a jinou událost (ale ne všechny lze použít na všechny typy objektů). K jednomu objektu lze přiřadit libovolné množství událostí.

Přehled nejpoužívanějších událostí :
onLoad (při načtení stránky),
onUnload (při opuštění stránkyú,
onResize (při změně velikosti okna),
onScroll (při pohybu kolečkem myši),
onClick (při kliknutí),
onDblClick (na dvojklik),
onMouseover (při přejetí myší),
onKeyPress (při stisknutí klávesy),
onSubmit (při odesílání formuláře, spustí příkaz těsně předtím - hodí se na potvrzování),
onReset (při vynulování formuláře - opět spustí příkaz ještě předtím),
onFocus (při aktivaci objektu).
 

Buď první, kdo ohodnotí tento článek.

Komentáře

1 Sluníčko | E-mail | Web | 6. března 2012 v 2:12 | Reagovat

Moc pěkný blogík. Ještě juknu

Nový komentář

Přihlásit se
  Ještě nemáte vlastní web? Můžete si jej zdarma založit na Blog.cz.
 

Aktuální články

Reklama