Web programiranje 2013 2

Web programiranje 2013

Materijali za predavanjaBranko Stevanovic MSc

Prvi dan

Uvod

• Osnovni pojmovi u programiranju– Elementi programskog jezika

• Sintaksa• Semantika• Osnovni elementi programskog jezika (Von Neuman & Alan Turing)

– Promenljiva– Izrazi– Pridruzivanje (a=b)– Grananje, odlucivanje (true, false izrazi)– Rutine, podrutine, funkcije– Program– Rekurzija– Memorijske adrese– Upravljanje otpadom

• Tipovi u programskom jeziku– Staticko i dinamicko definisanje tipova – Jaki i slabi tipovi

Uvod• Razlike izmedju desktop i web programiranja

– Desktop programiranje:• Izvrsni programski jezici• Skriptni jezici

– Web programiranje• Klijent tehnologije• Server tehnologije

• Sta se smatra web programiranjem– Browser kao okruzenje

• Znanje html kao osnovnog nacina kreiranja web stranice• Znanje projektovanja i kreiranja baza podataka (web baze podataka)• Znanje nekog od web orijentisanih programskih jezika (obicno vise njih)• Znanje hijerarhijskih tipova podataka (xml i json)

– Sekvenca desavanja u web browseru• Uticaj na web programiranje• Ajax

PHP

• Sta je PHP?– PHP – Page Hypertext Preprocessor

– Jezik otvorenog koda (Open source), besplatno okruzenje

– Serverski jezik

• Alternative PHP-u• PHP dokument

– PHP dokument moze da sadrzi:• Text• HTML kod• JavaScript kod• PHP kod (naravno)

PHP

• Sta PHP moze?– Dinamicko generisanje sadrzaja web stranice

– Kreiranje, otvaranje, brisanje, manipulisanje fajlovima na serveru

– Prikupljanje podataka iz formi na web stranici

– Postavljanje i citanje kukija (cookie)

– Manipulacija podacima u bazama podataka (CRUD operacije)

PHP – kako poceti?

• Instalacija PHP okruzenja– Zakup hostinga sa PHP + MySql podrskom

– Instalacija lokalnog web servera na racunaru programera• Vise gotovih i jednostavnih resenja (Xampp, Wamp, EasyPHP)• Proces kreiranja projekta - sajta u Xampp okruzenju• Pristup lokalnom web sajtu u Windows okruzenju

PHP – elementi sintakse

• PHP kod pocinje sa <?php i zavrsava sa ?> tagom• Iskaz u php kodu. Tacka, zarez(;) na kraju• Primer 1 – Hello World• Komentari u PHP kodu

– Komentar u pojedinacnoj liniji– Blok komentar

• echo i print komande, koju koristiti?• Promenljive – kontejneri za cuvanje informacija

– Sintaksa php promenljive– Pridruzivanje vrednosti u php - $ime = ‘branko’;– Php kao slabo tipiziran jezik– Php kao jezik sa dinamickom proverom tipova– Primer2 – Hello World sa promenljivom

PHP – elementi sintakse• Oblasti delovanja promenljivih u php

– Lokalne promenljive• Lokalna promenljiva je deklarisana u funkciji i vidljiva je u okviru funkcije.

Primer 3 – lokalna promenljiva– Globalne promenljive

• Globalna promenljiva je definisana van bilo koje funkcije. Globalna promenljiva je vidljiva svuda osim u telu funkcije. Globalne promenljive su losa programerska praksa. Kljucna rec global promenljivoj kreiranoj van funkcije omogucava vidljivost u funkciji. Primer 4 – globalna promenljiva

– Staticke promenljive• Uobicajeno je da se lokalne promenljive brisu iz memorije nakon izvrsenja

funkcije. Kljucna rec static ispred imena promenljive kod deklaracije promenljive obezbedice da promenljiva ne bude obrisana nakon zavrsetka funkcije. Primer 5 – staticka promenljiva

– Parametri• Parametri su elementi funkcije. Bice vise reci o njima kada se budu

obradjivale funkcije.

JavaScript

• JavaScript i Java su dva potpuno razlicita programska jezika• Prvi put u Netscape browser-u 1995• Najpopularniji svetski programski jezik• JavaScript je skriptni jezik?

– Browser je prirodno okruzenje za izvrsavanje JavaScript koda

– JavaScript je kod koji se moze ubaciti u HTML stranicu

– Svi moderni pretrazivaci mogu da izvrsavaju JavaScript

– JavaScript je jezik lak za ucenje

JavaScript

• Primer 1 – Hello world• Primer 2 – pisanje u web stranicu• Primer 3 – reakcija na dogadjaj• Primer 4 – dinamicka promena slike na stranici• Primer 5 – dinamicka promena stila elementa stranice

Drugi dan

Organizacija Javascript koda

• Script tag <script></script> je znak html stranici da je unutar njega JavaScript kod. Jos bolje je kad tag izgleda kao:

<script type="text/javascript"></script>

jer onda browser nema nedoumice sta autor hoce.• Script tag moze da bude u <head></head> podrucju html stranice

– Primer 1

• Script tag moze da bude u <body></body> podrucju html stranice– Primer 2

• Eksterni JavaScript, kako se uvozi JavaScript– Primer 3

• Za sta se odluciti i zasto? • Script tag na kraju stranice, zasto?

Elementi sintakse• Iskaz u JavaScript. Tacka-zarez kao kraj iskaza. Tacka-zarez je opcion,

odnosno kod najcesce radi bez problema bez tacke-zarez zavrsetka. Dobra programerska praksa.

– Kako pisati program?– Ko ce citati program?– Ko ce odrzavati program?

• Java script kod je sekvenca JavaScript iskaza• Blokovi u JavaScript kodu, upotreba viticastih zagrada. Svrha bloka u Java

Script proramu. Funkcije kao blokovi koda u JavaScript.• Java script je CaseSensitive.• Komentari u JavaScript kodu. Upotreba komentara u programiranju

generalno.– Komentar u jednoj liniji– Blok komentar

Elementi sintakse - promenljive

• Promenljive su kontejneri koji cuvaju informacije. Upotreba kljucne reci var. Imenovanje promenljivih. Generalno o imenovanjima u programiranju.

– Naziv promenljive mora da pocne sa slovom ili $ ili _– Nazivi su case sensitive var x i var X su dve razlicite promenljve

• Tipovi podataka u JavaScript– Osnovni tipovi podataka

• String

• Numeric – Sta se desi ako deklarisemo broj sa navodnicima oko njega?

• Deklaracija promenljive u JavaScript. Vrednost deklarisane promenljive u JavaScript (‘undefined’). Operator typeof.

– Visestruka deklaracija u jednom iskazu.

• Dodeljivanje vrednosti promenljivoj u JavaScriptu

• Deklarisanje i dodeljivanje vrednosti u istoj liniji

• Ponovna deklaracija iste promenljive

Elementi sintakse - promenljive

• Dodeljivanje drugog tipa vrednosti istoj promenljivoj. JavaScript kao slabo tipiziran jezik, odnosno jezik sa dinamickim tipovima. Opasnosti koje nosi ta sloboda…

– Primer dinamicke promene tipa podataka.• String, promenljiva koja cuva niz karaktera

– Deklarisanje

– Navodnici unutar string promenljive

– Konkatenacija

– Konverzija u string

Elementi sintakse - promenljive

• String i operacije sa stringovima:– charAt(num)

– charCodeAt(num)

– concat(str1,str2,…)

– indexOf(substr)

– replace(substr,replaceText)

– search(regex)

– match(regex)

– slice(num1,num2)

– split(delimiter)

– substr(start,length)

– toLowerCase()

– toUpperCase()

Elementi sintakse - promenljive

• Numeric (brojna vrednost) promenljive:– var x = 34;– var x = 34.00;– var x = 34e5 //34000– var x = 34e-5 //0.00034

• Boolean (tacno, netacno) promenljive:– var x = true;

– var y = false;

Elementi sintakse - promenljive

• Nizovi (array):– var automobili = new Array();

• automobili[0] = ‘volvo’;

• automobili[1] =‘ford’;

• automobili[2] =‘seat’;

– var automobili = new Array(‘volvo’,’ford’,’seat’);– var automobili = [volvo,ford,seat];

• Nizovi su nula indeksirani• Null i Undefined

– Promenljive koje nemaju dodeljenu vrednost su ‘undefined’

– Dodeljivanje promenljivoj vrednosti null prazni “kontejner” promenljive

Elementi sintakse - promenljive

• Objekti (array):– var osoba = {ime:”Branko”, prezime:”Stevanovic”, godina:47, zensko:false};– var osoba ={

ime:”Branko”,

prezime:”Stevanovic”,

godina: 47,

zensko:false

}

• Pristup elementima objekta– var imeOsobe = osoba.ime;

– var imeOsobe = osoba[‘ime’];

PHP – string promenljiva

• String promenljiva u php ima oblik $ime = ‘Branko’• Konkatenacija stringova u php, operator konkatenacije

$ime = ‘Branko’;

$prezime = ‘Stevanovic’;

echo $ime . ’ ‘ . $prezime;

Funkcije za manipulaciju stringovima:

strlen($stringPromenljiva);

strpos($stringPromenljiva, $substingCijaSePozicijaTrazi)

Kompletna referenca string promenljiive u php5:http://www.w3schools.com/php/php_ref_string.asp

PHP – operatori• Aritmeticki operatori

x+y (sabiranje)x-y (oduzimanje)x*y (mnozenje)x/y (deljenje)x%y (deljenje po modulu)-x (negacija)a.b (konkatenacija)

• Operatori dodelex=y (levi operand je dobio vrednost desnog)x+=y (x=x+y) sabiranje pa dodelax-=y (x=x-y) oduzimanje pa dodelax*=y (x = x*y) mnozenje pa dodelax/=y (x = x/y) deljenje pa dodelax%=y (x = x%y) modulus pa dodelaa.=b (a = a.b) konkatenacija pa dodela

PHP – operatori• Operatori inkrementacije i dekrementacije

x++ (Postinkrement – vrati x a nakon toga ga uvecaj za jedan)++x (Preinkrement – dodaj jedan na x pa ga onda vrati)x-- (Post dekrement – vrati x pa ga nakon toga umanji za jedan)--x (Pre dekrement – oduzmi jedan od x pa ga onda vrati)

• Operatori poredjenjax==y Jednakost, true ako je x jednako yx===y Indeticnost, true ako je x jednako y i pri tome su istog tipa podatakax!=y Nejednakost, true ako x nije jednako yx<>y Nejednakost, true ako x nije jednako yx!==y Neindeticnost, true ako x nije jednako y ili nisu istog tipa podatakax>y Vece od, true ako je x vece od yx<y Manje od, true ako je x manje od yx>=y Vece ili jednako, true ako je x vece ili jednako yx<=y Manje ili jednako, true ako je y manje ili jednako y

PHP – operatori

• Logicki operatorix and y (And (i) true ako su x i y true)

x && y (And (i) drugi nacin zapisivanja)

x or y (Or (ili) true ako je x ili y true i ako su i x i y true)

x || y (Or (ili) drugi nacin zapisivanja)

x xor y (Xor (eksluzivno ili) true samo ako su x ili y true)

!x (Not (nije) true ako x nije true)

Principi pisanja programa

• Sta je posao programera– Progam koji radi ono za sta je i namenjen– Fizicki kvaliteti programa

Brzina izvrsenja

Zauzece resursa masine

– Ostali kvaliteti programaCitljivost programa

Program koji sam sebe komentarise – upotreba komentara u programu

Njutnova metoda sukcesivne aproksimacije

N – broj ciji se koren trazi

A – pretpostavljeni koren broja ciji se koren trazi (1 je u redu)

1

2

NN A

A

Njutnova metoda sukcesivne aproksimacije

Proces je zavrsen kada je ispunjen uslov

Gde je Δ neki nivo tacnosti koji trazimo (recimo 0.001)

1 22 1.5 1.4167

2 1.5

1 22 1.4167 1.4142

2 1.4167

2N A

Program koji radi

1.function NadjiKorenBanalno1(pretpostavka, brojCijiSeKorenTrazi) {  2.    if(Math.abs(brojCijiSeKorenTrazi - (Math.pow(.5 * (brojCijiSeKorenTrazi / pretpostavka + pretpostavka), 2))) < 0.001) {  3.        console.log(.5 * (brojCijiSeKorenTrazi / pretpostavka + pretpostavka));  4.    }  5.    else {  6.        NadjiKorenBanalno1(.5 * (brojCijiSeKorenTrazi / pretpostavka + pretpostavka), brojCijiSeKorenTrazi)  7.    }  8.};  

Ver 1:

1.function NadjiKorenBanalno2(pretpostavka, brojCijiSeKorenTrazi) {  2.    var kalkulacija = .5 * (brojCijiSeKorenTrazi / pretpostavka + pretpostavka);  3.    if(Math.abs(brojCijiSeKorenTrazi - (Math.pow(kalkulacija, 2))) < 0.001) {  4.        console.log(kalkulacija);  5.    }  6.    else {  7.        NadjiKorenBanalno2(kalkulacija, brojCijiSeKorenTrazi);  8.    }  9.};  

Ver 2:

Pisanje programa koji radi i koji sam sebe objasnjava

Pojam pseudokodaPrimer pseudokoda u procesu iznalazenja korena prema Njutnovoj metodi:

Koren

Ver 2:

Pisanje programa koji radi i koji sam sebe objasnjava

• Pojam pseudokoda– Dobra definicija je da je pseudokod opis algoritma svakodnevnim jezikom– Pseudokod razume i neko ko nije softverski inzenjer.– Racunar, na zalost ne razume pseudokod

• Primer pseudokoda u procesu iznalazenja korena prema Njutnovoj metodi – Koren nekog broja se resava prema prilozenoj matematickoj formuli – Ako pretpostavljeni broj zadovoljava kriterijume onda je on i rezultat– Ako nije ponovi ceo proces sa dobijenim brojem

1.function NadjiKoren(pretpostavka, brojCijiSeKorenTrazi){  2.      if(DovljnoDobro(pretpostavka,brojCijiSeKorenTrazi)){  3.          console.log(pretpostavka);  4.      }  5.      else  6.      {  7.          NadjiKoren(PopraviPretpostavku (pretpostavka, brojCijiSeKorenTrazi),brojCijiSeKorenTrazi);  8.      }  9.  };  

Pisanje programa koji radi i koji sam sebe objasnjava

• Kako se pseudokod prevodi u programski kod

• Probajte program, sta znace greske koje se javljaju?

Pisanje programa koji radi i koji sam sebe objasnjava

• Rutina DovoljnoDobro:

• Probajte program, sta znace greske koje se javljaju?

1.function DovoljnoDobro(pretpostavka, brojCijiSeKorenTrazi){  2.    return Math.abs(brojCijiSeKorenTrazi-KvadratBroja(pretpostavka))<0.001;  3.} 

Pisanje programa koji radi i koji sam sebe objasnjava

• Rutina KvadratBroja:

• Probajte program, sta znace greske koje se javljaju?

1.function KvadratBroja(brojKojiSeKvadrira){  2.    return brojKojiSeKvadrira*brojKojiSeKvadrira;  3.};  

Pisanje programa koji radi i koji sam sebe objasnjava

• Rutina PopraviPretpostavku:

• Probajte program, sta znace greske koje se javljaju?

1.function PopraviPretpostavku(pretpostavka, brojCijiSeKorenTrazi){  2.    return ProsecnaVrednost(pretpostavka,brojCijiSeKorenTrazi/pretpostavka);  3.}; 

Pisanje programa koji radi i koji sam sebe objasnjava

• Rutina PopraviPretpostavku:

• Probajte program, sta znace greske koje se javljaju?

1.function PopraviPretpostavku(pretpostavka, brojCijiSeKorenTrazi){  2.    return ProsecnaVrednost(pretpostavka,brojCijiSeKorenTrazi/pretpostavka);  3.}; 

Pisanje programa koji radi i koji sam sebe objasnjava

• Rutina ProsecnaVrednost:

• Probajte program, sta znace greske koje se javljaju?

1.function ProsecnaVrednost(x,y){  2.    return 1/2*(x+y);  3.};  

Procedure kao crne kutije

• Divide et impera• Dekompozicija problema

– podeliti veliki problem na vise malih lako resivihproblema kako bi se njihovim pojedinacnimresavanjem doslo do resenja i velikog problema

• Kako se deli problem– Deoba na zadatke koji se mogu identifikovati– Pisanje rutina, procedura– Sta je unutar procedure?

1.function KvadratBroja(brojKojiSeKvadrira){  2.    return Math.exp(Math.log(brojKojiSeKvadrira)+Math.log(brojKojiSeKvadrira));  3.}  

Procedure kao crne kutije• Kvadrat korena broja iz programa koji je obradjen:

• Kvadrat korena broja kako je mogao da bude resen:

• Obe procedure– Isti naziv– Ista lista argumenata– Tacan rezultat

1.function KvadratBroja(brojKojiSeKvadrira){  2.    return brojKojiSeKvadrira*brojKojiSeKvadrira;  3.};  

Princip lokalnih imena• U cemu je razlika izmedju sledecih procedura?

1.function KvadratBroja(x){  2.    return x*x;  3.};  4.  5.function KvadratBroja(y){  6.    return y*y;  7.};  

• Da li programer koji koristi procedure mora da pazi na imena argumenata?

1.function DovoljnoDobro(pretpostavka, x){  2.    return Math.abs(x-KvadratBroja(pretpostavka))<0.001;  3.}; 

Razmena podataka na webu• Tekst kao najmanji zajednicki sadrzalac

– Agnostican na• Operativni sistem• Razvojnu tehnologiju• Platforme

• Resenja koja su se nametnula kao standard u sofverskoj industriji:– XML– JSON

Hijearhijske strukture podataka• Osnovni princip je princip stabla (tree)

– Jedan roditelj moze da ima vise objekata dete– Objekat dete sa druge strane moze da ima samo jednog roditelja– XML i JSON su primeri hijarhijskih struktura podataka

JSON JavaScript Object Notation• Univerzalna struktura podataka• Postoji podrska u svim modernim programskim jezicima• Moguce su dve strukture

– Objekat– Lista (niz, array)

• Tip podataka Objekat– Struktura tipa Naziv : Vrednost (Hashmap)

JSON JavaScript Object Notation

• Primer JSON objekta:

{

"ime":"Branko",

"prezime":"Stevanovic",

"godina":47,

"zaposlen":true

}

JSON JavaScript Object Notation• JSON niz je organizovana kolekcija vrednosti• Sintaksa:

• Primer jednostavnog niza:

["Milan","Petar","Zoran"."Milica"]

JSON JavaScript Object Notation• JSON niz, slozenija struktura:[{

"ime":"Branko",

"prezime":"Stevanovic",

"godina":47,

"zaposlen":true

},

{

"ime":"Snezana",

"prezime":"Panic",

"godina":41,

"zaposlen":true

},

{

"ime":"Tijana",

"prezime":"Zdravkovic",

"godina":18,

"zaposlen":false

}]

JSON JavaScript Object Notation• Validne vrednosti u JSON strukturama podatka:

– String (uvek u navodnicima, kao u svim C nalik jezicima)– Broj (hexadecimal i oktal nisu podrzani)– Boolean (true, false)– Null– Objekat– Niz

• Validan JSON objekat (JsonLint)

XML Extensible markup language• Stariji format od JSON:• XML cini standardizovan skup pravila• Veoma slican HTML (ili obrnuto)• Osnovna jedinica, zapis XML dokumenta

<osoba>Miloš Crnjanski</osoba>

XML Extensible markup language• Deklaracija XML dokumenta:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> • Elementi XML

– Start tag, zavrsni tag– Sadrzina (ono sto se pojavljuje izmedju tagova)– Tagovi su markiranje(markup)

• Prazan element

<br></br>

<br />

<br/> • Korenski element (samo jedan, najstariji element)

XML Extensible markup language• Stablo:

<osoba>

<ime_i_prezime>

<ime>Miloš</ime>

<prezime>Crnjanski</prezime>

</ime_i_prezime>

<zanimanje>književnik</zanimanje>

<zanimanje>diplomata</zanimanje>

</osoba> • Iako je struktura komplikovanija, ipak samo jedan element – osoba• Pojam deteta i pojam rodjaka, brace (sibling)

XML Extensible markup language• Atributi:

– Imaju nazive i vrednosti– Vrednosti uvek u navodnicima

<osoba rodjena="1893" umrla="1977">  

        Miloš Crnjanski  

</osoba> • Reference (zamenski simboli)

XML Extensible markup language• Pravilnost XML dokumenta:• za svaki XML dokument mora postojati tačno jedan korenski element;• svaki element koji nije prazan mora imati početni tag i odgovarajući završni tag;• prazan element može biti označen oznakom praznog elementa (kao što je <br/>, što je ekvivalentno <br> </br>);• sve vrednosti atributa moraju biti zatvorene u navodnike ili polunavodnike;• elementi mogu biti ugnežđeni, ali se ne smeju preklapati, a svaki element, osim korenskog, mora se u potpunosti sadržati u drugom elementu;• jedan element ne sme imati dva istoimena atributa;• unutar oznaka ne smeju se koristiti komentari ni instrukcije za obradu;• znakovi < ili & koji nisu pretvoreni u izlaznu sekvencu ne smeju se naći u znakovnim podacima elemenata i atributa;• nazivi elemenata mogu sadržati slova, brojeve i posebne znakove, moraju počinjati slovom, ali ne smeju počinjati tekstom xml ni XML, a ne smeju sadržati ni praznine;• takođe, imena elemenata su osetljiva na razliku između malih i velikih slova (eng. case-sensitive). Tako elementi OSOBA, osoba i Osoba za XML nisu isti.

AJAX - Asynchronous JavaScript and XML• Skup klijentskih tehnologija

– XML nije obavezan– AJAX nije ni obavezno asinhron– AJAX je osnovni element sadasnjih Web aplikacija