Web programiranje
DHTML
DHTML
• Kombinacija tehnologija pomoću kojih se
može kontrolisati izgled stranice na
konzistentan način:
– HTML,
– CSS,
– ...
Slojevi
• Tag za sloj je <div> ili <span>
– razlika je u načinu prikaza: div je block
element, a span je inline element
• ...
Stilovi za slojeve
• position – određuje poziciju elementa (static, absolute, relative,
fixed)
– static – element se iscrt...
Document Object Model (DOM)
• DOM predstavlja objektnu reprezentaciju XML
dokumenta.
• JavaScript poseduje skup funkcija z...
DOM Level 0
• DOM Level 0 omogućuje pristup elementima stranice
preko predefinisanih objekata.
window
document
links[] anc...
DOM Level 1-3
• DOM nivoi 1-3 predstavljaju
objektnu reprezentaciju
sadržaja HTML dokumenta
• Primer:
<html>
<head>
<title...
DOM reprezentacija
• HTML dokument se posmatra kao stablo koje se
sastoji iz elemenata
• Koren stabla je <html> tag
• Svak...
DOM Stablo
• Svaki HTML dokument se posmatra kao
DOM stablo
• Čvor na vrhu se zove korenski čvor
• Svaki čvor osim korensk...
<html>
<head>
<title>Naslov</title>
</head>
<body>
<p>
Tekst
<a href="abc">link</a>
</p>
</body>
</html>
DOM Stablo
docume...
DOM i JavaScript
• DOM objektima se može pristupiti jedino iz
skripta.
• JavaScript poseduje atribute i metode za pristup
...
Objekat document
• Atributi:
– document.documentElement – dokument čvor
• Metode:
– document.getElementById(id) – vraća el...
Objekat tipa čvor (node)
• Atributi:
– nodeName – ime čvora
– nodeType – tip čvora (1 za HTML tagove, 2 za atribute, 3 za ...
Objekat tipa čvor (node)
• Metode:
– appendChild(čvor) – dodaje tekućem čvoru novi čvor,
na kraj prvog nivoa ispod u hijer...
Veza između JavaScript-a i stilova
• Sloju se dodeli ID:
<div id="aName" style="position...”>...</div>
• Registruje se Jav...
Veza između JavaScript-a i stilova
• Iz JavaScript-a se elementima HTML
stranice pristupa preko DOM modela:
target = docum...
Primer
• Listanje svih <p> tagova u dokumentu:
<html>
<body>
<p>Jedan paragraf</p>
<div>
<p>Drugi paragraf</p>
<p>Treći pa...
Primer
Primer
• Ispis prvog potomka zadatog <p> taga:
<html>
<body>
<p id="intro">Jedan paragraf</p>
<div>
<p>Drugi paragraf</p>
...
Primer
Primer
• Drag and Drop
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Primer d...
Primer
Primer
• Drop down navigacija
<html>
<head>
<script type="text/javascript">
function go()
{
location=document.forms[0].gow...
Primer
Primer
• Horizontalni meni
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:bl...
Primer
Primer
• Meni koji je uvek pri vrhu stranice bez obzira na skrolovanje
<html>
<head>
<script type="text/javascript">
var t...
Primer
Primer
• Meni sa drugačijim borderom nad selektovanom stavkom
<html>
<head>
<script type="text/javascript">
function inset...
Primer
Primer
• Meni sa objašnjenjem kada se pređe mišem preko stavke
<html>
<head>
<style>
table
{
background:black;
}
a
{
text-...
Primer
Primer
• Meni sa slikom koja se prikaže kada se pređe
mišem preko stavke
<html>
<head>
<style>
table
{
background:black;
}...
Primer
Upcoming SlideShare
Loading in...5
×

4 dhtml

162

Published on

World Wide Web (Web) je svjetska mreža računala s izvorima (engl. resources) digitalne informacije. S obzirom na raznolikost digitalne informacije: tekst, slika, zvuk, video, program i dr. govorimo općenito o izvoru informacije ili WEB dokumentu. WEB programiranje se oslanja na tri mehanizma koja čine ove izvore dostupnima najširoj svjetskoj javnosti:
1.
Jedinstvena shema imena za traženje (lociranje) izvora na mreži.
2.
Protokoli za pristup informaciji preko WEB-a, kao što je npr. HTTP protokol. Protokoli su skup standardizirane informacije za prijenos digitalnog sadržaja preko mreže.
3.
Hipertekst (engl. Hypertext) za jednostavnu navigaciju između informacijskih izvora, kao što je na primjer HTML (hypertext markup language).
Svaki izvor informacije na WEB-u (HTML ili XML dokument, slika, video, program i sl.) ima jednoznačnu adresu koja se dekodira preko URI-a (Universal Resource Identifier). URI se sastoji od tri dijela:
1.
Protokola pristupa izvoru (npr. http, ftp, mailto i sl.)
2.
Imena stroja na kojem se izvor informacije nalazi (npr. www.fsb.hr).
3.
Punog imena izvora zadanog stazom (engl. path).
URI ima različite uloge: povezivanje mjesta unutar istog dokumenta, povezivanje različitih dokumenata, dohvaćenje slika, objekat

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
162
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

4 dhtml

  1. 1. Web programiranje DHTML
  2. 2. DHTML • Kombinacija tehnologija pomoću kojih se može kontrolisati izgled stranice na konzistentan način: – HTML, – CSS, – JavaScript, – DOM • Unutar HTML-a se uglavnom koriste slojevi (layers)
  3. 3. Slojevi • Tag za sloj je <div> ili <span> – razlika je u načinu prikaza: div je block element, a span je inline element • Uglavnom se “obogaćuje” CSS atributima • Primer: <div id=“sloj1” style=“position:absolute;left:100;top:50”> Tekst unutar sloja </div>
  4. 4. Stilovi za slojeve • position – određuje poziciju elementa (static, absolute, relative, fixed) – static – element se iscrtava zajedno sa ostatkom HTML stranice i ne može da se pomera, default, – absolute – pozicionira se na fiksnu poziciju određenu atributima top i left, – relative – relativna pozicija u odnosu na normalno sračunatu poziciju u odnosu na ostatak HTML stranice – fixed – kao apsolutno pozicioniranje, samo što se sadržaj ne skroluje sa stranicom, zato što se pozicionira u odnosu na ivice prozora čitača. • left – horizontalna pozicija elementa • top – vertikalna pozicija elementa • right, bottom – alternativno pozicioniranje u odnosu na left/top • width, height – širina i visina elementa • z-index – redosled iscrtavanja elementa
  5. 5. Document Object Model (DOM) • DOM predstavlja objektnu reprezentaciju XML dokumenta. • JavaScript poseduje skup funkcija za rad sa DOM objektima. • Postoji više nivoa reprezentacije: – DOM Level 0 i – DOM Level 1, – DOM Level 2, – DOM Level 3.
  6. 6. DOM Level 0 • DOM Level 0 omogućuje pristup elementima stranice preko predefinisanih objekata. window document links[] anchors[]images[] form elements forms[]DOM level 1 history location frame anchors[]
  7. 7. DOM Level 1-3 • DOM nivoi 1-3 predstavljaju objektnu reprezentaciju sadržaja HTML dokumenta • Primer: <html> <head> <title>Naslov</title> </head> <body> <p>Tekst</p> </body> </html> document html head body title Naslov p Tekst
  8. 8. DOM reprezentacija • HTML dokument se posmatra kao stablo koje se sastoji iz elemenata • Koren stabla je <html> tag • Svaki HTML tag je čvor tipa element u stablu • Svaki atribut je čvor tipa atribut u stablu • Svaki tekst je čvor tipa tekst (tekstualni čvor) u stablu • Svaki komentar je čvor tipa komentar u stablu
  9. 9. DOM Stablo • Svaki HTML dokument se posmatra kao DOM stablo • Čvor na vrhu se zove korenski čvor • Svaki čvor osim korenskog ima jednog roditelja (čvor iznad) • Svaki čvor može da ima potomke (decu – čvorovi ispod) • List je čvor bez dece • Čvorovi istog nivoa (sibiling) su čvorovi sa istim roditeljem
  10. 10. <html> <head> <title>Naslov</title> </head> <body> <p> Tekst <a href="abc">link</a> </p> </body> </html> DOM Stablo document html head body title "Naslov" p a"Tekst" "link" href= "abc"
  11. 11. DOM i JavaScript • DOM objektima se može pristupiti jedino iz skripta. • JavaScript poseduje atribute i metode za pristup DOM elementima. • Osnovni element je document objekat. – On sadrži sve čvorove DOM stabla koji reprezentuju HTML stranicu • Obično se elementima HTML stranice doda atribut id da bi se lakše pronašli u DOM stablu: <p id=“paragraf”>Tekst</p>
  12. 12. Objekat document • Atributi: – document.documentElement – dokument čvor • Metode: – document.getElementById(id) – vraća element sa zadatim id-om – document.getElementsByTagName(name) – vraća elemente koji se zovu kao zadati parametar – document.createElement(tag) – kreira novi element sa zadatim imenom – document.createTextNode(tekst) – kreira tekstualni čvor sa zadatim tekstom
  13. 13. Objekat tipa čvor (node) • Atributi: – nodeName – ime čvora – nodeType – tip čvora (1 za HTML tagove, 2 za atribute, 3 za tekstualne čvorove, 8 za komentar, 9 za dokument) – nodeValue – sadržaj tekstualnog čvora – innerHTML – sadržaj čvora kao HTML – id – ID čvora – firstChild, lastChild – prvi/poslednji čvor ispod u hijerarhiji – childNodes – niz čvorova koji su u prvom nivou ispod, u hijerarhiji – parentNode – objekat koji sadrži tekući čvor • Atributi stila – svaki čvor ima atribut stila – style: – cvor.style.top=10 – stil {top:10} – cvor.style.visibility=“visible” – stil {visibility:visible} • Ako je naziv stila sa crticom, u JavaScriptu se spaja i koristi veliko slovo: – cvor.style.borderWidth = 0 – stil {border-width:0}
  14. 14. Objekat tipa čvor (node) • Metode: – appendChild(čvor) – dodaje tekućem čvoru novi čvor, na kraj prvog nivoa ispod u hijerarhiji – insertBefore(čvor, drugi) – ubacuje zadati čvor ispred drugog čvora – removeChild(čvor) – uklanja zadati čvor iz stabla – getAttribute(ime) – vraća vrednost zadatog atributa – setAttribute(ime, vrednost) – postavlja vrednost atributa – removeAttribute(ime) – uklanja zadati atribut – hasAttributes() – vraća true ako tekući čvor ima atribute
  15. 15. Veza između JavaScript-a i stilova • Sloju se dodeli ID: <div id="aName" style="position...”>...</div> • Registruje se JavaScript funkcija za neki tip događaja: <div id=“file” onmouseover="showmain(this)" > • Ako je potrebno da se event handler definiše na nivou dokumenta, radi se ovako: function init() { document.onmousedown=engage; document.onmousemove=dragLayer; document.onmouseup=disengage; }
  16. 16. Veza između JavaScript-a i stilova • Iz JavaScript-a se elementima HTML stranice pristupa preko DOM modela: target = document.getElementById(neki_id); • Atributi stila proizvoljnog elementa se menjaju preko atributa style elementa: target.style.display = “none"; • Ako atribut ima ‘-’ u imenu, izbaci se ‘-’ i stavi veliko slovo: target.style.borderWidth = 0;
  17. 17. Primer • Listanje svih <p> tagova u dokumentu: <html> <body> <p>Jedan paragraf</p> <div> <p>Drugi paragraf</p> <p>Treći paragraf</p> </div> <script type="text/javascript"> x=document.getElementsByTagName("p"); document.write("<ul>"); for (i=0;i<x.length;i++) { document.write("<li>" + x[i].innerHTML + "</li>"); } document.write("</ul>"); </script> </body> </html>
  18. 18. Primer
  19. 19. Primer • Ispis prvog potomka zadatog <p> taga: <html> <body> <p id="intro">Jedan paragraf</p> <div> <p>Drugi paragraf</p> <p>Treći paragraf</p> </div> <script type="text/javascript"> x=document.getElementById("intro"); document.write("Sadržaj prvog paragrafa: " + x.firstChild.nodeValue); </script> </body> </html>
  20. 20. Primer
  21. 21. Primer • Drag and Drop <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Primer drag & drop tehnike</title> <script type="text/javascript"> var engaged=null; function engage(e) { // x i y koordinate klika na ekranu var Xin = (navigator.appName.indexOf("Internet Explorer")==-1)? e.clientX : event.clientX; var Yin = (navigator.appName.indexOf("Internet Explorer")==-1)? e.clientY : event.clientY; var stil = document.getElementById("aName").style; // left i top od lejera var L = parseFloat(stil.left); var T = parseFloat(stil.top); // width i height od lejera var W = parseFloat(stil.width); var H = parseFloat(stil.height); // samo ako smo kliknuli unutar pravougaonika if(Xin > L && Xin < (L + W) && Yin > T && Yin < (T + H)) { engaged=true; moveX = Xin - L; moveY = Yin - T; return; } engaged=null; } function disengage(){ if(engaged==null){ return false; } moveX=null; moveY=null; engaged=null; } function dragLayer(e){ if(engaged==null){ return false; } var Xin = (navigator.appName.indexOf("Internet Explorer")==-1)? e.clientX : event.clientX; var Yin = (navigator.appName.indexOf("Internet Explorer")==-1)? e.clientY : event.clientY; var stil=document.getElementById("aName").style; stil.left = Xin - moveX; stil.top = Yin - moveY; } function inicijalizacija() { document.onmousedown=engage; document.onmousemove=dragLayer; document.onmouseup=disengage; } </script> </head> <body onload="inicijalizacija()" > <div id="aName" style="position:absolute; left: 40px;top: 40px; z-index: 3; visibility: visible;width: 300;height: 50;background-color: #ffffff;color:#000000;padding: 2;border-style: solid;border-width: 2;border-color: #0000ff"> Ovo je tekst. </div> </body> </html> drag-and-drop.html
  22. 22. Primer
  23. 23. Primer • Drop down navigacija <html> <head> <script type="text/javascript"> function go() { location=document.forms[0].gowhere.value; } </script> <style type="text/css"> .style1 {color: #FF0000} </style> </head> <body> <form> <select id="gowhere" onchange="go()"> <option>-Izaberite lokaciju- <option value="http:///www.grid.ns.ac.yu">GRID</option> <option value="http:///www.ftn.ns.ac.yu">FTN </option> <option value="http:///www.kba.de">KBA </option> </select> </form> <span class="style1">Napomena: Ovde ima bug. Kada se izabere "-Izaberi lokaciju-", program i dalje radi redirekciju. </span> </body> </html> drop_down.html
  24. 24. Primer
  25. 25. Primer • Horizontalni meni <html> <head> <style> body{font-family:arial;} table{font-size:80%;background:black} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <h3>Drop down menu</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onMouseOver="showmenu('tutorials')" onMouseOut="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td onMouseOver="showmenu('scripting')" onMouseOut="hidemenu('scripting')"> <a href="/default.asp">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td onMouseOver="showmenu('validation')" onMouseOut="hidemenu('validation')"> <a href="/site/site_validate.asp">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr> <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr> </table> </td> </tr> </table> <p>Postavite kursor iznad stavki menija da biste videli sadrzaje menija. </p> </body> </html> horizontalni_meni.html
  26. 26. Primer
  27. 27. Primer • Meni koji je uvek pri vrhu stranice bez obzira na skrolovanje <html> <head> <script type="text/javascript"> var timer; function scrolltop() { document.getElementById('scrollmenu').style.top=document.body.scrollTop; timer=setTimeout("scrolltop()",1); } function stoptimer() { clearTimeout(timer); } </script> </head> <body onLoad="scrolltop()" onUnload="stoptimer()"> <span id="scrollmenu" style="position:absolute"> <b>Meni</b><br /> <a href="http://www.w3schools.com">W3Schools</a><br /> <a href="http://www.microsoft.com">Microsoft</a><br /> <a href="http://www.altavista.com">Altavista</a><br /> </span> <table border="0" width="100%"> <tr> <td width="100"> </td> <td>Skrolujte stranicu da vidite &quot;uvek-na-vrhu&quot; meni <br /><br /><br /><br /><br /> Skrolujte stranicu da vidite &quot;uvek-na-vrhu&quot; meni <br /><br /><br /><br /><br /> </td> </tr> </table> </body> </html> meni_scroll_top.html
  28. 28. Primer
  29. 29. Primer • Meni sa drugačijim borderom nad selektovanom stavkom <html> <head> <script type="text/javascript"> function inset(elmnt) { elmnt.style.borderStyle="inset"; } function outset(elmnt) { elmnt.style.borderStyle="outset"; } </script> <style> td { background:C0C0C0; border:2px outset; } </style> </head> <body> <table width="80"> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="/default.asp">HOME</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="http://www.microsoft.com">Explorer</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="http://my.netscape.com">Navigator</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="http://www.altavista.com">AltaVista</a></td></tr> <tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="http://www.yahoo.com">Yahoo! </a></td></tr> </table> </body> </html> menu_borders.html
  30. 30. Primer
  31. 31. Primer • Meni sa objašnjenjem kada se pređe mišem preko stavke <html> <head> <style> table { background:black; } a { text-decoration:none; color:#000000; } th { width:150px; background:#FF8080; } td { font:bold; background:#ADD8E6; } </style> <script type="text/javascript"> function gettip(txt) { document.getElementById('tip').innerHTML=txt; } function reset() { document.getElementById('tip').innerHTML=" "; } </script> </head> <body> <b>Postavite kursor iznad linkova da vidite opise pojmova </b><br /> <table width="400px"> <tr> <th> <a href="http://www.w3schools.com" onmouseover="gettip('W3Schools is the best Web Developers resource on the Web')" onmouseout="reset()">W3Schools.com</a> </th> <td rowspan="3" id="tip"> </td> </tr> <tr> <th> <a href="http://www.microsoft.com" onMouseOver="gettip('Internet Explorer is winning the browser war')" onmouseout="reset()">Internet Explorer</a> </th> </tr> <tr> <th> <a href="http://my.netscape.com" onMouseOver="gettip('The Navigator is Netscapes browser tribute to web surfers')" onmouseout="reset()">Netscape Navigator</a> </th> </tr> </table> </body> </html> menu_mouseover_description.html
  32. 32. Primer
  33. 33. Primer • Meni sa slikom koja se prikaže kada se pređe mišem preko stavke <html> <head> <style> table { background:black; } a { text-decoration:none; color:#000000; } th { width:150px; background:#FF8080; } td { font:bold; background:#ADD8E6; } </style> <script type="text/javascript"> function gettip(image) { document.getElementById('tip').innerHTML="<img src='" + image + "' />"; } function reset() { document.getElementById('tip').innerHTML=" "; } </script> </head> <body> <b>Postavite kursor iznad linkova da vidite logo pojmova</b><br /> <table width="400px"> <tr> <th> <a href="/default.asp" onmouseover="gettip('w3schools.gif')" onmouseout="reset()">W3Schools.com</a> </th> <td rowspan="3" id="tip" align="center" valign="center"> </td> </tr> <tr> <th> <a href="http://www.microsoft.com" onmouseover="gettip('microsoft.gif')" onmouseout="reset()">Internet Explorer</a> </th> </tr> </tr> <tr> <th> <a href="http://my.netscape.com" onmouseover="gettip('netscapelink.gif')" onmouseout="reset()">Netscape Navigator</a> </th> </tr> </table> </body> </html> menu_mouseover_logo.html
  34. 34. Primer
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×