Javascript
Javascript
Javascript
SADRŽAJ
2
Model objekata dokumenta
3
Alert, Confirm, Prompt
<script language="JavaScript">
var pomocna=confirm("Da li Vam se svidja predmet Internet
tehnologije ?");
if (pomocna==true)
alert("Odlicno")
else
alert("Promasili ste smer")
var ime=prompt("Kako se zovete","***")
alert("Postovani " + ime+ ", "+ "ovo je primer za metode objekta
window");
</script>
1 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
Dropdown meni
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
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 10
m=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>
<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>
<script>
vest = "Najnovije vesti";
document.write ("<bold><font size=6>"+"<MARQUEE BEHAVIOR=ALTERNATE
direction=right>"+vest+"</MARQUEE></bold>")
</script>
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
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>
Slike Slideshow
7
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>
</div>
</form>
</body>
</html>
8
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>
</body>
</html>
9
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>
Favour icon
<html>
<head>
<LINK REL="SHORTCUT ICON"
HREF="slika.jpg">
</head>
<body>
</body>
</html>
<html>
<body>
<script type=text/javascript>
document.oncontextmenu = function() { return false;}
</script>
</body>
</html>
10
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>
Zoom picture
11
onclick="zoom('+','myimg',92/66)">Bigger</a>
</div>
</body></html>
Mini kalkulator
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function a_plus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.ans.value = c
}
function a_minus_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.ans.value=c
}
function a_times_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.ans.value=c
}
function a_div_b(form) {
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.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
Meni
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>
</html>
14
Najjednostavniji meni
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
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>
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
3 Meni sa tabovima
<html>
<script>
function getDesc(tip) {
if (document.getElementById) {
document.getElementById("tipArea").innerHTML = tip }
}
</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: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
4 Forma – ceo primer
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
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>
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>
5 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>
25