kermek iwa 19

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]

19. 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


DOM i BOM

DOM - Document Object Model. •pohranjuje informacije o važeće učitanom dokumentu

BOM - Browser Object Model. •ponaša se slično kao DOM samo što sadrži i informacije o korisniku

sustava, tipu preglednika, lokaciji u važećem dokumentu, rezulociju ekrana,

povijesti preglednika, hijerarhiji okvira i druge detalje.

Radi se spajanju HTML-a, JavaScript-a, CSS-a.


DOM – što je?

DOM - Document Object Model. •je API za ispravne HTML i pravilno formirane XML dokumente.

•određuje logičku strukturu dokumenta i način kako se pristupa dokumentu i s

njime manipulira.

•s njime programeri mogu graditi dokumente, navigirati njihovu strukturu,

dodati, mjenjati i brisati elemente i sadržaj.

•sve što se nađe u HTML ili XML dokumentu može biti pristupano, mjenjano,

brisano ili dodano korištenjem DOM-a, uz nekoliko iznimaka (DOM sučelja za

XML unutarnje i vanjske podskupove još nisu specificirana).

•postoji posebno značajno korištenje DOM-a kod programskog jezika Java


DOM – za tablicu

<HTML>

<HEAD></HEAD>

<BODY>

<TABLE>

<TBODY>

<TR>

<TD>Shady Grove</TD>

<TD>Aeolian</TD>

</TR>

<TR>

<TD>Over the River, Charlie</TD>

<TD>Dorian</TD>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>


DOM – struktura tablice

DOM – što se može?

DOM - Document Object Model. •pogledati svaki atribut bilo kojeg objekta

•dodjeliti vrijednost svakom atributu (osim ako nije samo za čitanje)

•rukovatelju događaja u objektu dodjeliti funkcija koju će pozivati

•rukovatelju događaja u objektu oduzeti funkciju pa više neće pozivati

property = "innerText";

document.forma.text[property] = ...

document.forma.text.innerText = ...

document.all.text

document.getElementById("menu");

2 pristupa do atributa

vraća polje objekata

koji imaju ID text

vraća objekt koji ima

ID menu ili polje

objekata koji imaju

ID menu


DOM – primjer 1

<html><head>

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

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

<body>

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

<script language="JavaScript">



</SCRIPT>


DOM – primjer 1/1.

<body>

<form name="forma">

<input type="text" name="text"><br>

<a href="javascript:prikazi();">Prikaži</a>

</form>

</body>

</html>

DOM/Primjer11_1 – DOM



accessKey:

align:

all: [object]

alt:

attributes: [object]

behaviorUrns: [object]

border:

canHaveChildren: false

checked: false

childNodes: [object]

children: [object]

className:

clientHeight: 18

clientLeft: 2

clientTop: 2

clientWidth: 151

complete: false

currentStyle: [object]

dataFld:

dataFormatAs:

dataSrc:

defaultChecked: false

dir:

disabled: false

document: [object]

dynsrc:

filters: [object]

firstChild: null

form: [object]

height: 34933064

hspace: 0

id:

indeterminate: false

innerHTML:

innerText:

isTextEdit: true

lang:

language:

lastChild: null

loop: 1

lowsrc:

maxLength: 2147483647

name: text

nextSibling: [object]

nodeName: INPUT

nodeType: 1

nodeValue: null

offsetHeight: 22

offsetLeft: 10

offsetParent: [object]

offsetTop: 71

offsetWidth: 155

onabort: null

onafterupdate: null

onbeforecopy: null

.....

src:

start: fileopen

status: false

style: [object]

tabIndex: 0

tagName: INPUT

tagUrn:

title:

type: text

value:

vrml:

vspace: 0

width: 0

DOM – primjer 2

<html><head>



<body>


<P onmouseover="style.color='red'" onmouseout="style.color='black'">1. red.</P>

<P onmouseover="style.color='green'" onmouseout="style.color='black'">2. red.</P>

<P onmouseover="style.color='blue'" onmouseout="style.color='black'">3. red.</P>

</body>

</html>



DOM – primjer 3

<html><head>






</script>

<body onload="postavi();">


<p>Prvi red.</p>

<p>Drugi red.</p>

<p>Treći red.</p>

</body>

</html>



DOM – primjer 4

<html><head>






</script>

<body onload="scroll();">


<div style="position:absolute;overflow:hidden;top:100;left:100;width:200;

height:100;background-color:yellow">

<span id="sctext" style="position:relative;top:100;left:0;width:200;height:100">

Na studentskim izborima, koji se održavaju svake druge godine, studenti svake

studijske godine matičnog fakulteta

biraju svog predstavnika u Fakultetsko vijeće.

Fakultetsko vijeće je stručno vijeće nekog fakulteta koje, izmedu ostalog

predlaže nove obrazovne, znanstvene i

stručne programe, te daje mišljenje o prijedlozima novih nastavnih i obrazovnih

programa na sveučilištu.

</span>

</div>

</body>

</html>



DOM – primjer 5

<style type=text/css>

.OK { background: white; color: black }

.krivo { background: red; color: black }

</style>

<body>


<script language=“JavaScript”>

<!--

function provjeri(pForma)

{

if(pForma.naziv.value.length < 5)

{

alert("Niste upisali dovoljno znakova!");

pForma.naziv.className="krivo";

pForma.naziv.focus();

return false;

}

else

{

alert("OK!");

pForma.naziv.className="OK";

return true;

}

}

<form name=forma onsubmit="return provjeri(this);">

Naziv tvrtke: <input name=“naziv” class=“OK” size=“30” maxlength=“30”><br>

<input type=“submit” value=“Upiši”>

</form>

</body>

</html>



DOM – primjer 6

<html><head>




<!--

function prikaziSlike()

{

i=0;

for(j=0;j < document.all.slika.length;j++) // svi objekti s ID=slika

{

with(document.all.slika[j])

{

src = slikaN[i]; // naziv slike

i = (i + 1)%slikaN.length; // indeks prema nazivima slika

style.visibility = "visible"; // postavi vidljivim

style.position = "absolute"; // pozicija apsolutna

style.top = Math.round(Math.random() * maxHeight); // gornja koordinata

style.left = Math.round(Math.random() * maxWidth); // lijeva koordinata

}

}

}



}

}

}

function misKlik() // aktivira se kod dogadaja onclik

{

alert(this.innerText);

dodajMenu(this.innerText);

}

function misNa() // aktivira se kod dogadaja onmouseover

{

this.className = "aktiv"; // postavljanje naziva CSS klase

this.style.cursor = "hand"; // postavljenje kursora

window.status = "Iznad: " + this.innerText;

}

function misSa() { // aktivira se kod dogadaja onmouseout

this.className = "normal"; // postavljanje naziva CSS klase

window.status = "";

}



function dodajMenu(pText)

{

obj = document.getElementById("menu"); // objekti s ID=izbornik

novaO = new Option(pText, obj.length); // nova opcija izbornika

eval("obj.options[obj.length] = novaO;");// evaluacija koda

obj.options.selectedIndex = obj.options.length - 1;

// postavljanje izbora na posljednjeg

}



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

http://www.w3.org/TR/REC-DOM-Level-1/

http://www.w3.org/TR/DOM-Level-2-Core

http://www.w3.org/TR/DOM-Level-2-Style/

http://www.people.fas.harvard.edu/~dbaron/dom/test/

http://www.oasis-open.org/cover/dom.html

http://www.xs4all.nl/~ppk/js/index.html?version5.html

kermek iwa 19

Documents