kermek_iwa_17.pdf

Izgradnja Web aplikacijaIzgradnja Web aplikacija

Prof. dr.sc. Dragutin Kermek

Sveučilište u Zagrebu

Fakultet organizacije i informatike

Pavlinska 2, Varaždin 42000

[email protected]

17. dio

Prof.dr.sc. D.Kermek, Fakultet organizacije i informatike, Varaždin2Izgradnja Web aplikacija - FOI

Uvod u Javascript jezik i koncept programiranja.

Programiranje događaja.

Razvoj dinamičkih osobina dokumenata.

Objektni model dokumenta (Document Object Model - DOM).

Programiranje na strani korisnika


Upravljanje događajima

Mnoge događaje koje se izvršavaju u pregledniku mogu se upravljati pomoću

njihovih rukovatelja. Slučaj u kojem se najviše koristi upravljanje događajima su

formulari/obrasci.

Ti različiti događaji odnose se na određene elemente (dokumenta, forme i dr.) i

dešavaju se nakon neke provedene radnje (korisnika, preglednika i dr.), a pridružen

im je određeni rukovatelj događaja.

Rukovatelj događaja ima ulogu da preuzme izvršavanje određenog programskog

koda nakon što se dogodi događaj za koji je zadužen rukovatelj. Svaki rukovatelji

događaja je poseban atribut u određenom html elementu/oznaki i počinje sa on

(onClick, onError, onLoad, onMouseOver,...)

Programiranjem rukovatelja događaja dokumenti postaju dinamički i aktivni.


Događaji i njihovi rukovatelji


Događaji i njihovi rukovatelji / 1.


Događaji i njihovi rukovatelji /2.


Hijerarhija ugrađenih objekata


Window

Atributi:•closed - ? zatvoren prozor.

•document - sadrži informaciju o važećem dokumentu i pruža metode za prikaz

HTML za korisnika.•frames - polje svih okvira u prozoru.

•history - sadrži informaciju o URL-ovima koje je korisnik posjetio u

prozoru.•innerHeight - određuje vertikalu dimenziju sadržaja prozora u pixelima.

•innerWidth - određuje vodoravnu dimenziju sadržaja prozora u pixelima.

•length - broj okvira u prozoru.

•location - informacija o važećem URL-u.

•name - jednoznačni naziv prozora.


Window / 1.

Atributi:•opener - naziv prozora dokumenta koji je otvorio prozor.

•outerHeight - određuje vertikalu dimenziju vanjske granice prozora u pixelima.

•outerWidth - određuje vodoravnu dimenziju vanjske granice prozora u pixelima

•pageXOffset - x-koordinata u pixelima.

•pageYOffset - y-koordinata u pixelima.

•parent - sinonim za prozor ili okvir čiji skup okvira sadrži važeći okvir.

•screenX - x-koordinata lijevog ruba prozora.

•screenY - y-koordinata gornjeg ruba prozora.

•self - sinonim za važeći prozor.

•status - tekst poruke statusa.

•top - sinonim za najgornji prozor.

•window - sinonim za važeći prozor.

•menubar - izbornik

•toolbar - alatna traka

•locationbar - adresna traka

•personalbar - osobna traka

•scrollbars - klizajuće trake

•statusbar - statusna traka


Window / 2.

Funkcije: •alert - prikazuje dijaloški okvir s porukom i OK gumbom.

•blur - miče fokus sa specificiranog objekta.

•clearInterval - poništvava vrijeme koje je postaljeno funkcijom setInterval.

•clearTimeout - poništvava vrijeme koje je postaljeno funkcijom setTimeout.

•close - zatvara prozor.

•focus - postavlja fokus na specificirani objekt.

•handleEvent - poziva rukovatelja za specificirani događaj.

•moveBy - miče prozor za određenu količinu.

•moveTo - postavlja prozor na određene koordinate.

•open - otvara novi prozor.

•print - poziva dijaloški okvir za ispis na pisač.


Window / 3.

Funkcije: •resizeBy - mijenja cijeli prozor mičući donji desni ugao za određenu količinu.

•resizeTo - mijenja veličinu prozora na određenu visinu i širinu.

•setInterval - ispituje izraz ili poziva fukciju nakon svakog proteka broja

milisekundi.•setResizable - određuje može li korisnik mijenjati veličinu prozora.

•setTimeout - ispituje izraz ili poziva fukciju nakon svakog proteka broja

milisekundi.•setZOptions - postavlja z-order prozora.

•stop - zaustavlja važeći download.


Window / 4.

Rukovatelji događaja:•onBlur

•onDragDrop

•onError

•onFocus

•onLoad

•onMove

•onResize

•onUnload

Window – onLoad() na funkciju

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<Title>FOI - Programiranje za Web : JavaScript - Primjer broj 05</title></head>

<script language=javascript>



</script>

<body onLoad=“dolaznaPoruka();” onUnload=“odlaznaPoruka();”

onFocus=“pozdravnaPoruka();”>

<h1>JavaScript skripte: Primjer broj 05</h1>

</body>

</html>

Objekti/Primjer05 – Window


Window – onLoad() na funkciju

<html><head>


<Title>FOI - Programiranje za Web : JavaScript - Primjer broj 05</title></head>

<script language=javascript>



</script>

<body>

<h1>JavaScript skripte: Primjer broj 05-0</h1>

</body>

</html>

Objekti/Primjer05_0 – Window


Window – onLoad() na JavaScript kod

<html><head>


<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_1</title></head>

<body

onLoad="alert('Poruka iz prozora ' + window.name + ': Stigao sam!!!');"

onUnload="alert('Poruka iz prozora ' + window.name + ': Odlazim...');"

onFocus="alert('Poruka iz prozora ' + window.name + ': Opet sam u

akciji!!!');">

<h1>JavaScript skripte: Primjer broj 05_1</h1>

</body>

</html>


neposredan upis

JavaScript koda

unutar navodnika


Window – onLoad() na više JavaScript koda

<html><head>



<body

onLoad="alert('Poruka iz prozora ' + window.name + ': Stigao sam 1!!!');

alert('Poruka iz prozora ' + window.name + ': Stigao sam 2!!!'); "

onUnload="alert('Poruka iz prozora ' + window.name + ': Odlazim...');"

onFocus="alert('Poruka iz prozora ' + window.name + ': Opet sam u

akciji!!!');">


</body>

</html>


neposredan upis više

linija JavaScript koda

unutar navodnika

Window – open()

<html><head>



<body>


<script language="JavaScript">



</SCRIPT>

</BODY>

</HTML>


otvaranje novog

prozora s datotekom,

nazivom i osobinama

prikaza


Window – resize(), preudo veze

<html><head>



<body>





</scripT>

Aktiviraj <a href="javascript:window2.focus();">dijete</a>.<br>

</body>

</html>


pseudo veza – poziva se

javascript funkcija kojom

se prebacuje fokus na drugi

prozor

podešavanje veličine

prozora

Window – prozor djeteta

<html><head>



<BODY>


Aktiviraj <a href="javascript:self.opener.focus();">roditelj</a>.<br>

</body>

</html>


pseudo veza – poziva se

javascript funkcija kojom

se prebacuje fokus na

prozor roditelja


Window - timer




</script>postavljanje funkcije koju

će pozivati timer i kada

globalna varijabla timera

brisanje timera


Window – timer / 1.

<body onLoad=“start();” onUnLoad=“stop();”>


<form id=form1 name=form1>

<input type="text" name="display" size="20">

</form>

Pokreni <a href="javascript:start();">sat</a>.<br>

Zaustavi <a href="javascript:stop();">sat</a>.<br>


osnovno pokretanje i

zaustavljanje timera

proizvoljno pokretanje

timera

proizvoljno zaustavljanje

timera



Moguće su kompleksnije varijante korištenja timera. Posebno kada se pokretanje i

zaustavljanje timera veže na događaje.




Potrebno je voditi brigu o broju instanci timera!

Svaka instanca radi samostalno i ukoliko se poveća njihov broj može doći do padanja

performansi računala!



Window – ispis na pisač

<html><head>


<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_A</title></head>

<body>

<h1>JavaScript skripte: Primjer broj 05_A</h1>

Pokreni <a href="javascript:self.print();">ispis</a> na pisač.<br>

</body>

</html>

Objekti/Primjer05_A – Window

Window - pogreška

<html><head>


<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_B</title></head>

<body>

<h1>JavaScript skripte: Primjer broj 05_B</h1>




</script>

</body>

</html>

Objekti/Primjer05_B – Window

pozivanje istog dokumenta

u prozor jedinstvenog

naziva


Window – povezivanje prozora




</script>

<a href="javascript:otvoriNovi();">Otvori prozor za poruke</a>.<br>

<a href="javascript:window3.document.writeln('Stiže poruka...<BR>');">Upiši u

prozor za poruke</a>.<br>

<a href="javascript:window3.close();">Zatvori prozor za poruke</a>.<br>

<a href="javascript:window2.close();">Zatvori prozor broj 2</a>.<br>

<a href="javascript:window.close();">Zatvori ovaj prozor</a>.<br>

</body>

Objekti/Primjer05_C – Window

Window – promjena URL-a

<html><head>


<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_D</title></head>

<body>

<h1>JavaScript skripte: Primjer broj 05_D</h1>

<scripT language="JavaScript">



</script>

<a href="javascript:otvoriNovi()">Promjeni URL</a>.<br>

</body>

</html>

Objekti/Primjer05_D – Window


Document

Atributi:•anchors - polje veza u dokumentu.

•applets - polje appleta u dokumentu.

•bgColor - string koji određuje BGCOLORBGCOLORBGCOLORBGCOLOR atribut.

•cookie - određuje cookie-kolačić.

•embeds - polje za plug-in dokumenta.

•fgColor - string koji određuje TEXTTEXTTEXTTEXT atribut.

•formName - posebno svojstvo za svaki imenovani formular u dokumentu.

•forms - polje formulara u dokumentu.

•images - polje slika u dokumentu.

•lastModified - string koj određuje datum posljednje promjene dokumenta.

•layers - polje za slojeve u dokumentu.

•linkColor - string koji određuje LINKLINKLINKLINK atribut.


Document / 1.

Atributi:•links - polje veza u dokumentu.

•location - informacija o važećem URL-u.

•plugins - polje za plug-in u dockmentu.

•title - string koji određuje TITLETITLETITLETITLE oznaku.

•URL - string koji određuje puni URL dokumenta.

•vlinkColor - string koji određuje VLINKVLINKVLINKVLINK atribut.

Funkcije: •close - zatvori izlazni tok i prikaži podatke.

•open - otvara tok za preuzimanje izlaza funkcija write ili writeln.

•write - ispisuje jedan ili više HTML izraza u dokument.

•writeln - ispisuje jedan ili više HTML izraza u dokument i znak za novu

liniju.


Document / 2.

Rukovatelji događaja:•onClick

•onDblClick

•onKeyDown

•onKeyPress

•onKeyUp

•onMouseDown

•onMouseUp

Document – naslov

<html><head>



<body>





</script>

<a href="javascript:noviNaslov()">Promjeni naslov dokumenta</a>.<br>

</body>

</html>

Objekti/Primjer06_1 – Document


Document – boje

<body>





</script>

<a href="javascript:novaBojaPozadine()">Promjeni boju pozadine</a>.<br>

<a href="javascript:novaBojaTeksta()">Promjeni boju teksta</a>.<br>

</body>

</html>

Document – informacije

<body>





</script>

<a href="javascript:izvorniKod()">Pregled izvornog koda dokumenta</a>.<br>

</body>

</html>



Document – veze

<body>


<a href="http://www.foi.hr">FOI</a>.<br>

<a href="http://www.carnet.hr">CARNet</a>.<br>

<a href="http://www.fer.hr">FER</a>.<br>

<br>




</script>

</body>

</html>


History

Atributi:•current - važeća adresa.

•length - broj elemenata u povijesti.


History / 1.

Funkcije: •back - prijelazi na prethodni element u povijesti.

•forward - prijelazi na sljedeći element iz povijesti.

•go - prijelaz za +/- elemenata u povijesti

History – šetnja

<html><head>



<body>



<!--

document.write("U povijesti ima " + window.history.length + " elemenata.<br>");

</script>

<a href="javascript:window.history.back()">Nazad</a>.<br>

<a href="javascript:window.history.forward()">Naprijed</a>.<br>

</body>

</html>

Objekti/Primjer07_1 – History


navigator

Atributi:•appCodeNameappCodeNameappCodeNameappCodeName Kodno ime preglednika.•appNameappNameappNameappName Naziv preglednika.•appVersionappVersionappVersionappVersion Verzija preglednika.•languagelanguagelanguagelanguage Prijevod korištenog preglednika.•mimeTypesmimeTypesmimeTypesmimeTypes Polje svih MIME tipova koje podržava klijent.•platformplatformplatformplatform Platforma za koju je preglednik kompiliran. •pluginspluginspluginsplugins Polje svih umetaka (plug-in-ova) koju su trenutno instalirani na

klijentu.•userAgentuserAgentuserAgentuserAgent Zaglavlje korisničkog agenta (http)Zaglavlje korisničkog agenta (http)Zaglavlje korisničkog agenta (http)Zaglavlje korisničkog agenta (http)....


navigator – informacije


<script language="javascript">

document.write("appName: ");

document.write(navigator.appName + "<br>");

document.write("appVersio: ");

document.write(navigator.appVersion + "<br>");

document.write("appCodeName: ");

document.write(navigator.appCodeName + "<br>");

document.write("platform: ");

document.write(navigator.platform + "<br>");

document.write("userAgent: ");

document.write(navigator.userAgent + "<br>");

document.write("javaEnabled(): ");

document.write(navigator.javaEnabled() + "<br>");

document.write("cookieEnabled: ");

document.write(navigator.cookieEnabled + "<br>");

document.write("plugins: ");

var plugins = navigator.plugins;

for(i=0;i < plugins.length;i++) { document.write(plugins[i] + " "); }

</script>

Objekti/Primjer08_1 – navigator


Korištena i dodatna literatura

http://www.angelfire.com/tx4/cus/notes/javascript.html

http://dir.yahoo.com/Computers_and_Internet/Programming_and_Develop

ment/Languages/JavaScript/

http://webreference.com/programming/javascript/

http://www.angelfire.com/tx4/cus/notes/javascript.html

http://javascript.internet.com/

http://www.jsworkshop.com/js15examples.html

kermek_iwa_17.pdf

Documents