Download presentation
Presentation is loading. Please wait.
1
DEO3: jezici i alati za web programiranje
2
DoM i jQuery
3
DOM Document Object Model (DOM) je konvencija nezavisna od platforme i programskog jezika za prikazivanje i interakciju sa objektima u HTML, XHTML i XML dokumentima. Obezbeđuje prikaz strukture dokumenta i definiše način na koji programi mogu da pristupe ovoj strukturi, tako da menjaju nju,stilove i sadržaj dokumenta. Čvorovi svakog dokumenta su organizovani u strukturi stabla – DOM stablo- koje ima čvorove i objekte koji imaju određena svojstva i metode. Sva svojstva, metode i događaji su organizovani kao objekti. U osnovi, povezuje stranice sa skriptovima i programskim jezicima.
4
HTML DOM DOM je podeljen na tri dela:
Core DOM – model za sve tipove dokumenta XML DOM - model za XML dokumenta HTML DOM - model za HTML dokumenta HTML DOM je standard za prikupljanje, menjanje, dodavanje i brisanje HTML elemenata.
5
<html> <head> <title>Sample DOM Document</title> </head> <body> <h1>An HTML Document</h1> <p>This is a <i>simple</i> document. </body> </html>
6
Document Model pomoću kojeg browser radi sa stranicom <html> <head> <body> <title> "Sample DOM Document" <h1> <p> "An HTML Document" "This is a" <i> "document" "simple"
7
Tipovi čvorova Elementi (HTML tag) Tekst
This is a paragraph of text with a <a href="/path/page.html">link in it</a>. </p> HTML Elementi (HTML tag) Mogu da imaju decu i/ili atribute Tekst Atributi tekst/atributi su deca element čvora Ne mogu imati naslednika Ne crtaju se obično kada se prikazuje DOM stablo
8
Tipovi čvorova <p> This is a paragraph of text with a
<a href="/path/page.html">link in it</a>. </p> HTML
9
HTML DOM primer
10
DOM i JavaScript DOM obezbeđuje strukturirane sadržaje sa stranice JavaScriptu Pomoću DOM-a JS može da: Menja sve HTML elemente strane Menja sve HTML atribute stranice Menja sve CSS stilove stranice Uklanja postojeće HTML elemente i atribute Dodaje nove HTML elemente i atribute Reguje na HTML događaje Kreira nove HTML događaje
11
JavaScript - HTML DOM metode
HTML DOM metode su akcije koje se mogu izvesti na HTML elementima. HTML svojstva su vrednosti HTML elemenata koje se mogu postavljati ili menjati.
12
JavaScript HTML DOM Document
HTML DOM document objekat je vlasnik svih ostalih objekata na web stranici.
13
JavaScript HTML DOM Document
14
jQuery jQuery je JavaScript biblioteka Besplatan i otvorenog koda
To je biblioteka za manipulaciju DOM-om, jer pojednostavljuje sintaksu za pronalaženje i manipulisanje DOM elementima. Npr može se koristiti za pronalaženje elemenata sa određenim svojstvom (h1 tagom npr), za menjanje jednog ili više njegovih atributa (npr. boja i vidljivost) ili da učini da ovakvi elementi reaguju na neki događaj.
15
jQuery - prednosti Ohrabruje odvajanje JavaScripta od HTML-a.
Jasnoća. Omogućava jednostavnost kod rada sa elementika kao sto su ulančane funkcije i sl. Eliminiše nekompatibilnosti između browser-a. Proširiv je. Novi događaji, elementi i metode se mogu jednostavno dodati i ponovno koristiti kao plugin.
16
Deo 3: Server-side kreiranje web stranica
Deo 1: Statički formati dokumenata za web Formati dokumenta: HTML i CSS Formati podataka: XML, DTD i Schema, XSL High-end grafički formati: VRML, SVG Deo 2: Client-side interaktivne web stranice Client-Side Scripting jezici: JavaScript, VBScript Client-Side ugrađene aplikacije: Java applets, ActiveX, Flash Deo 3: Server-side kreiranje web stranica Script jezici: CGI i Perl, PHP, ColdFusion High-level framework-ovi: Servlets i JSP, ASP, ASP.NET Deo 4: Arhitekture web servisa WSDL, SOAP
17
Client-side ugrađene aplikacije
18
Java apleti Pomoću Jave se mogu napraviti dve vrste programa: aplikacije i apleti. Aplikacija je program koji se izvršava na računaru, pod njegovim operativnim sistemom. Java aplet je mala Java aplikacija koje se isporučuje korisnicima u formi bajtkoda i izvršava u okviru browser-a. Može da se pojavi u frejmu na web stranici, u novom prozoru ili San-ovom AppletViewer-u. Aplet može da bude potpuno funkcionalna Java aplikacija pošto može da koristi kompletan Java API.
19
Java apleti Mogu biti napisani u bilo kom programskom jeziku koji se prevodi u Java bajtkod. Obično se pišu u Javi mada se mogu koristiti i drugi jezici popu Pascal, Scala, Jython, JRuby itd. Bajtkod je nezavisan od platforme, te se Java apleti mogu izvršavati od strane browser-a za različite platforme, uključujući: Windows, Unix, Linux, FreeBSD. Za razliku od JavaScripta, imaju pristup 3D hardverskoj akceleraciji, zbog čega su pogodni za netrivijalne vizuelizacije.
20
Java apleti vs aplikacije
Aplet je java klasa koja nasledjuje java.applet.Applet klasu. main() metoda ne postoji Apleti su dizajnirani da budu ugrađeni u HTML stranu mada se mogu pokrenuti i pomoću appletviewer-a- Kada korisnik vidi HTML stranu koja ima aplet, kod se preizima na korisnikovu mašinu (obično kao .jar fajl). Neophodna je JVM kako bi se pregledao aplet. JVM može da bude plug-in za browser ili odvojeno okruženje. Apleti imaju striktna sigurnostna pravila koja primenjuje browser.
21
Primer1 Ilustruje upotrebu Java apleta kroz java.applet paket.
Koristi klase iz Java Abstract Window Toolkit (AWT) import java.applet.Applet; import java.awt.*; public class HelloWorld extends Applet { // Stampanje poruke na ekranu, pozicija(x=20, y=10). public void paint(Graphics g) { g.drawString("Hello, world!", 20, 10); } }
22
Primer1 Nakon kompajliranja rezultujući .class fajl može da se postavi na web server i pozove iz HTML-a koristeći <applet> ili <object> tag. <!DOCTYPE html> <html> <head> <title>HelloWorld_example.html</title> </head> <body> <h1>A Java applet example</h1> <p> <applet code="HelloWorld.class" height="40" width="200"> This is where HelloWorld.class runs.- ovaj tekst se ignoriše </applet> </p> </body> </html> Kada se pozove ova stranica ispisaće se A Java applet example Hello, world!
23
Primer1 Kako bi se smanjilo vreme preuzimanja, apleti se mogu isporučivati kao jar fajlovi. U prethodnom primeru, koristio bi se sledeći kod, ukoliko bi sve potrebne klase bile uključene u primer.jar fajl: <p><applet archive="example.jar" code="HelloWorld" height="40" width="200"> This is where HelloWorld.class runs. </applet></p>
24
Primer 2: animacija u apletu
Apleti se najviše koriste kod igara i animacija. Primer: import java.awt.*; import java.applet.*; public class AnimationExample extends Applet { Image picture; public void init() { picture =getImage(getDocumentBase(),"bike_1.gif"); } public void paint(Graphics g) { for(int i=0;i<500;i++){ g.drawImage (picture, i,30, this); try{Thread.sleep(100);}catch(Exception e){} } } }
25
Primer 3
26
Prednosti Podržani od većine browser-a
Većina browser-a kešira aplete. Apleti se vremenom lakše koriste: nakon izvršavanja prvog apleta, JVM je već aktiviran te se pokreće brzo. Može da pomeri obradu sa servera na klijenta. Nepoverljivi aplet nema pristup lokalnoj mašini već samo serveru sa kojeg je potekao (sigurnost) Java apleti su brzi i mogu da imaju sličan performans kao nativno instaliran softver.
27
Nedostaci Zavise od JRE (Java Runtime Environment). Obično zahteva plug-in za browser. Ukoliko aplet zahteva noviji JRE ili određeni JRE, potrebno je prvo preuzimanje ogromnog JRE okruženja. Pojedini browseri posebno za mobilne telefone sa iOS ili Androidom, ne podržavaju aplete.
28
Java apleti Više o programiranju apleta se može pogledati na:
29
AcitveX Je skup objektno orjentisanih tehnologija i alata koje je razvio Microsoft za Internet Explorer kako bi se omogućilo učitavanje drugih softverskih aplikacija u okviru browser-a. ActiveX kontrole mogu da se isprogramiraju u različitim programskim jezicima kao što su Java, C, C++, VisualBasic. Slične su Java apletima. Za razliku od njih imaju potpuni pristup Windows operativnom sistemu, što ih čini moćnijim od apleta ali donosi i manju sigurnost. Apleti rade na bilo kojoj platformi dok ActiveX kontrole samo na Windows-u.
30
VBScript Visual Basic Scripting Edition, skripting jezik koje je razvio Microsoft za IE. Bazira se na Visual Basic programskom jeziku, ali je znatno jednostavniji. Sličan je JavaScriptu.
Similar presentations
