uvod u javascript - futura...ožujak 2013. uvod u javascript 2 creative commons slobodno smijete:...
TRANSCRIPT
![Page 1: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/1.jpg)
Uvod u JavaScript
Stjepan Ćavar
Ožujak 2013.
Zaštićeno licencom http://creativecommons.org/licenses/by-nc-sa/3.0/hr/
![Page 2: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/2.jpg)
ožujak 2013. Uvod u JavaScript 2
Creative Commons
� slobodno smijete:
� dijeliti — umnožavati, distribuirati i javnosti priopćavati djelo
� remiksirati — prerađivati djelo
� pod slijedećim uvjetima:
� imenovanje. Morate priznati i označiti autorstvo djela na način kako je specificirao autor ili davatelj licence (ali ne način koji bi sugerirao da Vi ili Vaše korištenje njegova djela imate njegovu izravnu podršku).
� nekomercijalno. Ovo djelo ne smijete koristiti u komercijalne svrhe.
� dijeli pod istim uvjetima. Ako ovo djelo izmijenite, preoblikujete ili stvarate koristeći ga, preradu možete
distribuirati samo pod licencom koja je ista ili slična ovoj.
U slučaju daljnjeg korištenja ili distribuiranja morate drugima jasno dati do znanja licence uvjete ovog
djela. Najbolji način da to učinite je linkom na ovu internetsku stranicu.
Od svakog od gornjih uvjeta moguće je odstupiti, ako dobijete dopuštenje nositelja autorskog prava.
Ništa u ovoj licenci ne narušava ili ograničava autorova moralna prava.
Tekst licence preuzet je s http://creativecommons.org/.
![Page 3: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/3.jpg)
Sadržaj
� JavaScript
� Osnove
� <script> HTML element
� Elementi JavaScript jezika
� Operatori, sintaksna pravila i programske strukture
� Objektni model
� Korištenje DOM-a
� Promjena svojstava elemenata
ožujak 2013. Uvod u JavaScript 3
![Page 4: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/4.jpg)
Javascript
ožujak 2013. Uvod u JavaScript 4
� jednostavan programski jezik koji omogućuje interaktivnost HTML stranica
� skriptni interpreterski jezik koji se obično "umeće" u HTML stranicu
� izvodi se u web pregledniku
Prilagoñeno iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006
![Page 5: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/5.jpg)
Javascript
� JavaScript nema nikakve veze s programskim jezikom Java� stvorila ga je kompanija Netscape u vrijeme kada
su web stranice bile statične
� na početku se programski jezik zvao Mocha pa LiveScript
� ime JavaScript dobio je iz marketinških razloga
� danas je za razvoj standarda zadužen W3C
� Danas postoje različite varijante jezika:� ECMAScript (standardizirana verzija)
� JavaScript
� Jscript
� JScript.NET
� ActionScript
ožujak 2013. Uvod u Javascript 5
![Page 6: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/6.jpg)
Za što JS može poslužiti?
ožujak 2013. 6
� programerski alat za HTML autore
� stavljanje dinamičnog sadržaja u HTML stranice
� reakcija na "događaje" (events)
� čitanje i promjena sadržaja HTML elemenata
� provjera sadržaja polja forme
� komunikaciju sa serverskim programom
� …
Uvod u JavaScript
![Page 7: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/7.jpg)
Primjer JavaScripta
ožujak 2013. Uvod u JavaScript 7
<html>
<head>
<title>Prva JavaScript stranica</title>
</head>
<body>
<script type="text/javascript">
alert("Dobar dan! ");
</script>
</body>
</html>HTML element
JavaScriptPR1.html
![Page 8: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/8.jpg)
<script> HTML element
<script type="text/javascript">
...
</script>
� unutar <script> HTML elementa navodi se JavaScript program
� u HTML dokumentu može biti neograničen broj <script> elemenata
� može se navoditi u tijelu ili zaglavlju dokumenta
� vrijednost atributa type određuje vrstu skriptnog programa (javascript, VB script, JScript,...)
ožujak 2013. Uvod u JavaScript 8
![Page 9: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/9.jpg)
Pisanje JavaScript programa
� JavaScript program može se navesti:
� unutar zaglavlja dokumenta
� (unutar <head> ... </head> oznaka)
� program se izvodi kada se eksplicitno pozove
� unutar tijela dokumenta
� (unutar <body> ... </body> oznaka)
� program se automatski izvodi tijekom učitavanjaHTML stranice
ožujak 2013. Uvod u JavaScript 9
![Page 10: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/10.jpg)
10
1. izravno kao dio HTML dokumenta<head>
<script type="text/javascript">
function pozdrav() {
alert("Pozdrav iz zaglavlja!");
}
</script>
</head>
<body>
<script type="text/javascript">
alert("Pozdrav iz tijela");
pozdrav();
</script>
</body>
Pisanje JavaScript programa
Uvod u JavaScriptožujak 2013.
JavaScriptPR2.html
![Page 11: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/11.jpg)
11
<html>
<head>
<title>Prva JS stranica</title>
<script type="text/javascript" src="JavaScriptPR3.js"></script>
</head>
<body>
<script type="text/javascript">
pozdrav();
</script>
</body>
</html>
Pisanje JavaScript programa
naziv JS programa navodi se kao vrijednost src atributa script elementa.
Uvod u JavaScriptožujak 2013.
2. u posebnu datoteku s .js ekstenzijom
JavaScriptPR3.html
![Page 12: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/12.jpg)
12
function pozdrav()
{
unos_ime = prompt("Unesite svoje ime: ");
unos_prezime = prompt("Unesite svoje prezime: ");
alert(unos_ime+" "+unos_prezime+"
je kreirao/la svoj prvi JavaScript! ");
}
Pisanje JavaScript programa
naziv JS programa navodi se kao vrijednost src atributa script elementa.
Uvod u JavaScriptožujak 2013.
2. u posebnu datoteku s .js ekstenzijom
JavaScriptPR3.js
Prednosti uključivanja vanjskih datoteka
� spremanje skripata u cache i brže učitavanje stranice
� mogu se uključivati i skripte na drugim domenama
� ista JS datoteka može se uključiti u više HTML dokumenata
� podloga za različite Web API-je
![Page 13: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/13.jpg)
13
Operatori
aritmetički operatori
x+y zbrajanje
x-y oduzimanje
x*y množenje
x/y dijeljenje
x%y ostatak dijeljenja
eval(izraz) aritmetička operacija
operatori za rad sa stringovima
x+y operator pridruživanja stringova
relacijski operatori
x>y veće od
x<y manje od
x>=y veće ili jednako
x<=y manje ili jednako
x==y jednako
x!=y različito
operatori uvjeta
x&&y i x i y imaju istinitu vrijednost (true) - logičko I
x||y x ili y imaju istinitu vrijednost (true) - logičko ILI
!x x ima neistinitu vrijednost (false) - logičko NE
ožujak 2013. Uvod u JavaScript
![Page 14: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/14.jpg)
Sintaksna pravila
� skraćeni zapis kod operacijax=x+1 može kraće x+=1
� JavaScript jezik je "case sensitiv" IME<> ime
� na kraju retka se treba navoditi točka-zarez, iako to nije obavezno, osim u slučaju više naredbi u jednom retku
� navodnici mogu biti jednostruki ili dvostruki, bitno je samo da se ne preklapaju
� nazivi varijabla i funkcija ne smiju sadržavati praznine
ožujak 2013. Uvod u Javascript 14
![Page 15: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/15.jpg)
1. zadatak: Zbrajanje dva broja
� Napisati JavaScript program koji omogućuje unos dva
broja i kao rezultat daje njihov zbroj
� NAPOMENA!
� Koristiti izdvojenu .js datoteku.
� Za unos brojeva koristiti prompt, a za ispis alert metode.
� Za pretvaranje stringa u integer koristiti funkciju parseInt
ožujak 2013. Uvod u Javascript 15
![Page 16: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/16.jpg)
Objektni model
ožujak 2013. Uvod u Javascript 16
![Page 17: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/17.jpg)
17
Objektni model
� JavaScript može pristupati elementima HTML dokumenata
� objekti su definirani HTML DOM-om (Document Object Model)
� razvijen je od strane W3C-a
� objekti (objects) imaju odgovarajuća svojstva(properties) sa određenim vrijednostima (values)body.bgColor="red" - svojstvo određuje da je boja pozadine tijela
dokumenta (body objekta) crvena
� objekti reagiraju na događaje (events)onclick="novaBoja()" – događaj "klik" miša pozvati će funkciju
"novaBoja() koja će promijeniti boju pozadine izabranog objekta
Uvod u Javascriptožujak 2013.
JavaScriptPR4.html
![Page 18: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/18.jpg)
18
Objektni model
� objektima i svojstvima stabla pristupa se pomoću tzv. "dot" sintakse
poziv = document.images[1].src
documentdocumentdocumentdocument
forms[]forms[]forms[]forms[] images[]images[]images[]images[] links[]links[]links[]links[]
images[1images[1images[1images[1]]]]
srcsrcsrcsrc altaltaltalt titletitletitletitle
Uvod u Javascriptožujak 2013.
............
![Page 19: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/19.jpg)
19
� osnovni objekti HTML dokumenta:
� document - svojstva sadržaja tekućeg dokumenta
(naziv (title), boja podloge (bgcolor), forme,... );
� form - svojstva odgovarajuće forme;
� button,text,… - svojstva elemenata forme;
� this – pseudoobjekt koji se koristi za pristup onom
HTML elementu iz kojeg se javascript program poziva
Objekti HTML dokumenta
Uvod u Javascriptožujak 2013.
![Page 20: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/20.jpg)
20
Svojstva (properties)
� objekti HTML dokumenata imaju odgovarajuća svojstva (properties)
� osnovna svojstva objekata HTML dokumenta:� id – jedinstvena oznaka objekta
� name - naziv objekta;
� value - vrijednost objekta;
� Primjer:
� <img src=“slika.gif" width="100" height=“50" border="0" id=“slika_1" />
Uvod u Javascriptožujak 2013.
![Page 21: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/21.jpg)
21
Događaji (events)
� događaje (events) izazivaju korisnici svojim akcijama (npr. učitavanjem HTML stranice ili ulaskom u određeno polje)
� neki od događaja (events):� onBlur - nakon izlaska iz objekta;
� onChange - promjenom sadržaja polja;
� onClick - klikom na objekt;
� onFocus - ulaskom u objekt;
� onLoad - završetkom učitavanja stranice;
� onMouseOver - prijelazom miša iznad objekta;
� onSubmit - slanjem podataka forme na obradu;
� događaji se navode kao atributi HTML elementa
<body onLoad="uradi()"><p id="odlomak" onClick="uradi_nesto()"> … </p>
</body>
Uvod u Javascriptožujak 2013.
![Page 22: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/22.jpg)
22
Korištenje DOM-a pomoću JS-a
� Pristupanje elementima (W3C)
� jednom elementu s definiranim atributom iddocument.getElementById()
� svim elementima s definiranim atributom namedocument.getElementsByName()
� svim elementima iste oznake (npr svi elementi <p>)document.getElementsByTagName()
� roditelju nekog elementa (XML DOM)document.getElementById().parentNode
� kolekcijama elemenatadocument.images[] , document.forms[]
Uvod u Javascriptožujak 2013.
JavaScriptPR5.html
![Page 23: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/23.jpg)
23
Promjena svojstava elemenata
� promjena izgledadocument.getElementById('naslov').style.color = 'red';
� promjena vidljivostidocument.getElementById('naslov').style.visibility ='hidden';
� promjena sadržaja elementadocument.getElementById('naslov').innerHTML = 'Novi naslov';
� promjena naziva tipkedocument.getElementById('tipka').value = 'Novi';
Uvod u Javascriptožujak 2013.
JavaScriptPR5.html
![Page 24: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/24.jpg)
24
CSS i DOM svojstva
CSS svojstva DHTML svojstva
font-family fontFamily
font-size fontSize
font-style fontStyle
... ...
neka CSS svojstva sastoje se od više riječi spojenih znakom crtice (npr. font-family, font-size,...)u DOM-u takva svojstva imaju spojene riječi, u "camel-case" obliku (prvo slovo svake riječi osim prve je veliko)
Uvod u Javascriptožujak 2013.
![Page 25: Uvod u JavaScript - Futura...ožujak 2013. Uvod u JavaScript 2 Creative Commons slobodno smijete: dijeliti — umno žavati, distribuirati i javnosti priop ćavati djelo remiksirati](https://reader035.vdocuments.net/reader035/viewer/2022070223/6140b3632e263e64232a3bcd/html5/thumbnails/25.jpg)
2. zadatak: Izmjena svojstava
� Napisati JavaScript program koji omogućuje:
� Zamjenu slike JavaScriptPR5MALA.jpg, slikom
JavaScriptPR5VELIKA.jpg. Event=onClick
� Boju teksta (<h1>) u crvenu Event=onClick
� Briše tekst (<h2>) Event=onMouseOver
ožujak 2013. Uvod u Javascript 25