NMI266 - 27.4. JavaScript

JavaScript

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

samotný skript musí být uzavřen do tagů
<script language=JavaScript>
a
</script> JavaScript můžeme kombinovat s HTML kodem
externí skript (např s definicemi funkci) v souboru s koncovkou js do html stránky ho pak načteme v hlavičce takto:
<script language="JavaScript" src="externi.js"></script>
příkaz pro výpis je
document.write("Nazdar světe!");

Jednoduchá stránka s ukázkou JavaScriptu může vypadat např. takto:

<html>
<head>
</head>
<body>
<script language=JavaScript>
document.write("Nazdar světe!");
</script>
</body>
</html>

JavaScript nerozeznává typy proměnných, tj. chová se k nim podle kontextu
jednotlivé příkazy musí být ukončené středníkem
pro komentáře používáme // anebo pro víceřádkové komentáře
/*na začátku komentáře a */ na konci komentáře
Proměnné:
- typ číslo, řetězec je možné (ale většinou to není nutné) předem deklarovat:
  var a,b,c;
- typ datum, pole je nutné předem deklarovat
  var datum=new Date();
  var pole=new Array();
  pole je možné s deklarací i definovat:
  pole=new Array("1.polozka","2.polozka" ...);
  indexuje se od 0; odkaz na prvek pole je
  pole[0];
- Operace s čísly:
  + - * / += -= *= /=
- Operace s řetězci:
  +skládání řetězců
  tzv. metody řetězce
  b=a.charAt(n); vrátí znak na n-té pozici řetězce (počítáno od 0
  b=a.substr(od, počet);vrátí podřetězec začínajcí na pozici od (počítáno od 0) dlouhý 'počet' znaků
  b=a.toLowerCase(); vrátí řetězec zkonvertovaný do velkých znaků
  b=a.toUpperCase(); vrátí řetězec zkonvertovaný do malých znaků
  rozdělení řetězce do pole:
  var str="1,2,3,4"; var n=str.split(",");
  n je pole obsahující prvky 1,2,3,4,
  do souboru formlar.html doplňte tyto řádky:

<script language=JavaScript>
loc=window.location.href;
document.write(loc);
</script>

.split

Input a

decodeURI(); a encodeURI();
decodeURIComponent(); a encodeURIComponent();
podmínka
if (podmínka){příkazy}else{příkazy}
== != > < >= <=
lotické operátory:
||,&&,!

dialogová okna (informační/rozhodovací/vyplňovací dialogy)
upozornění/informace:(lze použít při debuovaní)
window.alert("Vítám vás na své stránce!");
rozhodnutí ANO/NE (uzavřená odpověď)
q=window.confirm("Zmáčkni tlačítko");
if (q){
document.write('zmáčkl's [OK]');
}else{
document.write('zmáčkl's [Cancel]');
}

vyplnění odpovědi:
q=window.prompt('Otázka?','předvyplněná odpověď');
v q se nám vrátí 'null' v případě, že jsme dialog ukončili tlačítkem [Cancel]
případně vyplněným textem, když jsme dialog odeslali tlačítkem[OK]

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

Jazyk... neznámý

cykly
for (i=1;i<10;i++){}
while (podminka){}
do{}while(podminka)

skok na další krok cyklu, ukončení cyklu:
continue
break

funkce


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

Události (interakce s uživatelem)

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

viz.ukázka

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

<input type=button value=pozdrav onClick='window.alert("Nazdar");'>

</form>

Práce s formulářovými prvky:
každému formulářovému prvku můžeme přiřadit unikátní id tj.
<input name=jmeno id=jmeno>
a potom se na tento prvek odkázat pomocí:
document.getElementById("jmeno")
konkrétně na jeho hodnotu:
document.getElementById("jmeno").value
Příklad:

<form>
Napiš své jméno<input name=jmeno id=jmeno>

<input type=button onClick="window.alert('Nazdar'+document.getElementById('jmeno').value)" value=Pozdrav>

</form>

Hodnoty formulářových prvků můžeme aktivně měnit:

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

funkce eval() vyhodnotí řetězec jako matematický výraz

zjištění umístění a rozměrů prvku
document.getElementById('id').offsetTop:kolik PX od shora
document.getElementById('id').offsetLeft:kolik PX od leva
document.getElementById('id').offsetWidth:šířka prvku
document.getElementById('id').offsetHeight:výška prvku

<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>

manipulace s prvky html stránky:
documetn.getElementById('id').style.visibility='visible'/'hidden'-zobrazení/skrytí prvku
documetn.getElementById('id').style.background=red-změna stylu, v tomto případě barvy (obecně lze cokoliv z CSS)
documetn.getElementById('id').innerHTML="zaměna prvku"-změna obsahu prvku, zde se uplatí <span> a <div> (musí mít svoje id)
Příklad:

<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)">

Text ...
toto je na začátku neviditelné

Obrázky, záměna src obrázku:
document.getElementById('obrazek').src="jiny_obr.png";
Příklad:

<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';">

Přejeď na bublinu a klikni na ni:

Matematika:
eval("1+3-4");vyhodnotí řetězec jako matematický výraz
Matematické operace:
Uvozeno pomocí with (Math)
with (Math){
acos(x)
asin(x)
atan(x)
atan2(y,x)
cos(x)
sin(x)
tan(x)
ceil(x) zaokrouhleni nahoru
floor(x) zaokrouhleni dolů
abs(x)
exp(x)
log(x)
}
anebo:
Math.cos(x)

datum/kalendář:
časový popisovač pro stávající okamžik:
datum=new Date();
document.write(datum);
vypíše:

časový popisovač pro jiný, než aktuální den
nyd=new Date(2003,11,31,23,59,59);
rok měsíc den hodina minuta vteřina
pro přístup k jednotlívým položkám přes metody proměnné typu Date:
.getDate() číslo dne v měsíci 1-31
.getMonth() číslo měsíce 0-11
.getDay() číslo dne v týdnu 0-6 (ne-po)
.getTime() milisekund od 1.1.1970
.getHours() 0-23
.getMinutes() 0-59
.getSeconds() 0-59
.getFullYear() YYYY

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

Regulární výrazy v JavaScriptu
^,*,+,.,[],?,{},(),$
\n nový řádek
\t tabulátor
\d číslice
\D ne číslice
\w písmena,číslice,_
\W ne (písmena,číslice,_)
\s mezera, tabulátor
\S ne (mezera,tabulátor)
- nejprve si RE poskládáme do samostatné proměnné:
  var re = /^[_a-zA-Z0-9\.\-]+@[_a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,4}$/;
- řetězec např.
  email1="jirka@nikde.cz";
  email2="@jirkanikde.cz"; otestujeme metodou test proměnné re:
  if (re.test(email1)){document.write("První e-mail je OK");}else{document.write("První e-mail není OK!");}
  if (re.test(email2)){document.write("Druhý e-mail je OK");}else{document.write("Druhý e-mail není OK!");}

načasování určité události (časovač):
casovac=window.setTimeout('funkce()', doba);
za doba(tj. čas v milisekundách) se spustí funkce(), samotný časovač může být uvnitř volané funkce tj. spustí se "nekonečná" smyčka
zrušení časovače:
window.clearTimeout(casovac);
Příklad:

//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>