Osnove jezika JavaScript - Naslovnica | PMFbruckler/javascript.pdf · JavaScript je objektno orijentiran. Vezano za objekt Window omogu cuje kori stenje triju metoda: alert(poruka),

Osnove jezika JavaScript

Franka Miriam Bruckler

1 Uvod

Skriptovi su mali programi koji doprinose interaktivnosti web-stranice. Najcesce koristen jezik za skrip-tove je JavaScript. Skriptovi se mogu podijeliti u dvije vrste: one koji se pokrecu automatski bez dakorisnik ista ucini, te one koji se pokrecu kad korisnik nesto ucini. Prva vrsta naziva se

”automatski

skriptovi” i izvode se svaki put kada browser ucita web-stranicu. Oni se izvode onim redom kojimsu uneseni u HTML-kod. Druga vrsta skriptova reagira na tzv. intrinzicne dogadaje, poput prije-laza kursora preko linka. Oni se unose unutar tag-a na koji se dogadaj i skript odnose. Literatura:http://www.javascriptkit.com/jsref/, http://www.w3schools.com/js/js_examples.asp i E. Cas-tro, HTML for the World Wide Web.

2 Autmatski skriptovi

Automatski skriptovi se unose izmedu tag-ova <script> i </script>. Preciznije, kod se unosi unutar

<script type="text/javascript" language="JavaScript">

</script>

Atribut language se ne moze koristiti uz striktnu verziju (X)HTML-a, ali je preporucljiv u transitionalverziji jer osigurava kompatibilnost sa starijim preglednicima. Skriptovi se ucitavaju onim redom kakosu napisani. Ako zelite da se skript ucita prije od svega drugoga, treba ga napisati u head-dijelu.

Moguce je pozivati i skript koji je pohranjen izvan samog HTML-koda. U tom slucaju potreban jedodatni atribut src koji kao vrijednost dobiva adresu skripta.

3 Skriptovi koji reagiraju na dogadaje

Da bi skript reagirao na dogadaj koji se odnosi na neki element web-stranice, treba prvo generiratiodgovarajuci tag, primjerice a ako zelimo reakciju na prijelaz kursora preko linka. Taj HMTL-elementdobiva dodatni atribut cije ime je jedan od sljedecih tipova dogadaja (nije potpuna lista!):

• onload (dogadaj ucitavanja web-stranice ili frameset-a; moze se koristiti unutar tagova body iframeset);

• onunload (dogadaj napustanja web-stranice ili frameset-a; moze se koristiti unutar tagova body iframeset);

• onclick (dogadaj klika na odredeni element; moze se koristiti sa svim elementima osim br, font,frame, frameset, head, html, script, style i jos nekoliko njih);

• ondblclick (dogadaj dvostrukog klika na odredeni element);

• onmousedown (dogadaj pritiska na tipku misa dok pokazuje odredeni element);

• onmouseup (dogadaj otpustanja tipke misa dok pokazuje na odredeni element);

• onmouseover (dogadaj fokusiranja odredenog elementa misem);

• onmousemove (dogadaj pomaka misa nakon sto je kursor pokazivao na odredeni element);

• onmouseout (kao prethodno, ali pritom se kursor pomice izvan elementa);

1

4 Osnove JavaScript-a 2

• onfocus (dogadaj odabira ili dolaska tabom na odredeni element; moze se koristiti s a i jos nekimelementima);

• onblur (dogadaj napustanja elementa koji je bio u fokusu; moze se koristiti s a i jos nekim elemen-tima).

Kao vrijednost odabranog dogadaja (”atributa”) unosi se JavaScript-kod, naravno pod dvostrukim

navodnicima. Ako u samom skriptu trebate koristiti navodnike, koristite jednostruke, a ako onda jostreba unutar njih koristiti navodnik, ispred njega se stavi backslash.

Moguce je kreirati i gumb pritiskom na kojeg se skript izvodi:

<button type="button" name="jedinstveno ime gumba"

onclick="kod skripta">

Tekst na gumbu, moze i <img src=" ... " />

</button>

Dodatni atribut u tagu button moze biti style, kojim podesimo izgled gumba. Tag button podrzavajusamo noviji preglednici.

Ovdje je zgodno napomenuti da postoji nacin kako omoguciti da korisnik ciji preglednik ne podrzavaskriptove dobije neku alternativnu informaciju (poput atributa alt za tag img):

<noscript>

Alternativne informacije

</noscript>

Ideja je da ce stariji preglednici jednostavno ignorirati noscript i prikazati ono sto on sadrzi, dok cenoviji koji razumiju script izvesti njega, a preskociti noscript. No, takvi stariji preglednici jednostavnobi prikazali i skript sadrzan u skript-tagu. Stoga je doticni pozeljno

”sakriti”. Kako? Stavimo ga unutar

komentara (), s tim da prije znaka kraja komentara unesemo znak za komentar iz jezika koji sekoristi u skriptu (// za JavaScript). Pritom <script> upisujemo ispred :

<script type="text/javascript" language="JavaScript">



</script>

4 Osnove JavaScript-a

Aritmeticki operatori pisu se kao i u vecini programskih jezika. Operator + koristi se i za konkateniranjestringova. Ako se s + kombiniraju brojevi i stringovi, brojevi se prvo konvertiraju u stringove. Stringovise unose unutar dvostrukih navodnika. Zelimo li koristiti neke specijalne znakove, treba koristiti escapesequences (\n za prijelaz u novi red, \t za horizontalni tab, \’ za jednostruki navodnik, \” za dvostruki,\\ za backslash, . . . ), npr. alert(”Welcome to JavaScript Kit\nEnjoy your stay!”).

Osnovna naredba pridruzivanja je =. Postoje i skracene verzije, primjerice x+=3 je ekvivalentno sx=x+3. Za usporedivanje se koriste ==, !=, <, <=, >, >=.

Varijable se ne moraju deklarirati, no to je preporucljivo i postize se s var ime. Moguce je odmah iinicijalizirati varijablu i istovremeno deklarirati vise njih, primjerice var x, y=10, z=25, dog=Spotty””.

Uvjetni operator ?: ((uvjet)? n1 : n2) je skraceni nacin pisanja naredbe grananja: ako je uvjetispunjen, iznos je n1, inace n2. Primjerice, x=(y<0)? 5: 10 ce u x pospremiti 5 ako je trenutna vrijednosty negativna, a inace 10. Prava if-naredba ima sintaksu

if (expression)

statement

if (expression){

statement1

statement2

5 Primjeri skriptova pisanih u JavaScript-u 3

}

if (expression)

statement1

else

statement2

For- i while-petlja imaju sintaksu:

for (initialValue; test; increment)

statement

while (expression)

statement

Primjerice,

for (var x=0, y=3; x<5; x++, y=x*3){

document.write("x:"+x+" ")

document.write("y:"+y+" ")

}

//outputs: x:0 y:3 x:1 y:3 x:2 y:6 x:3 y:9 x:4 y:12

var number=0

while (number<5){

document.write(number+"<br>")

number++

}

Prijevremeni izlaz iz petlje postize se naredbom break. Komentari zapocinju s //, sto se odnosi naostatak reda.

5 Primjeri skriptova pisanih u JavaScript-u

Oprez: JavaScript prijelom reda tretira kao kraj naredbe, a jako je osjetljiv na navodnike.

5.1 Automatizirano ispisivanje datuma i vremena

document.write("<p align=’right’><i>"+Date()+"</i></p>")

5.2 Promjena sadrzaja status-bara pri fokusiranju linka

onmouseover = "window.status=’novi tekst’;return true"

5.3 Promjena slike

<a href="web.html" ommouseover="document.catpic.src=’dream.jpg’"

ommouseout="document.catpic.src.=’real.jpg’">

<img src="real.jpg" name="catpic" />

</a>

5.4 Kontroliranje velicine novog prozora

<a href="javascript:location=’trenutna.html’; window.open(’nova.html’, ’label’,

height=150, width=150, scrollbars=’yes’)">

link</a>


5.5 Razno

JavaScript je objektno orijentiran. Vezano za objekt Window omogucuje koristenje triju metoda: alert(poruka),confirm(poruka) i prompt(poruka,[input]). Alert prikazuje alert-dijalog s porukom i gumbom OK;confirm radi to isto, s tim da ima i gumb Cancel; prompt daje i polje za unos, a moze se unijeti default-navrijednost (argument input).

var yourstate=window.confirm("Are you sure you are ok?")

if (yourstate) //Boolean variable. Sets to true if user pressed "OK" versus "Cancel."

window.alert("Good!")

var thename=window.prompt("please enter your name")

window.alert(thename)

document.write("This page\’s URL is "+document.URL)

<html>

<body>

<h1>My First Web Page</h1>

<p id="demo">This is a paragraph.</p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Date();

</script>

</body>

</html>

<html>

<body>


var x;

x=5+5;

document.write(x);

document.write("<br />");

x="5"+"5";

document.write(x);


x=5+"5";

document.write(x);


x="5"+5;

document.write(x);


</script>

<p>The rule is: If you add a number and a string, the result will be a string.</p>

</body>

</html>

Igranje s danima (http://www.w3schools.com/jsref/jsref_obj_date.asp).

<html>

<body>


var d = new Date()

var time = d.getHours()

if (time<10)


{

document.write("<b>Good morning</b>");

}

else if (time>10 && time<16)

{

document.write("<b>Good day</b>");

}

else

{

document.write("<b>Hello World!</b>");

}

</script>

<p>This example demonstrates the If statement.</p>

<p>If the time on your browser is less than 10, you will get a "Good morning" greeting.</p>

</body>

</html>

<html>

<head>


function show_alert()

{

alert("Hello! I am an alert box!");

}

</script>

</head>

<body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body>

</html>

<html>

<head>


function show_prompt()

{

var name=prompt("Please enter your name","Harry Potter");

if (name!=null && name!="")

{

document.write("Hello " + name + "! How are you today?");

}

}

</script>

</head>

<body>

<input type="button" onclick="show_prompt()" value="Show prompt box" />

</body>

</html>

<html>

<head>



function product(a,b)

{

return a*b;

}

</script>

</head>

<body>


document.write(product(4,3));

</script>

<p>The script in the body section calls a function with two parameters (4 and 3).</p>

<p>The function will return the product of these two parameters.</p>

</body>

</html>

<html>

<body>


var i=0;

for (i=0;i<=5;i++)

{

document.write("The number is " + i);


}

</script>

<p>Explanation:</p>

<p>This for loop starts with i=0.</p>

<p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body>

</html>

<html>

<head>


function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

<body>

<h1>My First Web Page</h1>

<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>

</html>


<html>

<head>


function timeMsg()

{

var t=setTimeout("alertMsg()",3000);

}

function alertMsg()

{

alert("Hello");

}

</script>

</head>

<body>

<form>

<input type="button" value="Display alert box in 3 seconds" onClick="timeMsg()" />

</form>

</body>

</html>

I na kraju malo matematike (http://www.w3schools.com/jsref/jsref_obj_math.asp):

<html>

<head>


function convert(degree)

{

if (degree=="C")

{

F=document.getElementById("c").value * 9 / 5 + 32;

document.getElementById("f").value=Math.round(F);

}

else

{

C=(document.getElementById("f").value -32) * 5 / 9;

document.getElementById("c").value=Math.round(C);

}

}

</script>

</head>

<body>

<p></p><b>Insert a number into one of the input fields below:</b></p>

<form>

<input id="c" name="c" onkeyup="convert(’C’)"> degrees Celsius<br />

equals<br />

<input id="f" name="f" onkeyup="convert(’F’)"> degrees Fahrenheit

</form>

<p>Note that the <b>Math.round()</b> method is used, so that the result

will be returned as an integer.</p>

</body>

</html>

Documents

Osnove jezika JavaScript - Naslovnica | PMFbruckler/javascript.pdf · JavaScript je objektno orijentiran. Vezano za objekt Window omogu cuje kori stenje triju metoda: alert(poruka),