1 / 48

Javascript - príklady

Javascript - príklady. Doc. Ing. Juraj Vaculík, PhD. www: http:/nf446.host.sk mail : juvac@fpedas.utc.sk. Udalosti - Events. Udalosti sú triggers (vložené procedúry) , ktoré volaju jednu zo svoj i ch funkcií. onClick onSubmit onMouseOver, onMouseOut onBlur, onFocus, onChange,

goro
Download Presentation

Javascript - príklady

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Javascript - príklady Doc. Ing. Juraj Vaculík, PhD. www: http:/nf446.host.sk mail : juvac@fpedas.utc.sk

  2. Udalosti - Events Udalosti sú triggers (vložené procedúry), ktoré volaju jednu zo svojich funkcií. • onClick • onSubmit • onMouseOver, onMouseOut • onBlur, onFocus, onChange, • onLoad, onUnload

  3. onClick • vznikne ak sa klikne na tlačítko, t.j. • button, • checkbox, • radio button, • reset alebo • submit <input type=button value=„Stlač ma“ onClick="window.alert('Stlačil si ma!');">

  4. onSubmit • Udalosť vyvolá kliknutie na tlačitko submitvo formulári, • väčšinou sa spája s kontrolou formulára na strane klienta <form action=url_skriptu.php onSumbit="return checkform();"> Niekde je skript function checkform() { … }

  5. onMouseOver • ak je myš nad objektom (img, ..) alebo • nad linkom, oblasťou alebo aktívnou oblasťou v mape (area ...) <a href=url_stránky onMouseOver="windows.status='text';return true;"> info </a> Ak sa ukáže myšou na link v stavovom riadku sa zobrazí text

  6. onMouseOut • Opak ako MouseOver – reaguje na odchod z linku, z oblasti z blokového elementu alebo aktívnej oblasti v mape <a href=url onMouseOut="windows.status='text';return true;"> info </a> Pri odchode z linku sa vypíše text v stavovom riadku

  7. onMouseOver a onMouseOut • Použitie na zmenu obrázku <a href=url onMouseOver="mouse1.src=obr1.gif;" onMouseOut="mouse1.src=obr2.gif;"> <img name=mouse1 ... > </a>

  8. onFocus • Prenesenie riadenia na element. Väčšinou na editovací prvok vo formulári napríklad: • user tab alebo into or click • text, pasword, Textareaalebo fileUpload, <input type=text name=mes onFocus="window.status=(‚Zadaj hodnotu od 1 do12'); return true;"> Pri vstupe do okna zobrazí v stavovom riadku informáciu

  9. onChange • Udalosť sa vyvolá po odchode a po zmene z polí • text, texarea, password alebo file <input type=text name=mes onChange="window.status=('Mesiac bol zmenený'); return true;"> <input type=text name=rok...>

  10. onBlur • Udalosť sa vyvolá po odchode z polí text, texarea, password alebo file aj bez zmeny <input type=text name=mes onBlur="window.status=('Mesiac zostal nezmenený'); return true;"> <input type=text name=rok...>

  11. onLoad, onUnload • onLoad - nahratie dokumentu alebo rámu • onUnload - pri odchode alebo zavretí stránky privolaní novej, tlačidlo späť a pod. <body onLoad="alert('Vítajte na stránke');"> <body onUnLoad="alert('Ďakuje za prezretie \n našej skvelej stránky');">

  12. Práca so štandardnými oknami • Alert- oznam na obrazovke window.alert("message"); • Prompt – zadanie údaju a potvrdenie window.prompt(message, default); • Confirm – voľba áno/nie test=window.confirm("Máš viac ako 20 :");

  13. Alert – oznamy na obrazovku <html><head> </head></body> <form name=form1> Meno : <input type=text name=meno><br> <input type=button value="Submit Info"> </form> </... Doplní sa o <input type=button value="Submit Info" onClick="window.alrt('Nazdar '+document.form1.meno.value+'!');"> alert1.htm

  14. Príklad <html> <head> <title> Použitie alert, prompt a confirm</title> </head> <body> <h3>Použitie Alert, Prompt, a Confirm</h3> </body> </html>

  15. Príklad … <script language=javascript> <!-- function do_stuff(){ telo funkcie ... } --> </script> Do body sa doplní volanie onLoad=„do_stuff()“

  16. Príklad – telo funkcie var flag=false, fullname; fullname = prompt('Prosím zadaj meno', ' '); while (flag = = false){ // ak zadá meno vráti true pokračuje sa alertom flag=confirm('Skutočne si '+fullname); //ak neodsúhlasi zopakuje sa vstup if (flag = = false){ fullname=prompt('Prosím zopakuj meno',''); } // inač zobraz meno alert(fullname+', vítaj na našich stránkach!'); }alert.htm

  17. Formuláre a javascript • s aktívnym kurzorom - nastavenie do poľa • s kontrolou • požadovanou logikou • pridanie funkcií • pridanie kontroly

  18. Presmerovanie do poľa • s aktívnym kurzorom - nastavenie do poľa <body onLoad="document.form1.meno.focus()"> <form name=form1 action=skript.php> Meno : <input type=text name=meno><br> <input type=submit value=Zadaj> </form> bez focuss focus

  19. s kontrolou <body onLoad="document.form1.meno.focus()"> <form name=form action=skript.php> Meno : <input type=text name=meno><br> číslo karty : <input type=text name=karta size=16 maxlength=16><br> platnosť MM/RR : <input type=text name=cmes size=2 maxlength=2>/ <input type=text name=crok size=2 maxlength=2><br> <input type=subbmit value=potvrď> </form>

  20. chceme kontrolu: • zadanie mena - minimálne jeden znak • dĺžku čísla karty 16 znakov a to čísla • kontrola mesiac čísla 1-12 a • rok – čísla a väčší ako bežný • ak nie sú splnené kritéria upozorní na to, čo je zlé – metóda alert

  21. Prvý krok <script language=javascript> <!-- function checkform(){ } --> </script> funkcia je zatiaľ prázdna pre jej vyvolanie doplníme do formuláru jej volanie onSubmit="return checkform();"

  22. Rutina pre výpis chyby //výpis chyby var message=""; if (message.length > 0) { alert (message); return false; } else { return true; }

  23. Kontrola mena // kontrola mena if (document.form.meno.value.length==0) { message=message+"Zadaj meno\n" }

  24. Kontrola veľkosti if (document.form.karta.value.length<16){ message=message+"Zadaj celé číslo\n" } if (document.form.cmes.value.length<2){ message=message+"Zadaj oba znaky mesiaca\n" } if (document.form.crok.value.length<2){ message=message+"Zadaj oba znaky roku\n" }

  25. kontrola rozsahu mesiaca 1 - 12 if (document.form.cmes.value.length<2){ message=message+"Zadaj oba znaky mesiaca\n"; } else if (isNaN(document.form.cmes.value)){ message=message+" hodnota musí byť císelná\n"; } else if(document.form.cmes.value<1 || // or document.form.cmes.value>12){ message=message+" hodnota musí byť v rozsahu 1 až 12\n"; } a pod. check.htm

  26. OnMouse effekt • obrázok • mouse over • funkcia • pre-load images • funckia eval • test úplnosti

  27. OnMouse effekt - obrázok syntax: <img src=obr.gif ... > • document.images[0] - prvý obrázok • lepšie pomocou atribútu name –pozor casesensitivemouse a Mouse sú dva identifikátory <img src=obr.gif name=obr border=0> • generická syntax - document.images['imgname'].properties

  28. Vlastnosti obrázku • border - RO - šírka border • complete - RO - komplet download Y/N • heigh, width RO • name, RO • Vspace, hspace, RO • lowsrc, src - RW názov súboru

  29. Zmena obrázku v linku <a href= url onMouseover="obr.src='obr1.gif';" onMouseout="obr.src='obr2.gif';"> <img name=obr src=obr1.gif border=0></a> obrazok.htm

  30. Pomocou funkcie function MouseOn(){ document.images['obr'].src="obr1.gif";} function MouseOff(){ document.images['obr'].src="obr2.gif";} pre konkrétny obrázok <a href= url onMouseOver="MouseOn();" onMouseOut="MouseOff();"> <img name=obr src=obr1.gif border=0></a>

  31. Variant pre ľubovoľný obrázok function MouseOn(obrazok){ document.images[obrazok].src="obr1.gif";} function MouseOff(obrazok){ document.images[obrazok].src="obr2.gif";} <a href= url onMouseOver="MouseOn(obr1);" onMouseOut="MouseOff(obr1);"> <img name=obr1 src=obr1.gif border=0></a> <a href= url onMouseOver="MouseOn(obr2);" onMouseOut="MouseOff(obr2);"> <img name=obr2 src=obr1.gif border=0></a>

  32. Definícia a zmena obrázku adresar/meno.pripona použitie napríklad obr_on.gif alebo obr_of.gif -> "adresar/"+meno+".prípona„ function MouseOn(ob){ document.images[ob].src="images/"+obrazok+"_on.gif"; } function MouseOff(){ document.images[ob].src="images/"+obrazok+"_of.gif";}

  33. Definícia a zmena obrázku ... <a href= url onMouseOver="MouseOn(obr1);" onMouseOut="MouseOff(obr1);"> <img name=obr1 src=images/obr1_on.gif border=0></a> <a href= url onMouseOver="MouseOn(obr2);" onMouseOut="MouseOff(obr2);"> <img name=obr2 src=images/obr2_of.gif border=0></a>

  34. Preload images var o1_on= newImage(); o1_on.src="images/obr1_on.gif"; var o2_on= newImage(); o2_on.src="images/obr2_on.gif"; ... mali by sme použiť document.images['obrazok'].src=obr1_on.gif alebo document.images['obrazok'].src=meno+"_on.src"

  35. Preload images ... to žiaľ nefunguje pretože výsledok nie je reťazec (nepriama adresácia) - treba použiť funkciu eval document.images['obrazok'].src=eval(meno+"_on.src") napríklad var obr1_on= new Image(); obr1_on.src="images/obr1_on.gif"; var obr2_on= new Image(); obr2_on.src="images/obr2_on.gif";

  36. Preload images ... function MouseOn(ob){ document.images[ob].src=eval(ob+"_on.src"); } ... <a href= url onMouseOver="MouseOn(obr2);" onMouseOut="MouseOff(obr2);"> <img name=obr2 src=images/obr2_of.gif border=0></a> ...

  37. Test úplnosti stiahnutia function MouseOn(ob){ if (eval(ob+"_on.complete)) { document.images[ob].src=eval(ob+"_on.src"); } }

  38. Pop up windows • windows.open(url, name, vlastnosti, replace) • window.close() Otvára/vytvára okno v špecifikovanom okne

  39. Pop up windows ... • url – url - adresa dokumentu • name - voliteľný reťazec, použitý pre atribút target • vlastnosti - zoznam vlastností oddelených čiarkou alwaysLowered, alwaysRaised, channelmode, dependet, directiries, fullcsreen, height, hotkeys, innerHeight, innerWidth, left, location, menubar, outerHeight, outerWidth, resizable, screenX, screenY, status, toolbar, top, width, z-lock • replace – pridáva to history buffer in browser

  40. Vlastnosti on/off • status - status bar yes/no • location - addres bar yes/no • toolbar - lišta s nástrojmiyes/no • menubar - menu yes/no • scrollbarsyes/no • height, width – veľkosť okna

  41. Vlastnosti ostatné • height, width – veľkosť okna • screenX, screenY – pozícia okna z ľava a vrchu - NN • left, top - pozícia okna z ľava a vrchu - IE, screenX NN

  42. Definícia vlastností window.open("height=500, width=400, menubar=no, scrollbars=no, status=no,toolbar=no, screenX=100, screenY=0, top=0, left=100")

  43. Funkcia na otvorenie function popupwin(){ ... } <form name=form1 ...> input type=button value="otvor okno" onClick="popupwin();"> </form> ... analogicky window.close wopen1.htm

  44. Vloženie obsahu do okna • Kompletné oknokomplet • menubar len menubar • status len status bar • Toolbar len tools bar • location s location / adres bar • scrollbars=nobez rolovania • Scrollbar=yesrolovanie • Resizablezmena veľkosti

  45. Vloženie obsahu do okna winpopup=window.open(súbor, kam, "heigth... atribúty"); winpopup.document.write("<html>\n<head>\n"); ...

  46. Nastavenie farieb a vlastností • winpopup.document.bgColor=#0000FF; • winpopup.document.fgColor=#FF00FF; • a ďalšie ...

  47. Výpis textu zo stránky • može vypísať text zo stránky, napríklad <form name=form1... Meno : <input type=text name=meno1 ... <input type=button value=potvrď onClick="popupwin();"> v okne môže byť winpopup.document.write("</h3>Ďakujeme p." +document.form1.meno1.value +" za vašu objednávku</h3>\n"); wopen.htm

  48. Zavretie okna winpopup.document.write('<form name=form2>\n'); winpopup.document.write('<input type=button value="zavri okno" onclick="window.close();">\n'; winpopup.document.write('</form>\n');

More Related