Javascript

JAVA SCRIPT

SADRŽAJ

1 Model objekata dokumenta..............................................................................................3

2 Alert, Confirm, Prompt......................................................................................................4

3 Skript za konverziju.........................................................................................................4

4 Dropdown meni................................................................................................................5

5 Prikaz vremena................................................................................................................6

6 Browser, Operativni sistem, Url........................................................................................6

7 Vest koja se pomera.........................................................................................................6

8 Muzika na stranici.............................................................................................................6

9 Mouse – over and out.......................................................................................................7

10 Slike Slideshow................................................................................................................7

11 Window open, close, blur focus, assign, replace, status back i sl…................................8

12 Blokiraj posetioce sa određenog domena........................................................................8

13 Tooltip...............................................................................................................................9

14 Promena boje pozadine.................................................................................................10

15 Favour icon.....................................................................................................................10

16 Zabrani desni klik...........................................................................................................10

17 Dodavanje sajta u bookmarks........................................................................................11

18 Zoom picture..................................................................................................................11

19 Mini kalkulator................................................................................................................12

20 Meni................................................................................................................................13

21 Najjednostavniji meni.....................................................................................................15

22 Meni 1.............................................................................................................................16

23 Meni sa tabovima...........................................................................................................18

24 Forma – ceo primer........................................................................................................20

25 Cookie – brojač poseta...................................................................................................23

26 Cookie – primer 2...........................................................................................................23

27 Cookie Remember me...................................................................................................24

2

1 Model objekata dokumenta

Slika 1 Model objekata dokumenta

3

2 Alert, Confirm, Prompt

<script language="JavaScript">var pomocna=confirm("Da li Vam se svidja predmet Internet

tehnologije ?");if (pomocna==true)alert("Odlicno")elsealert("Promasili ste smer")var ime=prompt("Kako se zovete","***")alert("Postovani " + ime+ ", "+ "ovo je primer za metode objekta

window");</script>

3 Skript za konverziju

<html><head>

<title>Konverzija</title></head><body>

<form name="promena"><input type=text name="KB" size="16">KB<BR><input type=button name="dugme" value=" < > " onClick="convertuj()"><BR><input type=text name="MB" size="16">MB<BR><input type=reset value=" Obrisi "></form><SCRIPT LANGUAGE="JavaScript">function convertuj() {if(document.promena.KB.value) {document.promena.MB.value = eval(document.promena.KB.value / 1024);}else {if(document.promena.MB.value) {document.promena.KB.value = eval(document.promena.MB.value * 1024);}}}</SCRIPT></body></html>

4

4 Dropdown meni

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>

<head><meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1" /><title>Meni</title><SCRIPT Language="JavaScript">

function ucitajmeni(meni){ location.href = meni.options[meni.selectedIndex].value

}</SCRIPT></head>

<body><FORM>

<FONT SIZE=4> <P> <SELECT NAME="Meni" SIZE=4> <OPTION VALUE="http://www.myelab.net">Myelab</OPTION> <OPTION VALUE="http://www.fon.rs">FON</OPTION> <OPTION VALUE="http://www.google.com">Google</OPTION> <OPTION VALUE="http://www.yahoo.com">Yahoo</OPTION> <OPTION VALUE="">Sesta opcija</OPTION></SELECT></FONT> <BR><BR> <INPUT TYPE=BUTTON VALUE="Izaberi opciju" onClick = "ucitajmeni(this.form.Meni)"></FORM>

</body></html>

5

5 Prikaz vremena

<script language=JavaScript>var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// dodati 0 ispred brojeva manjih od 10m=checkTime(m)s=checkTime(s)document.write("<FONT face=impact size=6 >"+h+":"+m+":"+s+"</font></a>");function checkTime(i){if (i<10) {i="0" + i} return i}</script>

6 Browser, Operativni sistem, Url

<script language=JavaScript>document.write("Vas browser je " + window.navigator.appName +"<br>");document.write("Verzija " + window.navigator.appVersion + "<br>");document.write("Operativni sistem " + window.navigator.platform

"<br>");document.write("Trenutna URL adresa: +window.location.href);

</script>

7 Vest koja se pomera

<script>vest = "Najnovije vesti";document.write ("<bold><font size=6>"+"<MARQUEE BEHAVIOR=ALTERNATE direction=right>"+vest+"</MARQUEE></bold>")</script>

8 Muzika na stranici

<script language="javascript"> document.write('<embed width=0 height=0 hidden="true" autostart="true" volume="5" loop="false" src="pesma.mp3">'); </script>

6

9 Mouse – over and out

<html><head>

<script language=JavaScript>function over(){document.slika.src="slika3.jpg" }function out(){document.slika.src="slika2.jpg" }</script></head><body><img src="slika1.jpg" name="slika" height=200 width=200 border=1 onmouseover="over()"; onmouseout="out()"></body></html>

10 Slike Slideshow



charset=iso-8859-1" /><title>Untitled Document</title>

<script>

NewImg= new Array( "slika1.jpg", "slika2.jpg", "slika3.jpg");var ImgNum = 0;var ImgLength = NewImg.length - 1;function izmenisliku(direction) {if (document.images) {ImgNum = ImgNum + direction;if (ImgNum > ImgLength) { ImgNum = 0; }if (ImgNum < 0) { ImgNum = ImgLength; }document.slideshow.src = NewImg[ImgNum];}}</script></head><body><img src="slika1.jpg" height=200 width=300 name="slideshow"><a href="javascript:izmenisliku(-1)" style="font-weight: bold; font-size: 14pt; width: 150px; color: #000099; background-color: #ffff99" >< PREVIOUS</font></a><a href="javascript: izmenisliku (1)" style="font-weight: bold; font-size: 14pt; width: 150px; color: #000099; background-color: #ffff99" > >NEXT ></a></body></html>

7

11 Window open, close, blur focus, assign, replace, status back i sl…

<html><body><form id="form1" runat="server"><div> <script type="text/javascript">function closeWin() { myWindow.close() }</script>

<script type="text/javascript">function openWin() { myWindow=window.open('','','width=500,height=300') myWindow.document.write("Ovo je test Prozor za funkcije Open i Close") }</script>

<input type=button value="Otvori prozor" onclick="openWin()" style="font-weight: bold; font-size: 14pt; width: 150px; color: #000099; background-color: #ffff99" /> <br /> <br /> <br /><input type="button" value="Zatvori prozor" onclick="closeWin()" style="font-weight: bold;font-size: 14pt; width: 150px; color: #000099; background-color: #ffff99" />

</div></form></body></html>

12 Blokiraj posetioce sa određenog domena

<script language="JavaScript" type="text/javascript">if (document.referrer.indexOf('http://any_site.com/') != -1) { alert('Posetioci sa domena:\n ' + document.referrer + ' ne mogu da pristupe ovoj stranici'); history.back(-1);if (document.referrer == 'http://www.domain_name.com/example.html') { alert(''Posetioci sa adrese:\n '+document.referrer+' ne mogu da pristupe ovoj stranici!'); history.back(-1); }</script>

8

13 Tooltip

<html><head><title>Style Example</title><script type="text/javascript"> function showTip(oEvent) { var oDiv = document.getElementById("toolTipComponent"); oDiv.style.visibility = "visible"; oDiv.style.left = oEvent.clientX + 5; oDiv.style.top = oEvent.clientY + 5; }

function hideTip(oEvent) { var oDiv = document.getElementById("toolTipComponent"); oDiv.style.visibility = "hidden"; }</script></head><body><P>Predjite misem preko linka.</p><a href="http://www.myelab.net" onmouseover="showTip(event)" onmouseout="hideTip(event)">www.myelab.net</a>

<div id="toolTipComponent" style="background-color: gray; position: absolute; visibility: hidden; padding: 5px"><span style="font-weight: bold">Probni ToolTip</span><br/>Ovde se nalaze informacije o predmetu Internet tehnologije</div>

</body></html>

9

14 Promena boje pozadine

<html>

<body><form name="test" method="post">

<input type="button" OnClick="document.bgColor = '#FFFFFF';" value="bela">

<input type="button" OnClick="document.bgColor = '#00FFFF';" value="Zelena">

<input type="button" OnClick="document.bgColor = '#FF00FF';" value="Roze">

<input type="button" OnClick="document.bgColor = '#FFFF00';" value="Zuta">

</form></body></html>

15 Favour icon

<html><head><LINK REL="SHORTCUT ICON" HREF="slika.jpg"></head><body></body></html>

16 Zabrani desni klik

<html><body><script type=text/javascript>document.oncontextmenu = function() { return false;}</script></body></html>

10

17 Dodavanje sajta u bookmarks

<html><head><script type=text/javascript>function addfav() { if (document.all) { window.external.AddFavorite ("http://www.myelab.net","Myelab sajt") } }</script><head><body>

<input type="button"; onclick="addfav()" value="klikni za dodavanje sajta u bookmarks"></body></html>

18 Zoom picture




<script language=JavaScript>function pronadjisliku(objectId) {

if (document.getElementById) {return (document.getElementById(objectId));}if (document.all) {return (document.all[objectId]);}}function zoom(type,imgx,sz) {imgd = pronadjisliku(imgx);if (type=="+" && imgd.width < 500) {imgd.width += 30;imgd.height += sz;}if (type=="-" && imgd.width > 20) {imgd.width -= 30;imgd.height -= (sz);}} </script>

</head><body>

<div align="center"><img id="myimg" alt=""src="slika1.jpg" width="66" height="92"><br /><a href="#"onclick="zoom('-','myimg',92/66)">Smaller</a> |<a href="#"

11

onclick="zoom('+','myimg',92/66)">Bigger</a></div></body></html>

19 Mini kalkulator

<html><HEAD><SCRIPT LANGUAGE="JavaScript">function a_plus_b(form) {a=eval(form.a.value)b=eval(form.b.value)c=a+bform.ans.value = c}function a_minus_b(form) {a=eval(form.a.value)b=eval(form.b.value)c=a-bform.ans.value=c}function a_times_b(form) {a=eval(form.a.value)b=eval(form.b.value)c=a*bform.ans.value=c}function a_div_b(form) {a=eval(form.a.value)b=eval(form.b.value)c=a/bform.ans.value = c}function a_pow_b(form) {a=eval(form.a.value)b=eval(form.b.value)c=Math.pow(a, b)form.ans.value = c}</SCRIPT></head><BODY><CENTER><FORM name="formx"><input type=text size=4 value=12 name="a"> <input type="button" value=" + " onClick="a_plus_b(this.form)"> <input type="button" value=" - " onClick="a_minus_b(this.form)"> <input type="button" value=" x " onClick="a_times_b(this.form)"> <input type="button" value=" / " onClick="a_div_b(this.form)"> <input type="button" value=" ^ " onClick="a_pow_b(this.form)"> <input type="number" size=4 value=3 name="b"> = <input type "number" value=0 name="ans" size=9></FORM></body></html>

12

20 Meni



charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">

div#KolonaMeni{

width:150px;height:150px;background-color:#0099FF;border: 3px solid #90C8FF;

}div#KolonaMeni a{

font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #FFFFFF;text-decoration:none;display:block;text-align:center;border-top-width: 7px;border-top-style:double;;border-top-color: #9FC6FF;

}div#KolonaMeni a:hover{

color: #0099FF;background-color: #B9E3FF;

}

div#podmeni1, #podmeni2, #podmeni3{

display:none;background-color:#80CEFD;border:solid;border-top-width: 1px;border-top-style: solid;border-top-color: #0066FF;border-bottom-color:#FFFFFF;

}div#KolonaMeni #podmeni1 a, div#KolonaMeni #podmeni2 a, div#KolonaMeni #podmeni3 a{

padding-left:10px;font-size:12px;color:#000000;border:none;

}</style><script>function prikazi(broj){

13

if (document.getElementById('podmeni' + broj).style.display == 'block') { document.getElementById('podmeni' + broj).style.display = 'none' } else { document.getElementById('podmeni' + broj).style.display = 'block' }}</script>

</head>

<body bgcolor="#0066FF"> <div id="KolonaMeni"> <a href="#" onmouseover="prikazi(1)">Prva stavka</a> <div id="podmeni1"> <a href="#">Podstavka 1</a> <a href="#">Podstavka 2</a> <a href="#">Podstavka 3</a> </div> <a href="#" onmouseover="prikazi(2)">Druga stavka</a> <div id="podmeni2"> <a href="#">Podstavka 1</a> <a href="#">Podstavka 2</a> <a href="#">Podstavka 3</a> </div> <a href="#" onmouseover="prikazi(3)">Treca stavka</a> <div id="podmeni3"> <a href="#">Podstavka 1</a> <a href="#">Podstavka 2</a> <a href="#">Podstavka 3</a> </div></div></body>

</html>

14

21 Najjednostavniji meni




<script language="JavaScript">

function razvuci(list){ var listElementStyle=document.getElementById(list).style; if (listElementStyle.display=="none")

{ listElementStyle.display="block";

} else { listElementStyle.display="none"; } }</script>

</head><body>

<a href="javascript:razvuci('Stavka1')">Stavka1</a><ul>

<li style="display: none;" id="Stavka1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li>

</ul> <a href="javascript:razvuci('Stavka2')">Stavka2</a>

<ul> <li style="display: none;" id="Stavka2"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> </ul>

</body></html>

15

22 Meni 1

<html><HEAD><script type="text/javascript"> function startmenu() { menu0.style.display = "none"; menu1.style.display = "none"; menu2.style.display = "none"; } function menu0func() { if(menu0.style.display == "none") { menu0.style.display = "block"; } else { menu0.style.display = "none"; } } function menu1func() { if(menu1.style.display == "none") { menu1.style.display = "block"; } else { menu1.style.display = "none"; } } function menu2func() { if(menu2.style.display == "none") { menu2.style.display = "block"; } else { menu2.style.display = "none"; } } </script>

</HEAD>

<BODY onLoad="javascript:startmenu()"><table align="center"><tr><td>

<a href="javaScript:menu0func()"><img src="new.gif"></a><font size=5>Predmeti</font><div id="menu0"> <img src="arrow.gif"><a href=''>Elektronsko poslovanje</a><br>

16

<img src="arrow.gif"><a href=''>Simulacija</a><br> <img src="arrow.gif"><a href=''>Internet tehnologije</a><br></div><br><a href="javaScript:menu1func()"><img src="new.gif"></a><font size=5>Godina</font><div id="menu1"> <img src="arrow.gif"><a href=''>Druga</a><br> <img src="arrow.gif"><a href=''>Treca</a><br> <img src="arrow.gif"><a href=''>Cetvrta</a><br></div><br><a href="javaScript:menu2func()"><img src="new.gif"></a><font size=5>Oblasti</font><div id="menu2"> <img src="arrow.gif"><a href=''>XML</a><br> <img src="arrow.gif"><a href=''>HTML</a><br> <img src="arrow.gif"><a href=''>JavaScript</a><br> <img src="arrow.gif"><a href=''>AJAX</a><br> <img src="arrow.gif"><a href=''>PHP</a><br></div><br></td></tr></table></body></html>

17

23 Meni sa tabovima

<html><script>function getDesc(tip) { if (document.getElementById) { document.getElementById("tipArea").innerHTML = tip } }

var menu_1 = 'Opis usluga.';var menu_2 = 'Opis proizvoda.';var menu_3 = 'Opis kompanije';var menu_4 = 'Kontakt informacije';

</script>

<style type="text/css">#theTabMenu { padding:3px 0; margin:0; border-bottom:1px solid black; font:bold 11px arial,helvetica,sans-serif; }

#theTabMenu li { list-style:none; margin:0; display:inline; }

#theTabMenu li a { padding:3px 8px; margin-left:4px; border:1px solid black; background:aqua; text-decoration:none; }

#theTabMenu li a:link { color:black; }#theTabMenu li a:visited { color:black; }

#theTabMenu li a:hover { color:black; background:white; border-color:black; border-bottom:1px solid white; }

#theTabMenu li.active { padding:3px 8px; margin:4px; background:white; border:1px solid black; border-bottom:1px solid white; }

.sublinks { border-right:1px black solid; border-left:1px black solid; border-bottom:1px black solid; padding:4px;

18

padding-left:10px; font-family:verdana,arial,helvetica,sans-serif; font-size:11px; }</style>

<body> <div> <ul id="theTabMenu"> <li class="active">Home</li> <li><a href="#" title="Features" onmouseover="getDesc(menu_1)">Usluge</a></li> <li><a href="#" title="Products" onmouseover="getDesc(menu_2)">Proizvodi</a></li> <li><a href="#" title="About Us" onmouseover="getDesc(menu_3)">O nama</a></li> <li><a href="#" title="Contact" onmouseover="getDesc(menu_4)">Kontakt</a></li> </ul> </div> <div class="sublinks"> <ilayer id="tipArea1" class="description"> <layer id="tipArea1" class="description"> <div id="tipArea" class="description"> Ovde se pojavljuje tekst vezan za tabove </div> </layer> </ilayer> </div></body></html>

19

24 Forma – ceo primer



charset=iso-8859-1" /><title>Validacija forme</title><style type="text/css">

.pro{

border: 3px solid #90C8FF;}</style><script language="JavaScript">

function validacija(){

if (document.forms[0].ime.value==''){alert("Niste uneli Vase ime!");document.forms[0].ime.focus();return false}if (document.forms[0].prezime.value==''){alert("Niste uneli Vase prezime!");document.forms[0].prezime.focus();return false;}if (document.forms[0].sifra.value==''){alert("Niste uneli sifru !");document.forms[0].sifra.focus();return false;}if (document.forms[0].mail.value==''){alert("Niste uneli e-mail adresu!");document.forms[0].mail.focus();return false;}if(document.forms[0].mail.value.indexOf('@') == -1){alert("Niste uneli e-mail adresu u odgovarajucem formatu!");document.forms[0].mail.focus();return false;}var pom=proveriradio(document.forms[0].pol)if (pom == null){ alert('Niste selektovali pol');return false;}confirm("Ispravno ste uneli sve podatke, da li nastavljate sa registracijom");var a=window.location.replace("fajl za obradu registracije na serveru");

20

return true;

}function proveriradio(btn) {

var cnt = -1; for (var i=btn.length-1; i > -1; i--) { if (btn[i].checked) {cnt = i; i = -1;} } if (cnt > -1) return btn[cnt].value; else return null;}

</script><SCRIPT LANGUAGE="JavaScript">

var pomocna = "false";function proveri(polje) {if (pomocna == "false") {for (i = 0; i < polje.length; i++) {polje[i].checked = true;}pomocna = "true";return "Obrisi sve cekirane"; }else {for (i = 0; i < polje.length; i++) {polje[i].checked = false; }pomocna = "false";return "Oznaci sve"; }}// End --></script></HEAD>

</head><body>

<form class="pro" onsubmit="return validacija()"><p><b><font size=4>Ovo forma sluzi kao primer koriscenja JavaScript-a za validaciju</font></b></p><b>Izaberite pol:</b><input type="radio" name="pol" value="male"> Zenski<input type="radio" name="pol" value="female"> Muski<br><br><b>Unesite ime i prezime:</b><br><br><b>Ime</b> <input type="text" name="ime"><br><b>Prezime</b> <input type="text" name="prezime"><br><b>Sifra</b> <input type="password" name="sifra"><br><br><b>Selektujte kurseve koje pohadjate:</b><br><br>Simulacija i simulacioni jezici<input type="checkbox" name="predmet" value="" />

21

<br>Internet tehnologije<input type="checkbox" name="predmet" value="" /><br>Upravljanje rizikom u informacionim sistemima<input type="checkbox" name="predmet" value="" /><br>Konkurentno programiranje<input type="checkbox" name="predmet" value="" /><br>Elektronsko poslovanje<input type="checkbox" name="predmet" value="" /><br><br><input type=button value="Oznaci sve" onClick="this.value=proveri(this.form.predmet)"> <br><br><b>Unesite e-mail adresu:</b><br><input type="text" name="mail" size="35"><br><br><b>Sta ocekujete od kurseva?</b><br><textarea name="area" rows="10" cols="30">

</textarea><br><br><b>Upload slike:</b><br><INPUT type="file" name="file"><br><br><INPUT type="submit" value="Registruj se" name="submit"> <INPUT type="reset" value="Obrisi podatke" namer="reset">

</form>

</body></html>

22

25 Cookie – brojač poseta

<html><head>

<script language=JavaScript>var novikuki = document.cookie;

var delovikukija = novikuki.split("=");var imekukija = delovikukija[0];var vrednostkukija = unescape(delovikukija[1]);var prethodnavrednost = vrednostkukija;if (imekukija != "brojac" || vrednostkukija == null) {prethodnavrednost = 0;}var novavrednost = parseInt(prethodnavrednost) + 1;var newDate = new Date();newDate.setTime(newDate.getTime() + 2592000000);document.cookie = " brojac=" + novavrednost + ";expires=" +newDate.toGMTString();

</script></head><body>

<script language="JavaScript">document.write("Ovu stranicu ste posetili "+ novavrednost + " puta.");</script>

</body></html>

26 Cookie – primer 2

<html><head><title>Pravljenje kukija</title><script language="JavaScript"> function napraviKuki(forma){ var kada = new Date(); kada.setMinutes(kada.getMinutes() + 1); // kuki istice za 1 minut imeGosta=forma.ime_gosta.value; document.cookie="ime="+escape(imeGosta)+";expires="+kada.toGMTString(); alert(unescape(document.cookie)); }

function dobrodosli(forma){ var pozicija=document.cookie.indexOf("ime="); if ( pozicija != -1){// ako je nasao podstring (-1 je vrednost ako nije nasao podstring) var pocetak = pozicija + 4; var kraj=document.cookie.indexOf(";",pocetak); //ako je ubacen neki od atributa kukija, odvojen je sa ; pa ce kraj naci //poziciju od ; if(kraj == -1){ kraj=document.cookie.length;} // -1 znaci da nije nadjen ; onda pretpostavlja da je duzina do kraja //kukija gost= unescape(document.cookie.substring(pocetak,kraj)); alert("Dobrodosli " + gost);

23

} else { alert("Danas nema kukija (kolacica :) )");} }

</script></head><body onLoad="document.mojaForma.reset()" > <center> <form name="mojaForma"> Kako se zovete? <br> <input type="text" name="ime_gosta" > <p> <input type="button" value="Make cookie" onClick="napraviKuki(this.form);"> <p> <input type="button" value="Get Cookie" onClick="dobrodosli(this.form);"> <p> </form></body></html>

27 Cookie Remember me

<html><head>

function newCookie(name,value) { document.cookie = name+"="+value;

}

function readCookie(name) { var nameSG = name + "="; var nuller = ''; if (document.cookie.indexOf(nameSG) == -1) return nuller;

var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); } return null; }

function eraseCookie(name) { newCookie(name,""); }

function toMem(a) { newCookie('theName', document.form.name.value); newCookie('theEmail', document.form.email.value); }

function delMem(a) { eraseCookie('theName'); eraseCookie('theEmail');

24

document.form.name.value = ''; document.form.email.value = ''; }</script></head><body>

<form name="form" action="http://www.myelab.net" method="post" onSubmit="if (this.checker.checked) toMem(this)"><input type="text" id="name" name="name" /><input type="text" id="email" name="email" /><input type="button" onclick="delMem(this)" value="Delete Information" /><input type="checkbox" id="checker" name="checker" /><input type="submit" id="submit" name="submit" />

</form>

<script type="text/javascript" language="javascript"></script></body></html>

25

Javascript

Documents

Transcript of Javascript