JavaScript je programovací jazyk pro tvorbu aktivních HTML stránek, skriptování se děje na straně klienta (tj. webového prohlížeče). K jeho testování nám stačí pouze webový prohlížeč.
Z /usr/html/NMIN266/ si zkopírujte soubor: projavascript.tar do ~/public_html/ a tam ho rozbalte
<html> <head> </head> <body> <script language=JavaScript> document.write("Nazdar světe!"); </script> </body> </html> |
<script language=JavaScript> loc=window.location.href; document.write(loc); </script> |
<script language=javascript> q=window.prompt("ENG/CZ/DE",""); if (q=="ENG"){document.write("pokracujeme v Anglictine")} if (q=="CZ"){document.write("pokracujeme v Cestine")} if (q=="DE"){document.write("pokracujeme v Nemcine")} </script> |
function max(a,b,c){
if (a>b){
if (a>c){return a;}else{return c;}
}else{
if (b>c){return b;}else{return c;}
}
}
onLoad | při načtení stránky |
onUnload | při opuštění stránky |
onClick | při kliku myší na objekt |
onDblClick | při dvojkliku |
onMouseOver | když je kurzor myši nad objektem |
onMouseOut | když kurzor myši odjede pryč z objektu |
onFocus | když se prvek stane aktivním (přechod neaktivní->aktivní) |
onBlur | opak k onFocus (přechod aktivní->neaktivní) |
onSubmit | když se uživatel rozhodne odeslat formulář (použije se na tag form), při návratu false se formulář neodešle |
onKeyDown | zmáčknutí klávesy |
onKeyUp | puštění klávesy |
<html> <head> <meta charset=utf8> <script language=javascript> function kontroluj(){ if (document.getElementById("a").value=="Jan"){window.alert("Odesílám");return true;}else{window.alert("Tebe neznám");return false;} } </script> </head> <body> Odešleme pouze toho kdo se jmenuje Jan. <form onsubmit="return kontroluj();" method=get> <input name=a id=a> <input type="submit" value="odeslat"> </form> </body> </html> |
<form> |
<form> Napiš své jméno<input name=jmeno id=jmeno> |
<form> <input name=a id=a>+<input name=b id=b>=<input name=c id=c readonly> <input type=button onClick="document.getElementById('c').value=eval(document.getElementById('a').value)+eval(document.getElementById('b').value);" value=Secti> </form> |
<script language=JavaScript> function souradnice(prvek){ nahore=document.getElementById(prvek).offsetTop; vlevo=document.getElementById(prvek).offsetLeft; sirka=document.getElementById(prvek).offsetWidth; vyska=document.getElementById(prvek).offsetHeight; window.alert("Vlevo:"+vlevo+"\n Top:"+nahore+"\n sirka:"+sirka+"\n vyska:"+vyska); } </script> <form> <input id=nahore value="ja jsem horni (široký)"size=300><br> <input id=vpravo value="pravy" size=6><br> <input type=button onClick='souradnice("nahore");' value=horni> <input type=button onClick='souradnice("vpravo");' value=pravy> </form> |
<span id=prvni> Text ... </span> <br> <span id=druhy style="visibility:hidden;">toto je na začátku neviditelné</span><br> <input value=červeně type=button onCLick="document.getElementById('prvni').style.background='RED';"> <input value=zeleně type=button onCLick="document.getElementById('prvni').style.background='GREEN';"> <input value=bíle type=button onCLick="document.getElementById('prvni').style.background='WHITE';"> <input value="Zobraz druhý" type=button onCLick="document.getElementById('druhy').style.visibility='visible';"> <input value="Skryj druhý" type=button onCLick="document.getElementById('druhy').style.visibility='hidden';"> <br><input id=zamena><input type=button onClick="document.getElementById('prvni').innerHTML=document.getElementById('zamena').value;" value="Vyplň první (textem v Input políčku)"> |
<img id=obrazek src=bublina.png onClick="document.getElementById('obrazek').src='click.png';" onMouseOver="document.getElementById('obrazek').src='mouseover.png';" onMouseOut="document.getElementById('obrazek').src='bublina.png';"> |
<script language=JavaScript> function najdiden(){ var dny=Array("nedele","pondeli","utery","streda","ctvrtek","patek","sobota"); den=document.getElementById("den").value; mesic=document.getElementById("mesic").value; rok=document.getElementById("rok").value; mesic-=1; nyd=new Date(rok,mesic,den,12,0,0); dentydne=nyd.getDay(); window.alert(dny[dentydne]); } </script> <form> Kdy ses narodil?<br> den:<input name=den id=den><br> měsíc:<input name=mesic id=mesic><br> rok:<input name=rok id=rok><br> <input type=button onClick="najdiden();" value="Den narození"> </form> |
//v adresáři obrázky mám obrázky 01.jpg, 02.jpg, ...,08.jpg <img src="./obrazky/01.jpg" id=casovac> <script language=JavaScript> var a=1; var casovac; function anim(){//funkce, která zamění src obrázku a spustí časovač //který tuto funkci spustí znovu z 1vteřinu a++; if (a>=8){a=1;} srcobrazku="./obrazky/0"+a+".jpg"; document.getElementById('casovac').src=srcobrazku casovac=window.setTimeout('anim()', 1000); } function stop(){//funkce, která vypne (ukončí) časovač window.clearTimeout(casovac); } </script> <form> <input type=button onClick="anim();" value="Spusť časování"> <input type=button onClick="stop();" value="Zastav časování"> </form> |