javascript - racunarstvo550.xyz. semestar/programiranje... · 3 5 klijentsko i serversko...
TRANSCRIPT
1
1
JavaScript
2
DHTML
� Dynamic HTML� Kako napraviti web stranice interaktivnim i
dimami�nim� Korištenjem:
� CSS-a� JavaScripta� DOM� Eventa
2
3
Skriptni jeziciProgramski jezici:� Kompajlerski
� C,VB,C++ …� Skriptni
� Klijentsko skriptiranjeKlijent – korisnik i njegov preglednik
• JavaScript• VBScript• WMLScript
� Serversko skriptiranjeServer – na njemu su web-stranice
• PHP• ASP
4
DINAMI�KE WEB STRANICE
BROWSERSKOSKRIPTIRANJE
SERVERSKO SKRIPTIRANJE
JAVASCRIPT VBSCRIPT PHPASP
CGI
C PERL
3
5
Klijentsko i serversko skriptiranje
� Klijent – korisnik i njegov preglednik� Klijentsko skriptiranje�������������� ����
• Nakon što dobije stranice od poslužitelja• Primjer: dinami�ki izbornik
� Server – na njemu su web-stranice� Serversko skriptiranje�������������������
• Prije nego što se stranica pošalje klijentu• Primjer: vijesti iz baze podataka
6
Klijentsko i serversko skriptiranje (2)
� Važno je znati što se može obaviti klijentskim, a što serverskim skriptiranjem
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
4
7
Što je JavaScrpt?� ��������� ���� �������������������������� ������������ ������������ �����������������
������ � ���������������
�������� ���� ��������� �������������������
� ��������� ��������� ������ �������� ���� �� �������� � ������������������� �������
� ����������� ����!����������"#�
8
Što je JavaScrpt?
� ���������� ������ �� �������������� ��� ��
� ���!� ������$���� ��%&'(��������)������ $���������������� �������������������*'��������+
� ��������� �������������������
� ���� �� $��� ��������������� ���������������
� ������������������������ ��$���������������
5
9
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++
10
Š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 kojisadrži varijabla ime)
� JS može reagirati na dogaaje (evente)� JS može �itati i mijenjati sadržaj HTML elemenata� JS se može koristiti za analizu (validate) forme
podataka
6
11
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.Probaj!
12
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, meutim 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.)
7
13
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>
Primjer!
14
� Skripte u head dijelu: Skripte za koje želimo da se izvrše tek kada ih pozovemo ili kada se desi odreeni dogaaj, 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>
Primjer!
8
15
� 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 bodydijelu.
<html> <head><script type="text/javascript">
JavaScript naredbe</script></head> <body><script type="text/javascript">
JavaScript naredbe</script></body></html>
16
� 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>
document.write(“Vanjska
Skripta!”)
<script type="text/javascript">document.write(“Vanjska skripta!“)
</script>
Pravilno napisana vanjska skripta
Nepravilno napisana vanjska skripta
9
17
� 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
18
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.
10
19
HTML 4.0 Event Handlers
a user closes a pageonunload
a user submits a formonsubmit
a user selects content on a pageonselect
a user resets a formonreset
a user releases a mouse-buttononmouseup
a cursor moves off an objectonmouseout
a cursor moves over an objectonmouseover
a cursor moves on an objectonmousemove
a user presses a mouse-buttononmousedown
a page is finished loading. Note: In Netscape this event occurs during the loading of a page!onload
a keyboard key is releasedonkeyup
a keyboard key is pressedonkeypress
a keyboard key is on its way downonkeydown
a user makes an object activeonfocus
a user double-clicks on an objectondblclick
a user clicks on an objectonclick
a user changes the value of an objectonchange
a user leaves an objectonblur
a user aborts page loadingonabort
Occurs when...Event
20
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.
Primjer
11
21
Varijable� Doseg i trajanje varijabli
• Ako varijablu deklariramo unutar funkcije (funkcije �e biti obraene 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.
22
OperatoriKoristimo sljede�e operatore:� Aritmeti�ki operatori
12
23
Operatori� Operatori pridjele vrijednosti
24
Operatori� Operatori usporedbe
13
25
Operatori� Logi�ki operatori
26
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 meusobno odvojeni razmakom, to možemo napraviti na sljede�a 3 na�ina.
14
27
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
28
Funkcije� Funkcije
• sadrže kod koji �e se izvršiti kada se desi odreeni dogaaj ili kada ih pozovemo.
• možemo ih koristiti koliko god puta nam je to potrebno (u istoj iskripiti 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.
� 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.
15
29
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 takoer mora imati oble zagrade:
function moja_funkcija ( ){
neke naredbe}
30
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 ()
Primjer
16
31
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.
32
Funkcije
� Primjeri:• Funkcija s argumentom I• Funkcija s argumentom II• Funkcija koja vra�a vrijednost• Funkcija s argumentima koja vra�a vrijednost
17
33
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)
34
if
�Sintaksa:
if (uvjet) {
kod koji �e se izvršiti ako je uvjet true}
18
35
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
}
36
if…else
�Primjer<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>
19
37
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}
38
Uvjetni operator
� JS takoer 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!"
20
39
Zaklju�ak
Tri vrste uvjetnih naredbi:
� if� if...else� switch+uvjetni operator
40
Looping (petljanje �)
� Kad želimo da nam se blok koda ponavlja odreeni broj puta, koristimo neke od petlji:� while –�������������� ������������������
uvjet zadovoljen� do...while – blok koda se izvrši jednom, a
tada se ponavlja dok je zadovoljen uvjet� for –������������������ ����������������
21
41
while
�Sintaksa
while (uvjet) {naredba1naredba2...
}
42
do...while
� Sintaksa
do {naredba1naredba2... } while (uvjet)
22
43
for
�Sintaksa
for (inicijalizacija; uvjet; inkrementacija) {
naredba1naredba2...
}
44
Zaklju�ak
Tri vrste petlji:
� while� do...while� for
Primjer
23
45
Sitnice koje život zna�e
�JS je Case Sensitivevarijabla godRod nije isto što i varijabla godrod
�Zagrade, navodnici, apostrofiza svaki znak ([{“’ mora postojati odgovaraju�i ‘”}])
�Prazna mjestaJS ignorira prazna mjesta izvan “” tako da je isto:gender=“female” i gender = “female”
46
Sitnice koje život zna�e
� Dijeljenje linija kodadocument.write("Hello /
world!")
OPREZ!!! Ne mozemo pisatidocument.write /("Hello world!")
� Posebni znakoviznakove 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