Javascript, DOM, DHTML · JavaScript je programski jezik više razine osmišljen da doda interaktivnost na web stranice. Objektno orijentirani jezik Untyped –tip podatka ne mora

Javascript, DOM, DHTML

DHTML Dynamic HTML

Kako napraviti web stranice interaktivnim i dimamičnim

Korištenjem:

CSS-a

JavaScripta

DOM

Eventa

2

Klijentsko i serversko skriptiranje (2)

Važno je znati što se može obaviti klijentskim, a što serverskim skriptiranjem

3

Internet

1. Klijent zahtjeva web-stranicu2. Poslužitelj prima zahtjev i učitava traženu stranicu

3. Izvršavaju se serverske skripte na stranici4. Rezultat je HTML stranica

koja se šalje natrag klijentu

5. Klijent primastranicu i prikazujeju u pregledniku

6. Izvršavaju seklijentske skripte

Što je JavaScript? JavaScript je programski jezik više razine

osmišljen da doda interaktivnost na web stranice.

Objektno orijentirani jezik

Untyped – tip podatka ne mora biti specificiran

JavaScript je skriptni jezik – nije ga potrebno kompajlirati – izvršava se liniju po liniju

Po sintaksi jako sličan Javi i C-u

4

Kako uključiti JS u HTML stranice? Skripte napisane u body dijelu izvršiti će se dok se

stranica učitava.

Skripte napisane u head dijelu izvršiti će se tek kada ih pozovemo.

5

Objekti Velik broj ugrađenih klasa

Klasa:

Svojstva

Metode

Objekt klase

(Object, Number, String, Date, Array, Boolean, Math, RegExp.....)

DOM Document Object Model

Standard za pristupanje dijelovima dokumenata (HTML,XML)

Razine

Core DOM

XML DOM

HTML DOM

Definira objekte dokumenta, svojstva objekata i metode za pristup svojstvima

HTML DOM (Document Object Model) The W3C Document Object Model (DOM) is a platform and

language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

HTML DOM je Document Object Model za HTML

HTML DOM je neovisan o platformi i jeziku

HTML DOM definira standardni skup objekata za HTML, i standardni način pristupa HTML dokumentu

HTML DOM je W3C standard

8

DOM Kad učitamo stranicu u preglednik, on stvori

određen broj objekata s obzirom na sadržaj stranice.

Objekti koje svaka stranica ima su: window objekt naviše razine, sadrži svojstva koja se

odnose na čitav prozor

location sadrži svosjtva tekuće URL adrese

history sadrži svojstva URL-ova koje je korisnik prije posjetio

document sadrži svojstva sadržaja tekućeg dokumenta, kao što su naziv, pozadinska boja i formular

9

Client-side object hierarchy

10

windowwindow

self,...self,...

navigatornavigator

frames[]frames[]

locationlocation

historyhistory

documentdocument

screenscreen

forms[]forms[]

anchors[]anchors[]

links[]links[]

images[]images[]

applets[]applets[]

embeds[]embeds[]

elements[]

such as the

input objects

and the

textarea

object

elements[]

such as the

input objects

and the

textarea

object

Level 0 DOMLevel 0 DOM

Ukoliko definiramo nekoliko tekstualnih elemenata:<FORM NAME="iskaznica">

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

<input type="text" name="dob" size=3>

ovi elementi se zrcale u JavaScript objekte: document.iskaznica.ime i document.iskaznica.dob

koje možemo koristiti bilo gdje, nakon što je formular definiran.

Možemo ih ispisati u skripti, koju pišemo nakon što je formular definiran:

<SCRIPT>

document.write(document.iskaznica.ime)

document.write(document.iskaznica.dob)

</SCRIPT>12

Document Document je najkorisniji objekt. Zbog toga što ima write i writeln metode može generirati HTML kod, pa tako imamo:

document.write(“Dobar dan!")

što daje izlaz:

Dobar dan!

13

document.write()Dodavanje dinimičkog sadržaja u stranicu

<html>

<body>

<script type="text/javascript">

document.write(Date());

</script>

</body>

</html>

14

JavaScript i HTML DOM Sa HTML 4, JavaScript se može koristiti za dinamičko

mijenjanje unutarnjih HTML elemenata i atributa

Za promjenu sadržaja unutar HTML elementa:

document.getElementById(id).innerHTML=new HTML

Za promjenu HTML atributa:

document.getElementById(id).attribute=new value

15

HTML DOM metode i svojstva najčešće korištene metode HTML DOM

getElementById(id) - get the node (element) with a specified id

appendChild(node) - insert a new child node (element)

removeChild(node) - remove a child node (element)

najčešće korištena HTML DOM svojstva innerHTML - the text value of a node (element)

parentNode - the parent node of a node (element)

childNodes - the child nodes of a node (element)

attributes - the attributes nodes of a node (element)

Dohvaćanje elemenata getElementById()

getElementsByTagName()

getElementsByClassName()

document.getElementById("intro");

document.getElementsByTagName("p");

document.getElementById("main").getElementsByTagName("p");

document.getElementsByClassName("intro");

document.getElementById<script type="text/javascript">

function notEmpty()

{

var myTextField = document.getElementById('myText'); if(myTextField.value != "")

alert(“Upisali ste: " + myTextField.value)

else alert("Would you please enter some text?")

}

</script>

<input type='text' id='myText' />

<input type='button' onclick='notEmpty()' value='Form Checker' />

JavaScript i HTML Eventi Jednostavan primjer događaja bi bio – ukoliko korisnik

klikne na određeni element, izvršava se JavaScript kod:

onclick=JavaScript

19

JavaScript i CSS Uz pomoć HTML 4 i JavaScript-a može se mijenjati i stil.

Za promjenu stila određenog HTML dokumenta:

document.getElementById(id).style.property=new style

20

EventiHTML 4 event handlers:

onabort a user aborts page loading

onblur a user leaves an object

onchange a user changes the value of an object

onclick a user clicks on an object

ondblclick a user double-clicks on an object

onfocus a user makes an object active

onkeydown a keyboard key is on its way down

onkeypress a keyboard key is pressed

onkeyup a keyboard key is released

21

EventiHTML 4 event handlers:

onload a page is finished loading

onmousedown a user presses a mouse-button

onmousemove a cursor moves on an object

onmouseover a cursor moves over an object

onmouseout a cursor moves off an object

onmouseup a user releases a mouse-button

onreset a user resets a form

onselect a user selects content on a page

onsubmit a user submits a form

onunload a user closes a page

22

Objekti HTML DOM-a

23

Represents a checkbox on an HTML form. For each instance of an

HTML <input type="checkbox"> tag on an HTML form, a

Checkbox object is created

Checkbox

Represents a push button on an HTML form. For each instance of an

HTML <input type="button"> tag on an HTML form, a Button

object is created

Button

Represents the body of the document (the HTML body)Body

Represents an HTML basefont elementBasefont

Represents an HTML base elementBase

Represents an area of an image-map. An image-map is an image

with clickable regions

Area

Represents an HTML applet element. The applet element is used to

place executable content on a page

Applet

Represents an HTML a element (a hyperlink)Anchor

DescriptionObject

Objekti HTML DOM-a

24Represents an HTML inline-frameIframe

A predefined object which can be accessed through the history property of

the Window object. This object consists of an array of URLs. These URLs

are all the URLs the user has visited within a browser window

History

Represents a hidden field on an HTML form. For each instance of an HTML

<input type="hidden"> tag on a form, a Hidden object is created

Hidden

Represents an HTML framesetFrameset

Represents an HTML frameFrame

Forms are used to prompt users for input. Represents an HTML form

element

Form

For each instance of an HTML <input type="file"> tag on a form, a

FileUpload object is created

FileUpload

Represents the state of an event, such as the element in which the event

occurred, the state of the keyboard keys, the location of the mouse, and

the state of the mouse buttons

Event

Used to access all elements in a pageDocument

25

Represents a selection list on an HTML form. For each instance of an HTML

<select> tag on a form, a Select object is created

Select

Automatically created by the JavaScript runtime engine and it contains

information about the client's display screen

Screen

Represents a reset button on an HTML form. For each instance of an HTML

<input type="reset"> tag on a form, a Reset object is created

Reset

Represents radio buttons on an HTML form. For each instance of an HTML

<input type="radio"> tag on a form, a Radio object is created

Radio

Represents a password field on an HTML form. For each instance of an

HTML <input type="password"> tag on a form, a Password object is created

Password

Represents an option in a selection list on an HTML form. For each instance

of an HTML <option> tag in a selection list on a form, an Option object is

created

Option

Contains information about the client browserNavigator

Represents an HTML meta elementMeta

Contains information about the current URLLocation

Represents an HTML link element. The link element can only be used within

the <head> tag

Link

Represents an HTML img elementImage

26

Corresponds to the browser window. A Window object is created automatically

with every instance of a <body> or <frameset> tag

Window

Represents an HTML textarea elementTextarea

Represents a text field on an HTML form. For each instance of an HTML

<input type="text"> tag on a form, a Text object is created

Text

Represents an HTML tr elementTableRow

Represents an HTML th elementTableHeader

Represents an HTML td elementTableData

Represents an HTML table elementTable

Represents a submit button on an HTML form. For each instance of an HTML

<input type="submit"> tag on a form, a Submit object is created

Submit

Represents an individual style statement. This object can be accessed from

the document or from the elements to which that style is applied

Style

JavaScript biblioteke Olakšavaju napredno JavaScript programiranje

Štede vrijeme

Pomoćne biblioteke

Često se zovu frameworci

Najpopularnije:

jQuery

Prototype

MooTools

jQuery

jQuery je najpopularniji JS framework na Internetu

Koristi selektore slične css selektorima

Dodatni framework za korisničko sučelje

Plug-in ovi

Prihvaćaju ga sve velike kompanije (Google, Microsoft, Ibm, Netflix

jQuery jQuery je JavaScript biblioteka

jQuery pojednostavljuje programiranje u Javascriptu

jQuery jednostavan za naučiti

31

jQuery HTML - odabir elemenata

HTML - događaji i funkcije

HTML - manipulacija elementima

CSS - manipulacija

JavaScript - efekti i animacije

HTML DOM - šetnja stablom i modifikacije

AJAX

32

jQuery – učitavanje biblioteke Sve u jednoj datoteci

jquery.js

<head><script type="text/javascript" src="jquery.js"></script></head>

http://docs.jquery.com/Downloading_jQuery

33

jQuery – učitavanje biblioteke Alternativni načini učitavanja:

<head><script type="text/javascript" src=" http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js "></script></head>

<head><script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head>

<head><script type="text/javascript" src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script></head>

..... 34

jQuery Vlastite jQuery skripte u eksternoj datoteci: <head>

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="my_jquery.js"></script></head>

Sukob kod imenovanja

(npr. jQuery i Prototype istovremeno) $ kao “shortcut” koriste i neke druge biblioteke

noConflict()

var $jq=Jquery.noConflict()

35

jQuery sintaksa jQuery sintaksa je izrađena za:

Pronalazak HTML elemenata

Izvršavanje akcija nad tim elementima

$(query).action() $ - označava da je riječ o jQuery

(query) selektor za pronalazak HTML elemenata

jQuery action() koji se izvrše nad elementima

36

Primjeri sintakse

$(this).hide() – sakriva trenutni element

$("p").hide() – sakriva sve paragrafe

$("p.test").hide() – sakriva paragrafe klase "test"

$("#test").hide() – sakriva element sa id="test“

CSS selektor?

37

jQuery selektor jQuery Element Selektori

jQuery Atribut Selektori

jQuery CSS Selectori

38

jQuery Element Selektori CSS stil dohvaćanja elemenata:

$(“h1") dohvaća sve <h1> elemente

$(“h1.x") dohvaća sve <h1> elemente klase “x".

$(“h1#y") dohvaća <h1> element sa id=“y".

39

jQuery Atribut Selektori XPath stil dohvaćanja elemenata sa atributima

$("[href]") dohvaća sve elemente sa href atributom

$("[href='#']") dohvaća sve elemente sa href vrijednosti "#"

$("[href!='#']") dohvaća sve elemente sa

href atributom vrijednosti <> "#"

$("[href$='.jpg']") dohvaća sve elemente sa href atributom koji sadrži ".jpg".

40

jQuery CSS Selectori jQuery CSS selektori se mogu koristiti da se promijeni

CSS svojstvo HTML elemenata

$(“h1.x").css("background-color",“blue")

41

Dodatni primjeri $("ul li:first")

Prvi <li> element svakog <ul>

$("ul li:even")

parni <li> elementi

$("div#intro .head")

Svi elementi klase "head“ unutar <div> elementa čiji je id="intro"

42

Events i jQuery Događaji (events) su dobro podržani u jQuery-u

Ponoviti što su događaji (events)!

$("button").click(function() {..neki kod... } )

43

jQuery Events

44

jQuery Events

45

Efekti u jQuery Hide and Show

Toggle

Slide Functions - slideDown, slideUp, slideToggle

Fade Functions - fadeIn(), fadeOut(), fadeTo()

Vlastite animacije

46

Hide i Show$("#hide").click(function(){

$("p").hide()

})

$("#show").click(function(){

$("p").show()

})

Sintaksa:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

Callback – nakon izvršenja može se pozvati nova funkcija

47

Hide i Show

48

Toggle$(selector).toggle(speed,callback)

$("button").click(function(){

$("p").toggle()

})

49

Toggle

50

slideDown, slideUp, slideToggle (selector).slideDown(speed,callback)

(selector).slideUp(speed,callback)

(selector).slideToggle(speed,callback)

51

slideDown, slideUp, slideToggle

52

fadeIn(), fadeOut(), fadeTo() (selector).fadeIn(speed,callback)

(selector).fadeOut(speed,callback)

(selector).fadeTo(speed,opacity,callback)

53

fadeIn(), fadeOut(), fadeTo()

54

Vlastite animacije<script type="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow")$("#box").animate({width:300},"slow")$("#box").animate({height:100},"slow")$("#box").animate({width:100},"slow")});});</script>

55

56

HTML i jQuery Mijenjanje HTML sadržaja

(selector).html(content)

Dodavanje HTML sadržaja

(selector).append(content)

(selector).prepend(content)

(selector).after(content)

(selector).before(content)

57

CSS i jQuery (selector).css(name,value)

$("p").css("background-color","yellow")

(selector).css({properties})

$("p").css({"background-color":"yellow","font-size":"200%"})

(selector).css(name)

$(this).css("background-color")

58

CSS i jQuery (selector).height(value)

$("#id100").height("200px")

(selector).width(value)

$("#id200").width("300px")

59

jQuery

<ul>

<li style=“background:red;”>

<span>Changed</span>

First item

</li>

<li>

Second item

</li>

<li style=“background:red;”>


Third item

</li>

</ul>

<ul>

<li>

First item

</li>

<li>

Second item

</li>

<li>

Third item

</li>

</ul>

<ul>

<li>


First item

</li>

<li>

Second item

</li>

<li>


Third item

</li>

</ul>

$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”});

60

AJAX

Asynchronous JavaScript and XML

Zašto asinkrono?

Zašto Javascript?

Zašto XML?

62

Ajax 2005

Primjeri

Google Suggest

Osvježavanje podataka meteo stanice

Modeliranje širenja šumskog požara

http://www.google.com/

65

Asinkrona komunikacija?

KLIJENT

šalje httpRequest

čeka

čeka

čeka

čeka

prima httpResponse

Učitava podatke

Osvježava se stranica

SERVER

čeka

čeka

prima httpRequest

priprema httpResponse

šalje httpResponse

čeka

čeka

čeka

HTTP protokol: Klijent-server

Klasični pristup

68

AJAX pristup

69

Asinkorna komunikacija Korisničke akcije koje bi u generirale HTTP request

pretvaraju se u Javascript pozive koje pozivaju AJAX engine

AJAX engine upravlja svim odgovorima sa servera

Potencijalni problemi

Javascript mora biti omogućen

“Back button” ne radi uvijek

Stranice nekad teško spremiti u “Bookmarks”

JavaScript

Dohvat dijela stranice (DOM model, getElementById)

Slanje http zahtjeva

Dohvat http odgovora

Obrada http odgovora

Izmjena (update) dijela stranice

XML Format podataka

Strukturirani podaci

XMLHttpRequest

73

Pokretanje HTTP zahtjeva

1. Kreiranje i konfiguracija

XMLHttpRequest objekta

2. Pokretanje zahtjeva

3. Obrada odgovora

Kreiranje XMLHttpRequest objekta

Mozilla:

IE:

var request = new XMLHttpRequest();

var request = new

ActiveXObject("Microsoft.XMLHTTP");

74

Konfiguracija XMLHttpRequest objekta

request.open("method","URL",false)

request.setRequestHeader("header","value")

• Method je GET, POST, itd.

• URL postoje sigurnosna ograničenja

• false hoće li se zahtjev izvršiti asinkrono

75

Pokretanje zahtjeva

request.send(content)

• content je poslan u POST zahtjevu

• content se koristi samo sa POST

• content može biti prazan ili "null”

76

Konfiguracija XMLHttpRequest objekta URL

Datoteka na serveru

Može biti bilo koja vrsta datoteke (xml, txt, asp, php, …)

Asinkrono izvođenje – true ili false

Da bi se XMLHttpRequest ponašao kao AJAX potrebno postaviti u true

Ukoliko je Async=false

Javascript se ne izvodi dok se ne dobije odgovor servera

Ne pise se onreadystatechange funkcija, već samo .send()

Async = false Async = false

xmlhttp.open("GET","ajax_info.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Async = true xmlhttp.onreadystatechange=function()

{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

XMLHttpRequest onreadystatechange

xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){// Neki kod}

}

0 – Zahtjev nije inicijaliziran

1 – Zahtjev je postavljen

2 – Zahtjev je poslan

3 – Zahtjev se obrađuje

4 – Zahtjev je izvršen79

GET i POST GET:

xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);xmlhttp.send();

POST: xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

Obrada odgovora

request.responseText

request.responseXML

request.status request.statusText

request.getAllResponseHeaders()

request.getResponseHeader("header")81

responseText Ukoliko odgovor sa servera nije XML

Odgovor je u biti string

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML Dohvaćeni odgovor može se parsirati kao XML dokument

xmlDoc=xmlhttp.responseXML;var txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++){txt=txt + x[i].childNodes[0].nodeValue + "<br />";}

document.getElementById("myDiv").innerHTML=txt;

AJAX – auto sugestija

84


85

AJAX – auto sugestija Ako u input polju ima nešto zapisano:

Definira URL (filename) koji će se poslati serveru

Dodaje parametar (q) tom URL-u sa sadržajem input polja

Dodaje random broj da bi se spriječio caching

Kreira XMLHTTP objekt te se pokreće funkcija stateChanged kad se dogodi promjena

Otvara XMLHTTP objekt sa danim URL-om

Šalje HTTP zahtjev na server

86


87

Serverski dio pogledati na:

http://www.w3schools.com/ajax/ajax_aspphp.asp

http://www.w3schools.com/ajax/ajax_aspphp.asp

jQuery & AJAX

jQuery poziva higher level

.loadAJAX funkciju

88

JSON Počeci razvoja 2001. godine

U kombinaciji sa Javascriptom

Mime type “application/json”

Primjereniji od XML za prijenos preko mreže

Bliži programerskom pristupu shvaćanja strukture podataka

Brži od XML-a

DOM relativno spor

Za AJAX puno pristupačniji i brži

JSON U JSON-u postoji 6 tipova podataka:

1. Stringovi – “xyz” … “Pozdrav!”

2. Brojevi – 17 … -22.76425 … 8.54621e7

3. Boolean – true or false

4. Null – null

5. Objekti – { “propName”: value, … }

6. Nizovi – [ value, value, value… ]

JSON – kako izgleda{

“porukaID”: 243,

“poruka”: “Pozdrav!!!”,

“poslano”: “2010-05-26 12:21:17.271”,

“adrese”:

{ “ime”: “Jure”, “prezime”: “Ivić” },

“intLista”: [46, 482, -48, 31.234e7, 14, -6],

“posaljiZaglavlje”: true

}

JSON Koristiti JSON parser (Firefox ima ugrađeni parser)

Npr. Json2.js

http://www.json.org/json2.js

var oMyData = JSON.parse(sJSON);

Javascript je popularan

JSON je “prirodan” način prenošenja podataka u Javascript aplikacijama

Documents

Javascript, DOM, DHTML · JavaScript je programski jezik više razine osmišljen da doda interaktivnost na web stranice. Objektno orijentirani jezik Untyped –tip podatka ne mora