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

Počítání v JavaScriptu

S aritmetickými operátory jsme se již seznámili a v JS jsou to plus(+), minus(-), krát(*), děleno(/), moduo dělení(%). Pro toho kdo zaspal modulo děleno vrátí zbytek při neceločíselném dělení. Počítání s JavaScriptem má ale svá úskalí, schválně si zkuste tento skript:
<form name="form">
<input type="text" name="text1"><br><br>
<input type="text" name="text2"><br><br>
<input type="button" value="Sečti" onClick="alert§(document.form.text1.value+document.form.text2.value)">
</form>

 Zkuste zkusmo zadat nějaké hodnoty např. 1 a 2 , podle zákonů zdravého rozumu by mělo vyjít 3, ale ouha z počítače vypadne 12. Tak, kde je chyba, aha počítač neumí počítat. Ale umí počítat a velmi dobře. CHyba je v netypovosti jazyka JS, on tyto čísla bere jako textové řetězce a prostě je seřadí za sebe. Kdybyste místo + zadali např. * nebo /, program by poznal, že má násobit a výsledek by byl správný, ale takle je chudáček zlblý. Musíme mu zadat, že hodnoty nejsou řetězce, ale čísla a to provedeme pomocí příkazu eval().
<input type="button" value="Sečti" onClick="alert§(eval(document.form.text1.value+document.form.text2.value))">
 A nyní již náš skript bude fungovat správně. Tak základy matemtiky již zvládáme a nyní si ukážeme matematiku pro pokročilé.

Objekt Math
Název Popis
Metody
abs (x) Vrací absolutní hodnotu x
acos (x) Vrací arkus cosinus x v radiánech
asin (x) Vrací arkus sinus x v radiánech
atan (x) Vrací arkus tangent x
cos (x) Vrací kosinus x
exp (x) Vrací hodnotu e na x-tou, kde x je zadané číslo
log (x) Vrací přirozený logaritmus x
max (x,y) Vrací větší z čísel x a y
min (x,y) Vrací menší z čísel x a y
pow (x,y) Vrací mocninu x na y-tou
random ( ) Vrací náhodné číslo od 0 do 1
round (x) Vrací x zaokrouhlené na jednotky
sin (x) Vrací sinus z x
sqrt (x) Vrací druhou odmocninu z x
tan (x) Vrací tangent z x
Vlastnosti
E Eulerovo číslo (2,71828182) (víte někdo, co to je?)
PI Ludolfovo číslo (3,14159265)
LN2 Přirozený logaritmus čísla 2
LN10 Přirozený logaritmus čísla 10
SQRT1_2 Odmocnina z 0,5
SQRT2 Odmocnina ze dvou

Poněkud složité, ne( jestli někdo víte k čemu je Eulerovo číslo, napište mi). A ted si uděláme takovou malou hru hádání čísel:

<HTML>
<HEAD>
<TITLE>Hádaní čísel</TITLE>
<script language="JavaScript">
function zpracuj() {
var hadal=document.form.text1.value
var spravne=Math.random()
var spravne1=Math.round(spravne*100)
while (hadal!=spravne1) {
if (hada<spravne1) {alert("Hádané číslo je menší") }
if (hadal>spravne1) {alert("Hádané číslo je větší") }
hadal=prompt("To nebylo správně, máte další pokus:",hadal)
}
alert("Trefa, uhádl jste správné číslo")
document.form.text1.value= spravne1
}
</script>
</head>
<body>
Schválně, jestli uhádnete jaké číslo od 0 do 100 mám na mysli:<br>
<form name="form">
<input type="text" name="text1" length="20" maxlength="20">
<input type="button" value="Tipni" onClick="zpracuj()">
</form>
</BODY>
</HTML>

 Tato hříčka je dobrá tak maximálně pro pobavení mladších sourozenců, ale také je lehká na programování a můžete se chlubit, že jste naprogramovali "hru". Teď si to trochu rozebereme:
Nejprve si vytvořím editační řádku jménem text1 a ltačítko, po jehož spuštění se provede funkce zpracuj( ). Obsah funkce zpracuj( ):
Údaj, který uživatel zadal je zadán do proměnné hadal. Poté je vytvořena proměnná spravne do níž je zadáno náhodné číslo od 0 do 1. Dále si vytvořím proměnnou spravne1, do které uložím zaokrouhlené číslo spravne, vynásobené stem(kdybych chtěl množinu čísel od 0 do 1000 tak tisícem). Nyní spustím cyklus, který bude probíhat tak dlouho, doukd uživatel nezadá správné číslo. Zaprvé cyklus ověří, zda je hádané číslo menší či větší a poté se otevře dotazovací okénko, kde uživatel zadá novou hodnotu. Pokud uživatel číslo trefí, ukončí se cyklus a vypíše se vítězný text a do editační řádky se vypíše správné číslo.

Hrátky s časovačem

Časovač je funkce, která před provedením určité jiné funkce či příkazu vyčká stanovenou dobu a poté ji provede. Časovač se v JS vytváří pomocí:
setTimeout("příkazy",čas v ms)
Takže časovač, který vyčká deset sekund a poté vypíše daný text může vypadat takto:
setTimeout("alert('AHOJ')",10000)
Asi nejpoužívanější vlastností časovače je přesměrování:
setTimeout("location.href='http://www.seznam.cz'",5000)
Po 5 vteřinách dojde k přesměrování na stránky Seznamu. Ale, co když někteří uživatelé nechtějí být přesměrováni:
<script language="JavaScript">
var presmeruj=setTimeout("location.href='http://www.seznam.cz'",5000)
</script>
<body>
Pokud do 5 vteřin nestisknete tlačtko Stop, budete přesměrováni na stránky Seznamu.
<form>
<input type="button" value="Stop" onClick="clearTimeout(presmeruj)">
</form>

 Jak vidíte, pokud uživatel neprojeví iniciativu do pěti vteřin má smůlu. Zničení časovače, jak jste jistě pochopili se provádí pomocí clearTimeout(jmenočasovače). Asi byste chtěli vědět, jak si na svoje stránky dát doopravdy fungující hodiny:

<script language="JavaScript">
function hodiny() {
var datum=new Date()
var hodiny=datum.getHours()
var minuty=datum.getMinutes()
var sekundy=datum.getSeconds()
var casek=hodiny+":"+minuty+":"+sekundy
return (casek)
}
function cas() {
document.form.cas.value=hodiny()
setTimeout("cas()",1000)
}
</script>

 Tak a nyní již stačí vytvořit tlačítko jménem cas a při nějaké události nechat vyvolat funkci cas() a máte fungující hodiny a to dokonce v tlačítku.