Výuka skriptovacího jazyka JavaScript
Co potřebuje ke tvorbě JS
První skript
Problém-uvozovky
Proměnné
Alert
Prompt
Operátory
Podmíněné příkazy
Switch
Cykly
While a do while
Continue a break
Jeden skript na více stránkách
Objekty v JavaScriptu
Hierarchie objektů
Využívání objektů
Hrátky s datumem
Počeštění datumu
Události v JS
Událost onMouseOver
Událost onMouseOut
Událost onClick
Událost onFocus
Událost onBlur
Událost onChange
Událost onSelect
Událost onLoad
Událost onUnLoad
Událost onError
Událost onAbort
Událost onReset
Událost onSubmit
Událost onKeyPress
Událost onDblClick
Nenápadný odkaz
Vpřed a Zpět
Co jsou to pole
Zjištění a změna velikosti pole
Jednoduchý kalendář a zabezpečení
Funkce
Funkce s parametrem
Grafika v JavaScriptu
Okna v Javascriptu
Přehled vlastností objektu window
Formuláře v JavaScriptu
Kniha hostů v JavaScriptu
Matematika v JavaScriptu
Co je to JavaScript?
JavaScript, většinou se používá zkratka JS je krátký prográmek doplňující vlastnosti HTML.
Pro neznalce HTML je soubor značek na nichž je postavena většina internetových stránek.
JS je postaven na jazyce Java, ale narozdíl od něj je méně komplexní a je určen výhradně pro
tvorbu internetových stránek.
Co potřebujete ke tvorbě JS?
Ke tvorbě JS nepotřebujete nic víc, než obyčejný Poznámkový blok
nebo jiný textový editor, doporučoval bych například CuteHtml. Proč je lepší specializovaný editor, například
protože umí doplňovat slova, u kterých si nejste jistí se syntaxí nebo umí barevně odlišovat druhy textu.
Ještě zbývá doplnit, že JS je jazyk "Case Sensitive" to znamená, že rozlišuje malá a velká písmena.
Tak mi to už konečně ukaž v praxi!
Jistě jste už netrpělivý a očekáváte až si napíšete svůj první skript. Ještě chvilku počkejte.
Nejprve kam do HTML se skripty píší.
<html>
<head>
<title>Kam se píší skripty</title>
<body>
<script language="JavaScript">
...
tělo skriptu
...
</script>
</body>
</html>
Důležité je, že skripty se píší mezi tagy <script> a </script>.
Tak budeto už, já chci psát skripty!
Tak si konečně napíšete váš první skript, bude to výpis textu na obrazovku a bude vypadat následovně:
<html>
<head>
<title>Můj první skript</title>
<body>
<script language="JavaScript">
document.write("Ahoj všichni programátoři v JavaScriptu")
</script>
</body>
</html>
Důležité je také, že !nesmíte zalomit řádek tam kde zalomen být nemá! domluvíme se, že když se mi to sem nevejde udělám značku § a to znamená, abyste psali dál do jednoho řádku. K problému s
uvozovkami se dostanu později. Důležité je také to ,že na konci každého řádku by měl být středník, já
ho tam u těchto jednoduchých úloh nepíši(na to jsem moc líný), ale radši ho tam pište ať si zvyknete.
Pokud vám skript ze záhadných příčin nefunguje, stáhněte si ho zde.
Co to povídal o těch uvozovkách?
Jde o to, že když si náš skript vyzdobíme pomocí HTML značek do této podoby:
...
document.write("<font color='blue'><h1>Ahoj všichni programátoři v JavaScriptu</h1> </font>")
...
Vzniknou nám tam dvoje uvozovky, jedny pro document.write("") a druhé pro font color="blue", proto
ty které jsou v hlavních píšeme jako apostrovy. Nyní se koukněte na svoje dílo, mělo by se vám vypsat modře.
Z předchozího případu vás asi napadlo lze-li do textu přidávat i jiné HTML značky než font color ano, lze
do textu můžete přidávat veškeré HTML tagy ovlivňující text.Ještě jedna zajímavá věc:
...
document.write("Toto je první řádka.")
document.write("Toto je řádka druhá.")
...
Co myslíte, že to asi udělá. Vyzkoušejte nebo si skript stáhněte zde.
Oproti předpokladům a textu to nebylo na dvě řádky, ale pouze jednu. Proto když budete chtít další řádek použijte tag <br>.
Všechny, kteří si nejsou jistí svým uměním v jazyce HTML můžu odkázat na výuku HTML.
Pokud si chcete v JS udělat komentář použijte buď //text komentáře pokud bude pouze na jednu řádku, jinak použijte /*text*/.
To je sice pěkné, že umím vypsat text na obrazovku, ale to stačit nebude.
No to tedy nebude. Teď se naučíme vytvářet a pracovat s proměnnými.Proměnná je vlastně název místa v paměti, kde jsou uloženy údaje.
Proměnnou musíme nejprve vytvořit příkazem var poté musí následovat název proměnné, který by se měl vztahovat k její funkci.
Nyní si vytvoříme proměnnou jmeno a uložíme do ní svoje jméno.
...
var jmeno="Jakub Halva"
...
Vidíte, jak je to jednoduché.
A lze do proměnných ukládat i čísla?
Ano beze všeho viz příklad:
...
var x=5
var z=5*6
document.write(""+x*z)
...
Vidíte, že proměnné lze i násobit atd. Tento příklad nejprve vytoří proměnnou x s hodnotou 5, poté proměnnou z s hodnotou 5*6
a poté na obrazovku vypíše jejich součin. Opět si skript stáhněte zde. Ovšem, kdybyste se pokoušeli proměnné sečíst a x=5 z=6 vypíše se vám ne 11, ale 56 k tomu se vrátíme později.
A můžu proměnnou vypsat i nějak jinak?
Jistě a to pomocí nového příkazu alert. Po použití tohoto příkazu se vám objeví chybové okno Windows. Ostatně zanechme teorie a ukažme si praktický příkaz:
...
var jmeno="Jakub"
alert("Vaše jméno je: "+jmeno")
...
Vyzkoušejte a uvidíte. Komu program ustavičně hlásí chybu ať si zkontroluje uvozovky a stáhne si odtud hotový skript.
Nešlo by se uživatele na jeho jméno zeptat?
Ale šlo a to pomocí příkazu prompt. Při použití příkazu prompt se zobrazí okno se zadanou otázkou a textové pole do něhož může uživatel zadat údaj.
...
var jmeno=prompt("Jaké je vaše jméno?","Jakub")
alert("Vaše jméno je: "+jmeno)
...
Opět je tu skript ke stáhnutí. Všimněte si druhých uvozovek do nich se píše co se má zobrazit přednastaveně a od prvních se oddělují čárkou.
A co tu máme dál?
Další nařadě jsou operátory. Operátor je symbol, který jasně určuje jaká operace z nabízených se provede. Známe mnoho typů operátorů:
tyto řádky jsou odkazy, i když na to nevypadají, jak na to se dozvíte dáleOperátory přiřazení
Aritmetické operátory
Logické operátory
Relační operátory
Řetězcové operátory
Podmínkové operátory
Ostatní operátory
Operátory přiřazení
Tyto operátory slouží k uložení dat do proměnné. Leží vždy mezi dvěma operandy(daty s kterými program manipuluje). Základní tvar operátoru je =, s nímž jste se setkali již dříve. Na jeho levé
straně musí být vždy proměnná, vpravo může být buď proměnná nebo hodnota v uvozovkách.
Př.:
jedna=dva do proměnné jedna se uloží obsah proměnné dva
jedna="dva" do proměnné jedna uloží text dva
Tabulka operátorů přiřazení
| Operátor |
Příklad použití |
Význam |
| = |
x=y |
x je rovno y |
| += |
x+=y |
x=x+y |
| -= |
x-=y |
x=x-y |
| *= |
x*=y |
x=x*y |
| /= |
x/=y |
x=x/y |
| %= |
x%=y |
x=x%y |
| &= |
x&=y |
x=x&y |
| ^= |
x^=y |
x=x^y |
| = |
x-=y |
x=x-y |
Aritmetické operátory
Aritmetické operátory se používají k základním matematickým operacím a zná je asi každý v JS jsou i některé zvláštní jejichž vysvětlení je hned za tabulkou.
Tabulka aritmetických operátorů
| Operátor |
Příklad použití |
Význam |
| + |
x+y |
součet |
| - |
x-y |
rozdíl |
| * |
x*y |
součin |
| / |
x/y |
podíl |
| % |
x%y |
modulo dělení |
| ++ |
x++ |
x=x+1 |
| -- |
x-- |
x=x-1 |
Co je to modulo dělení?
Modulo dělení je zbytek při dělení, viz příklad:
var x=10
var y=3
document.write(x%y)
Vyzkoušejte a uvidíte. Pro lenivce program vypíše číslo 1.
Logické operátory
Logické operátory slouží k porovnávání logických hodnot. Logické operátory jsou proměnné, které nabývají pouze dvou hodnot: 1 a 0 neboli yes a no neboli true a false. Hodnotu true má například 1>0 a hodnotu false 0>1, protože to není pravda.
Tabulka logických operátorů
| Operátor |
Příklad použití |
Význam |
| && |
(x>1)&&(y=5) |
Výraz bude mít hodnotu true pokud bude platit, že x je větší než 1 a zároveň y je rovno 5. |
| || |
(x>1)||(y=5) |
Výraz bude mít honotu true, pokud alespoň jedna z hodnot bude pravdivá. |
| ! |
!x>/b> |
Operátor NOT mění hodnotu výrazu na opačnou, tj. hodnota výrazu je true tehdy, když x má hodotu false a naopak. |
Relační operátory
Relační operátory umožňují porovnávání hodnot.
Tabulka relačních operátorů
| Operátor |
Příklad použití |
Význam |
| == |
x==y |
je rovno |
| != |
x!=y |
není rovno |
| > |
x> |
je větší než |
| < |
x< |
je menší než |
| >= |
x>=y |
je větší nebo rovná se |
Řetězcové operátory
Řetězcové operátory slouží k propojení dvou řetězců (řetězec je například text v uvozovkách). Jako řetězcové operátory lze použít všechny relační plus znaménko +.
Podmínkové operátory
V jazyce JS jsou dva podmínkové operátory "?" a ":", jeden bez druhého nejdou použít, používají se k vyjádření podmínky. Osobně si myslím, že jsou k ničemu, protože existuje příkaz if, který je spolehlivě zastane a ještě něco přidá. O příkazu if se dozvíte dále. Ovšem pro zájemce je tu příklad:
...
var plnoletost=18
var kolik=prompt("Kolik je ti let?","10")
var hlaseni
hlaseni = (kolik==18) ? "Gratuluji k vašim 18 letům a výhře 100000000 Kč" : §
"Škoda výhru posíláme pouze 18letým"
alert(hlaseni)
...
Nezapoměňte, že znak § znamená, že máte psát dále do jednoho řádku.
Ostatní operátory
V JS se setkáte ještě s mnoha speciálními operátory ovšem ty jsou tak specifické, že na ně při psaní běžných skriptů nenarazíte, proto je sem ani nebudu psát, máte-li o JS skutečný zájem tak mi napište a já vám o nich něco pošlu.
Priorita operátorů
Při psaní složitějších výrazů se vám může stát, že budete mít několik operátorů najednou. Jak potom ale zjistíte, který se vykoná dříve a který později. Každý přece ví, že 5+6*8 je něco jiného než (5+6)*8, proto je tu tabulka priority operátorů.
Tabulka priority operátorů
| Priorita |
Operátor |
Popis |
| 1 (nejnižšší) |
, |
čárka |
| 2 |
= += *= -= /= %= &= >>= >>>= |
přiřazení a kombinace zkratek jiných operátorů |
| 3 |
?: |
podmínkové operátory |
| 4 |
|| |
logický součet(or) |
| 5 |
&& |
logický součin(and) |
| 6 |
| |
bitový součet(or) |
| 7 |
^ |
exkluzivní bitový součet(xor) |
| 8 |
& |
bitový součin(and) |
| 9 |
== != |
rovnost nerovnost |
| 10 |
<> >= <= |
větší menší větší nebo rovno menší nebo rovno |
| 11 |
<< >> >>> |
bitový posun doleva doprava |
| 12 |
+- |
sčítání odčítání |
| 13 |
*/% |
násobení dělení modulo dělení |
| 14 |
!~-++-- |
negace inkrementace dekrementace |
| 15(nejvyšší) |
( ) [ ] |
volání funkcí pole vlastnosti objektů |
Pokud si nejste jisti prioritou, doporučuji vám používat závorky, skript to zpřehlední.
Podmíněnné příkazy
Pro vyjádření podmínky se používá příkaz if a jemu příslušící else. Základní syntaxe je:
if (podmínka) {
příkazy které se mají vykonat
} else {
příkazy které se vykonají není-li podmínka splněna
}
Příkaz else nemusí být vnořen!
Teď si dáme nějaký konkrétní příklad:
...
var cislo=eval(prompt("Napište číslo větší než deset:","10"))
if (cislo>10) {
alert("Správně")
} else {
alert("Špatně")
}
...
Pro nešiky nebo lenochy je skript ke stažení zde. Všimněte si příkazu eval. Příkaz prompt totiž pracuje s textem a příkaz eval text převede na čísla.
Tento skript má jedinou vadu, nepočítá s tím, že někdo může napsat i písmeno, a to se špatně převádí na číslo, takže skript nebude fungovat.
Vícenásobné větvení programu
Je sice pěkné, že umíte používat if, ale co když bude potřeba vybírat více než ze dvou možností? K tomu slouží příkaz switch a v něm vnořený break. Zanechme teorie a ukažme si to na příkladu:
...
var povolani=prompt("Jaké je vaše povolání?","nezaměstnaný")
switch (povolani) {
case "nezaměstnaný" : alert("Doufám, že brzy najdete práci")
break;
case "programátor" : alert("To je dobře, že se sem koukají i programátoři")
break;
case "lékař" : alert("Zachraňte mnoho lidí")
break;
default : alert("Toto povolání je mi neznámé")
break;
}
...
Skript si stáhnětezde. Case označuje jednu větev programu, která se splní napíše-li uživatel slovo v uvozovkách. Defaul je speciální větev, která se spustí není-li splněna ani jedna z podmínek větví. Nezpomeňte dát na konec každé větve příkaz break, který programu řekne, že zde končí větev.
Cykly
Hodně užívanými příkazy jsou cykly. Cykly opakují určite příkazy až do té doby, dokud neí splněna podmínka pro jejich ukončení.
Cyklus s pevným počtem opakování
Příkaz tohoto cyklu je for, syntaxe je :
for (počáteční stav; koncový stav ; úprava proměnné) { tělo cyklu }
Nejlépe si to ovšem vyzkoušíme na malém příkladu:
...
var i
for (i=0 ; i>=10; i++) {
document.write(i+"<br>">
...
Nefunguje-li vám, je ke staženízde.
Jak vidíte cykly jsou užitečné v tom, že nemusíte jeden řádek otrocky psát 10krát, ale pouze jednou a o zbytek se již postará cyklus. A to nejlepší nás teprve čeká.
Tento skript vypíše řadu čísel od 0 do 10 přičemž každé bude na nové řádce.
!Pozor na nekonečné skripty nebo nesplnitelné skripty, můžou přerušit spojení a způsobit další problémy!
Cyklus s podmínkou na konci
Dalším druhem cyklů jsou cykly s podmínkou k ukončení na konci. Používají se pro ně dva nové příkazy do a while, syntaxe je :
do {
příkazy, které se budou provádět dokud nebude naplněna podmínka
} while(podmínka pro ukončení)
Zkusme si to tedy v praxi:
<script language="JavaScript">
document.write("Vítáme vás v naší restauraci:<br>")
var objednavka
do { objednavka=prompt("Co si budete přát?","účet")
document.write(objednavka+"<br>")
}
while (objednavka!="účet")
document.write("Děkujeme vám za návštěvu")
</script>
Nyní si ukážeme jiný druh cyklu.
Cyklus s podmínkou na začátku
Tento cyklus je podobný předchozímu jen se zruší příkaz do a while se přesune na začátek. Jaký je tedy mezi nimi rozdíl. Cyklus do while se provede jednou, i když podmínka pro ukončení byla splněna, zato while nejprve zkontroluje zda náhodou neplatí podmínka a poté se teprve vykoná tento rozdíl si ukážeme nyní:
<script language="JavaScript">
var cislo=6
do {
document.write(cislo+"<br>")
}
while (cislo!="6")
</script>
<script language="JavaScript">
var cislo=6
while (cislo!="6") {
document.write(cislo+"<br>")
}
</script>
Zatímco skript s cyklem do while vám šestku napíše, i když by neměl poněvadž byla splněna podmínka, druhý skript s cyklem while vám šestku nenapíše, protože nejprve zkontroluje zda nebyla splněna podmínka, a když mu víde, že byla ani se nezačne zpracovávat.
Pokročilé řízení skriptů
Někdy může vzniknout situace, kdy je nutné cyklus předčasně ukončit. K tomu jsou určeny dvy příkazy continue a break.
Příkaz continue:
Příkaz continue přeskočí aktuální větev a začne hned od znova. Nejlepší bude asi příklad:
...
var cislo
do {
cislo=prompt("Jestli napíšete číslo 6, cyklus se ukončí, napíšete-li 0 nebude napsána, co chcete napsat:","6")
if (cislo==0) {
continue
}
document.write(cislo+"
")
} while (cislo!="6")
...
Když zadáte číslo 0 příkaz continue přeskočí zbytek cyklu, takže se číslice nenapíše a začne od znova.
Příkaz break:
Příkaz break je mnohem nemilosrdnější a v klidu celý cyklus vypne:
...
var nab=3
var shoot
do {
shoot=prompt("V pistoli máte "+nab+" nábojů, chcete vystřelit?§
(prosím odpovídejte ano/ne)","ano")
if (shoot!="ne") {
if ((shoot="ano")&&(nab!=0)) {
nab--
} else {
break
}
}
} while (shoot!="ne")
...
Tento už trochu složitější skript si probereme podrobněji:
1. vytvoří se proměnné nab s hodnotou 3 a shoot bez hodnoty
2. spustí se cyklus, který se vypne napíše-li uživatel ne
3. proměnná shoot se definuje otázkou, chce-li uživatel vystřelit
4. pokud uživatel napíše ano a počet nábojů se nerovná 0 pistol vystřelí a odečte se 1 náboj
5. pokud je počet nábojů roven 0 cyklus se vypne, není-li vám to jasné, časem to pochopíte
Začíná se nám to komplikovat, ale nevěšte hlavu už toho umíte poměrně dost a kdyby někomu tento skript dělal potíže ať si ho stáhne zde.
Jé ten skript se mi líbí chci ho použít na víc stránkách.
To je jednoduché stačí napsat skript bez <script> a </script> a soubor s ním uložit jako třeba skript.js pak už jen stačí na stránce kam chcete skript vložit napsat:
<script src="skript.js">
</script>
A je hotovo. Největší klad, ale je, že když potřebujete skript změnit stačí změnit soubor skript.js a skript se změní na všech stránkách, na které byl umístěn.
Dále