Embed Size (px)
Citation preview
XHTML, Javascript, DOM, DHTML
Što ćete naučiti Internet općenito
HTML
CSS
XML
XHTML
Javascript
DOM
DHTML
AJAX
jQuery
PHP
ASP.NET
Ruby On Rails
MS Silverlight
FLASH, SMIL, SVG
...
XHTML EXtensible HyperText Markup Language
Cilj – zamijeniti HTML
Sličan HTML-u ali čišći i stroži
HTML ali u skladu sa XML-om
Od siječnja 2000 dio je w3 standarda
3
Razlike HTML i XHTML Glavne razlike:
XHTML elementi moraju biti properly nested
<b><i> fesb </i></b>
XHTML dokument mora biti well-formed<html>
<head> ... </head>
<body> ... </body>
</html>
Imena tagova moraju biti napisana malim slovima
<html> ne <HTML>
Svi XHTML elementi moraju biti zatvoreni
<ul><li> stavka 1 </li><li>stavka 2</li></ul>4
Razlike HTML i XHTML Imena atributa moraju biti napisana malim
slovima
Vrijednosti atributa moraju doći u navodnim znakovima
Zabranjeno je minimiziranje atributa
Umjesto name atributa koristi se id
Lang atribut koje se može primijeniti na bilo koji elemnt koristi se na sljedeći način
<div lang="no" xml:lang="no">Heia Norge!</div>
XHTML DTD propisuje obavezne elemente
5
Obavezni elementi XHTML-a<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Title goes here</title>
</head>
<body>
Body text goes here
</body>
</html>
6
Struktura XHTML dokumenta Prva linija dokumenta XHTML 1.0 trebala bi biti document type definition:
the DTD.
Strict<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd">
Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
7
HTML to XHTML Samozatvarajući tagovi
<br>, <hr>, <link> i <img> pišiu se na dogovoren način:
<br> => <br />
<img src="..."> => <img src="..." />
Svi tagovi pišu se malim slovima jer je XML case sensitive:
<BODY> mora se zamjeniti sa <body>
8
HTML to XHTML Vrijednosti atributa moraju se uvijek pisati u
navodnim znakovima
<table rows=3> => <table rows="3">
Minimizacija atributa nije dozvoljena
<dl compact> =><dl compact="compact">
Validacija:
http://validator.w3.org/check?uri=...
9
DHTML Dynamic HTML
Kako napraviti web stranice interaktivnim i dimamičnim
Korištenjem:
CSS-a
JavaScripta
DOM
Eventa
11
Skriptni jeziciProgramski jezici:
Kompajlerski C,VB,C++ …
Skriptni Klijentsko skriptiranje
Klijent – korisnik i njegov preglednik JavaScript
VBScript
WMLScript
Serversko skriptiranje
Server – na njemu su web-stranice PHP
ASP
12
13
DINAMIČKE
WEB STRANICE
BROWSERSKO
SKRIPTIRANJE
SERVERSKO
SKRIPTIRANJE
JAVASCRIPT VBSCRIPT PHPASP
CGI
C PERL
Klijentsko i serversko skriptiranje
Klijent – korisnik i njegov preglednik
Klijentsko skriptiranje se događa na klijentu
Nakon što dobije stranice od poslužitelja
Primjer: dinamički izbornik
Server – na njemu su web-stranice
Serversko skriptiranje se događa na serveru
Prije nego što se stranica pošalje klijentu
Primjer: vijesti iz baze podataka
14
Klijentsko i serversko skriptiranje (2)
Važno je znati što se može obaviti klijentskim, a što serverskim skriptiranjem
15
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
16
Što je JavaScript? JavaScript se sastoji od linija izvršnog koda
Obično je ugnježdena u HTML stranice, ali može egzistirati i kao zasebna aplikacija (MS JScript)
JavaScript je interpretirani jezik
Svatko može koristiti JavaScript bez licenciranja
Svi glavni preglednici podržavaju JavaScript
17
JavaScript i Java JavaScript i Java nisu isto
Java je programski jezik kojeg je razvio Sun Microsystems
Java je snažan i kompleksan programski jezik, na istoj razini kao C i C++
18
Što sve JavaScript može?• HTML dizajnerima daje programerski alat
• JS-om u HTML stranice možemo dodati dinamički tekst (npr. naredbom
document.write("<h1>"+ ime+ "</h1>")
moguće je unutar HTML stranice ispisati tekst koji
sadrži varijabla ime)
• JS može reagirati na događaje (evente)
• JS može čitati i mijenjati sadržaj HTML elemenata
• JS se može koristiti za analizu (validate) forme podataka
19
Kako uključiti JS u HTML stranice? Promotrimo sljedeći primjer:
<html><body>
<script type="text/javascript">document.write("Hello World!")
</script>
</body> </html>
Gornji kod rezultirati će ispisom:” Hello World! ”, unutar HTML stranice.
20
Kako označiti završetak naredbe? Kod programskih jezika kao što su Java, C i C++ svaka
naredba mora završiti točka-zarezom (;) Mnogi programski jezici nastavili su ovu tradiciju.
Kod pisanja JS točka-zarez na kraju naredbe je općenito opcionalan, međutim točka-zarez se zahtijeva kada više naredbi želimo napisati u jednoj liniji.
Kako rukovati starijim browserima? Stariji browseri koji ne podržavaju skripte, umjesto da ih izvrše, na stranici će
prikazati njihov sadržaj (sve naredbe i tagove koje skripta sadrži). Da bi se to spriječilo skripta se zakomentira:
<script type="text/javascript>
<!--JavaScript naredbe
//-->
</script>
Dodatne dvije kose crte ispred znaka kojim završava uobičajeni HTML komentar (//-->) služe JavaScript kompajleru kao naznaka da tu liniju ne kompajlira.
(Napomena: Kose crte se ne stavljaju ispred znaka za početak komentara. Stariji browseri bi ih prikazali kao sadržaj.)
Gdje pisati JavaScript kod? Skripte u body dijelu:
Skripte za koje želimo da se izvrše dok se stranica učitava pišemo u body dijelu. Ovako napisana skripta generira sadržaj HTML stranice.
<html>
<head>
</head>
<body>
<script type="text/javascript">
JavaScript naredbe</script>
</body></html>
23
Gdje pisati JavaScript kod? Skripte u head dijelu:
Skripte za koje želimo da se izvrše tek kada ih pozovemo ili kada se desi određeni događaj, pišemo u head dijelu. Na taj način osiguravamo da će se skripte učitati prije nego ih itko bude htio koristiti.
<html><head><script type="text/javascript">
JavaScript naredbe</script></head>
</html>
24
Gdje pisati JavaScript kod? Skripte u head i u body dijelu:
Unutar stranice može se nalaziti proizvoljan broj skripti (koliko god nam je potrebno). Jasno je da ćemo za neke od njih htjeti da se izvrše odmah, a za neke da se izvrše tek kada ih pozovemo, zbog toga se unutar iste stranice skripte mogu nalaziti i u head i u body dijelu.
<html> <head><script type="text/javascript">
JavaScript naredbe</script> </head> <body><script type="text/javascript">
JavaScript naredbe</script></body>
</html>25
Gdje pisati JavaScript kod?
Nepravilno napisana vanjska skripta Pravilno napisana vanjska skripta
<script type="text/javascript">
document.write(“Vanjska skripta!“)
</script>
document.write(“Vanjska Skripta!”)
26
Vanjski JavaScript: može se dogoditi da istu skriptu želimo izvršavati na više stranica bez da je pišemo na svakoj od tih stranici, u tu svrhu koristimo vanjske skripte. Vanjsku skriptu pišemo u odvojenoj datoteci i
spremamo je s ekstenzijom .js U vanjskoj skripti se ne smije koristiti tag <script>
27
U svim HTML stranicama u kojima želimo koristiti vanjsku skriptu jednostavno je uključimo korištenjem atributa src.
<html>
<head>
</head>
<body>
<script src=“xxxx.js"> </script>
</body>
</html>
Napomena:
xxxx označava ime skripte koju želimo uključiti
Linija kojom uključujemo vanjsku skriptu <script src=“xxxx.js"> </script>
dodaje se na mjestu gdje bi skriptu inače napisali
Zaključak
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.
28
Eventi Dinamičnost i Interaktivnost
Akcije koje JavaScript može prepoznati, poput klika ili pomaka miša,
učitavanja stranice,
promjene teksta..
onLoad , onUnload
onFocus, onBlur and onChange
onSubmit
onMouseOver <html_element event=“javascript:kod...”>
30
HTML 4.0 Event HandlersEvent Occurs when...
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
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
Varijable Pridjeljivanje vrijednosti varijabli
Kao i deklaraciju, pridjeljivanje vrijednosti varijabli moguće je izvršiti na dva načina:
• korištenjem var iskaza (npr. var studij=“Računarstvo”)• bez var iskaza (npr. studij=“Računarstvo”)
S lijeve strane izraza pišemo ime varijable, a s desne strane pišemo vrijednost koju želimo pridjeliti varijabli. U oba gornja primjera varijabli studij pridužuje se vrijednost Računarstvo.
31
Varijable Doseg i trajanje varijabli
• Ako varijablu deklariramo unutar funkcije (funkcije će biti obrađene kasnije) varijabli se može pristupiti samo unutar funkcije u kojoj je deklarirana. Ovakve varijable zovu se lokalne varijable.
• Budući da je varijabla vidljiva samo unutar funkcije u kojoj je deklarirana, unutar različitih funkcija moguće je imati varijable s istim imenom.
• Ako varijablu deklariramo izvan funkcije, ona će biti vidljiva svim funkcijama u HTML dokumentu. Životni vijek ovih varijabli započinje u trenutku deklaracije, a završava kada se stranica zatvori.
32
Operatori
33
Koristimo sljedeće operatore:
Aritmetički operatori
Operatori
34
Operatori pridjele vrijednosti
Operatori
35
Operatori usporedbe
Operatori
36
Logički operatori
Operatori String operator
Za spajanje dva ili više stringova, koristi se operator +.
Primjer:
tekst1=“Slušate predavanje o”
tekst2=“JavaScript-u.”
tekst3=tekst1+tekst2
Varijabla tekst3 sada sadrži string:
Slušate predavanje oJavaScript-u.
Uočite da se varijabla tekst3 sastoji od varijabli tekst1 i tekst2 spojenih bez razmaka. Ukoliko želimo da stringovi budu međusobno odvojeni razmakom, to možemo napraviti na sljedeća 3 načina.
37
Operatori I. način: Na kraj prvog stringa dodamo prazno mjesto.
tekst1=“Slušate predavanje o ”
tekst2=“JavaScript-u.”
tekst3=tekst1+tekst2
varijabla tekst3 sada sadrži string: Slušate predavanje o JavaScript-u.
II. način: Prazno mjesto dodamo na početak drugog stringa
tekst1=“Slušate predavanje o”
tekst2=“ JavaScript-u.”
tekst3=tekst1+tekst2
varijabla tekst3 sada sadrži string: Slušate predavanje o JavaScript-u.
III. način: Naredbu za spajanje stringova napišemo u sljedećem obliku: tekst3=tekst1+” “+tekst2
38
Funkcije sadrže kod koji će se izvršiti kada se desi određeni
događaj ili kada ih pozovemo. možemo ih koristiti koliko god puta nam je to
potrebno u istoj skripti kao i u drugom dokumentu
definiraju se na početku dokumenta, u head dijelu na taj način osiguravamo da se funkcija učita prije
njenog poziva.
39
Definiranje funkcija Definicija funkcije vrši se tako da joj dodjelimo neko ime,
definiramo argumente i u tijelu funkcije napišemo sve naredbe za koje želimo da se izvrše kada se funkcija pozove.
Funkcije• Argumenti su varijable koje se koriste u funkciji, a poprimaju
vrijednosti (varijabli) navedene u pozivu funkcije.
• Primjer definicije funkcije:function moja_funkcija (argument1,argument2, ... )
{ neke naredbe
}
• Definicija funkcije bez argumenata također mora imati oble zagrade:function moja_funkcija ( )
{ neke naredbe
}
41
Funkcije Poziv funkcije
Funkcija se neće izvršiti prije nego što je pozovemo.
Funkcija se poziva tako da napišemo njeno ime te unutar oblih zagrada nabrojimo argumente koje joj želimo proslijediti. Ukoliko funkcija ne prima argumente unutar zagrada ne navodimo ništa.
• Poziv funkcije s argumentima:
moja_funkcija (argument1,argument2, ... )
• Poziv funkcije bez argumenata:
moja_funkcija ()
42
Funkcije Naredba return
Ako želimo da funkcija kao rezultat izvršavanja vrati neku vrijednost moramo koristiti naredbu return. Naredba return specificira vrijednost koja će se vratiti na mjesto s kojeg je funkcija pozvana.
Primjer: funkcija koja zbraja dva broja i vraća rezultat
function zbroji(a,b)
{
c=a+b
return c
}
Funkcija zbroji poziva se na sljedeći način: suma=zbroji(broj1,broj2), gdje su broj1 i broj2 neke varijable ili konkretne vrijednosti (npr. zbroji(2, 3) ), a sumaje varijabla u koju će se pohraniti rezultat izvršenja funkcije.
43
Uvjetne naredbe Postoje tri vrste uvjetnih naredbi
if (izvršava se ako je vrijednost uvjeta true)
• if...else (izvršava se jedan od dva bloka naredbi)
• switch (jedan od više blokova naredbi)
44
ifSintaksa:
if (uvjet)
{
kod koji će se izvršiti ako je uvjet true
}
45
if…else• Sintaksa:
if (uvjet)
{
kod koji će se izvršiti ako je uvjet true
}
else
{
kod koji će se izvršiti ako je uvjet false
}
46
if…elsePrimjer
<script type="text/javascript"> var d = new Date() var time = d.getHours() if (time < 10) {
document.write(“Dobro jutro!")}
else{
document.write(“Dobar dan!")}
</script>47
switch
switch (izraz) { case label1:
kod koji će se izvršiti ako je izraz = label1break
case label2: kod koji će se izvršiti ako je izraz = label2break
default: kod koji će se izvršiti ako je izraz različit od label1 i od
label2}
48
Uvjetni operator JS također sadrži i uvjetni operator koji pridjeljuje
vrijednost varijabli na temelju nekog uvjeta
Sintaksa:
imevarijable=(uvjet)?vrijednost1:vrijednost2
Primjer:
greeting=(IQ<=“75")?“Hello IDIOT!":“Hello!"
49
ZaključakTri vrste uvjetnih naredbi:
If
If … else
Switch
+
uvjetni operator
50
Looping (petljanje) Kad želimo da nam se blok koda ponavlja određeni
broj puta, koristimo neke od petlji:
while – ponavlja određeni blok koda dok je uvjet zadovoljen
do...while – blok koda se izvrši jednom, a tada se ponavlja dok je zadovoljen uvjet
for – ponavlja set naredbi određen broj puta
51
whileSintaksa
while (uvjet)
{
naredba1
naredba2
...
}
52
do...while Sintaksa
do {naredba1naredba2...
} while (uvjet)
53
forSintaksa
for (inicijalizacija; uvjet; inkrementacija)
{
naredba1
naredba2
...
}
54
Sitnice koje život značeJS je Case Sensitive
varijabla godRod nije isto što i varijabla godrod
Zagrade, navodnici, apostrofi
za svaki znak ([{“’ mora postojati odgovarajući ‘”}])
Prazna mjesta
JS ignorira prazna mjesta izvan “” tako da je isto:
gender=“female” i gender = “female”
55
Sitnice koje život znače Dijeljenje linija koda
document.write("Hello /
world!")
OPREZ!!! Ne mozemo pisati
document.write /
("Hello world!")
Posebni znakovi
znakove kao & “ ‘ ; unosimo tako da prije znaka stavimo \
document.write (“Vi ste danas nešto \”naučili\””)
Komentari // i /* */
datum() // funkcija koja računa dan rođenja
56
Sljedeći put Ugrađeni objekti
DOM!!
