Java Script Veba IX Model objekata dokumenta window
Java Script Vežba IX
Model objekata dokumenta window history link anchor textarea password layer document location toolbar, etc form applet image radio button checkbox reset fileupload area select option submit 2
Model objekata dokumenta window document form Objekat prozora Objekat dokumenta Objekat obrasca Elementi obrasca textarea password radio button select checkbox reset option submit 3
Jednostavan dokument <html> <head><title> Simple doc </title></head> <body> <h 1> Hello </h 1> </body> </html> Window Document 4
Dodavanje obrasca <html> <head><title> Simple doc </title></head> <body> <h 1> Hello </h 1> <form> </body> </html> Window Document Form 5
Dodavanje elementa za unos teksta <html> <head><title> Simple doc </title></head> <body> <h 1> Hello </h 1> <form> <input type=“text”> </form> </body> </html> Window Document Form Text 6
Dodavanje elementa dugme <html> <head><title> Simple doc </title></head> <body> <h 1> Hello </h 1> <form> <input type=“text”> <input type=“button”> </form> </body> </html> Window Document Form Text Button 7
Reference objekata q Pošto je dokument učitan u čitač, svi njegovi objekti su sigurno uskladišteni u memoriji, sa strukturom koja zadržava hijerarhiju po specifikaciji čitača q Kako bi skript kontrolisao jedan od objekata – mora da postoji način da se pokaže na objekat i saznaju podaci koje sadrži q Jezik Java. Script koristi strukturu koja zadržava hijerarhiju kako bi omogućio skriptovima da stupe u vezu sa objektima u dokumentu – referenca objekta 8
Imenovanje objekta q Za referenciranje objekata u skriptovima – dodeljivanje imena svakom objektu kome se može dodeliti skript u HTML-u q Skriptabilni čitači prihvataju opcioni atribut oznake koji se zove name q Omogućava da se svakom objektu dodeli jedinstveno ime q Referenca svakog objekta mora da uključi korake duž hijerarhije objekata, počev od vrha do samog objekta, bez obzira koliko nivoa će biti uključeno q U jeziku Java. Scripta svaki uzastopni objekat tačkom je odvojen od drugog objekta 9
Reference prozora, dokumenta i objekta obrasca window. document window. document. form. Name Window Document Form 10
Referenca objekta – polje za unos teksta window. document Window Document window. document. form. Name Form window. document. form. Name. text. Name Text 11
Referenca objekta dugme window. document. form. Name. text. Name window. document. form. Name. button. Name Window Document Form Text Button 12
Definicija objekata q U Java. Scriptu objekat može biti: polje za unos teksta, dugme ili ceo HTML dokument q Svaki od objekata je jedinstven q Tri najvažnije odlike objekata definišu kako izgleda, kako se ponaša i kako ga skript kontroliše, to su: v svojstva (properties) v metodi v procedure za obradu događaja 13
Svojstva objekata u Java. Scriptu q Svojstva HTML objekta najčešće se podešavaju atributima HTML oznaka q Prisustvo Java. Scripta često dodaje opcione atribute čija se inicijalna vrednost može modifikovati kada se dokument učita q Na primer, sledeća HTML oznaka definiše objekat dugme koji dodeljuje vrednosti za dva svojstva: <input type=“button” name=“dugme” value=“pritisni dugme”> q Ne moraju se za svaki objekat podesiti sva svojstva – većina svojstava ima početne vrednosti koje se automatski dodeljuju ako se ništa ne podešava u HTML-u 14
Svojstva objekata u Java. Scriptu q Za pristupanje svojstvima objekata u sintaksi se koristi tačka, kao u hijerarhijskoj šemi adresiranja q Kako je svojstvo sadržano u objektu, njegova referenca se sastoji od reference objekta i još jednog dodatka za svojstvo 1. Za oznaku objekta dugme: <input type=“button” name=“dugme” value=“Pritisnite dugme”> q Referenca svojstva bila bi: document. form. Name. dugme. value 2. Za oznaku objekta za unos teksta: <input type=“text” name=“podatak” value=“Unesite podatak”> q Referenca svojstva bila bi: document. form. Name. podatak. value 15
Svojstva objekata u Java. Scriptu q S obzirom da se samo jedan dokument može naći u prozoru, referenca objekta u dokumentu može da izostavi deo window q Dugme i polje za unos teksta imaju svojstvo value q Za svaki objekat svojstva value predstavljaju sasvim različite atribute 1. 2. Kod dugmeta svojstvo value određuje naziv dugmeta Kod polja za unos teksta, svojstvo value preslikava tekući tekst u polje q Hijerarhijska šema referenciranja pomaže da čitač tačno locira objekat i svojstvo koji su potrebni u skriptu q Dve stavke u dokumentu ne mogu imati istu referencu 16
Metodi q Metod – akcija objekta - vrsta komandi q Jedan objekat može imati bilo koji broj metoda koji su s njim povezani (uključujući nijedan) q Format za metode zahteva da se oni završe parom zagrada q Pokretanje metoda – naredba Java. Scripta mora da sadrži njegovu referencu: document. order. Form. submit() q Ponekad metod zahteva da se pošalju i dodatne informacije – parametri i argumenti document. write (“This browser is version” + navigator. app. Version) document. write (“of <b>” + navigator. app. Name + “</b>”) 17
Obrada događaja u Java. Scriptu Atribut obrade događaja Primenjuje se na: Događaj nastupa kad: on. Click Polja za potvrdu, hiperveze, aktivno mesto na slici, dugmad, radio-dugmad, dugmad Submit i Reset Oznake: <a>, <body>, <input> Posetilac pritisne mišem element na obrascu ili hipervezu. on. Load Telo dokumenta Oznake: <body>, <img> Čitač Weba učitava Web stranicu. on. Mouse. Over Područja, hiperveze Oznake: <a>, <body>, <input> Posetilac pomeri pokazivač miša u područje mapirane slike ili na hipervezu. on. Reset Obrasce Oznake: <form> Posetilac pritisne dugme Reset. on. Submit Obrasce Oznake: <form> Posetilac pritisne dugme Submit. on. Error Slike, prozore Oznake: <body>, <img> Čitač naiđe na grešku kada učitava sliku ili Web stranicu. 18
Primer 10. <html> <head> <title> Obrada događaja Click </title> </head> <body> <form> Primer poziva dijaloga: <input type="submit" on. Click="alert('Submit Me!')"> <input type="radio" name="radset" on. Click="alert('Radio Selected!')"> </form> </body> </html> Snimite dokument pod nazivom Primer 10. html na D disk (D: Grupa IJava. ScriptPrimer 10. html) 19
Primer 11. <html> <head> <title> Obrada događaja Click </title> </head> <body> <a href="http: //www. htmlgoodies. com" on. Click="alert('Pristupamo sajtu o HTML-u. ? ')">HTML Goodies </a> </body> </html> Snimite dokument pod nazivom Primer 11. html na D disk (D: Grupa IJava. ScriptPrimer 11. html) www. html. goodies. com 20
Primer 12. <html> <head> <title> Obrada događaja Mouse. Over </title> </head> <body bgcolor=“#ffffff" text=“#000000" link=“#0000 ff" vlink=“#800080" alink=“#ff 0000"> <p> </p> <center> <font size="+2"> <a href="" on. Mouse. Over="document. bg. Color='black'">Black</a> <a href="" on. Mouse. Over="document. bg. Color='green'">Green</a> <a href="" on. Mouse. Over="document. bg. Color='yellow'">Yellow</a> <a href="" on. Mouse. Over="document. bg. Color='red'">Red</a> <a href="" on. Mouse. Over="document. bg. Color='brown'">Brown</a> <a href="" on. Mouse. Over="document. bg. Color='white'">White</a> </font> </center> </body> </html> Snimite dokument pod nazivom Primer 12. html na D disk (D: Grupa IJava. ScriptPrimer 12. html) 21
Primer 13. <html> <head> <title> Obrada događaja Error </title> <script type="text/javascript"> function abort. Image() { alert('Error: Loading of the image was aborted'); } </script> </head> <body> <img src="image. gif" on. Error="abort. Image()"> </body> </html> Snimite dokument pod nazivom Primer 13. html na D disk (D: Grupa IJava. ScriptPrimer 13. html) 22
Primer 13 a. <html> <head> <title> Obrada događaja Error </title> </head> <body> <img src="image. gif" on. Error="alert('The image could not be loaded. ')"> </body> </html> Snimite dokument pod nazivom Primer 13 a. html na D disk (D: Grupa IJava. ScriptPrimer 13 a. html) 23
Primer 14. <html> <head> <title> Obrada događaja Submit i Load </title> <script type="text/javascript"> function load() { window. status="Page is loaded“; } </script> </head> <body on. Load="load()"> <form name="testform" action="http: //www. nstrade. net/forma. php? action=proizvod" on. Submit="alert('Hello' +document. testform. fname. value+ '!')"> What is your name? <input type="text" name="fname“ value=“”> <input type="submit" value="Submit"> </form> </body> </html> Snimite dokument pod nazivom Primer 14. html na D disk (D: Grupa IJava. ScriptPrimer 14. html) 24
Primer 15. <html> <head> <title> Obrada događaja Reset </title> </head> <body> <form on. Reset="alert('The form will be reset')"> Firstname: <input type="text" name="fname"> Lastname: <input type="text“ name="lname"> <input type="reset“ value="Reset"> </form> </body> </html> Snimite dokument pod nazivom Primer 15. html na D disk (D: Grupa IJava. ScriptPrimer 15. html) 25
Java. Script nizovi
Java. Script nizovi q Niz je promenljiva koja sadrži skup vrednosti istih tipova podataka q Na primer, za prodaju pet predmeta prati se količina i cena svakog predmeta: var Item. Count 1, Item. Count 2, Item. Count 3, Item. Count 4, Item. Count 5 var Item. Price 1, Item. Price 2, Item. Price 3, Item. Price 4, Item. Price 5 q Inventar od 100 različitih predmeta – mnogo vremena za deklaraciju i unos naziva promenljivih u iskazima funkcija u kojima se obrađuju svi predmeti 27
Java. Script nizovi q Java. Script omogućava formiranje jedne promenljive koja može da skladišti proizvoljan broj vrednosti – niz q Na primer, nizovi koji mogu da skladište količinu i cenu za svaki od 100 predmeta: var Item. Count = new Array(100); var Item. Price = new Array (100); q Svaki od dva niza Item. Count i Item. Price ima 100 područja za smeštanje koja se nazivaju elementi, a svaki element funkcioniše kao promenljiva, u kojoj svaki element skladišti jednu vrednost 28
Java. Script nizovi q Svakom elementu niza pristupa se preko indeksa koristeći sledeću sintaksu: Ime. Niza[Index] q Prvi predmet u nizu ima indeks nula (0). Da bi se na primer postavila cena i količina predmeta 1, potrebno je napisati: q v Item. Count[0] = 5; v Item. Price[0] = 125. 50; Količina i cena predmeta 100 smešta se u elemenat niza sa indeksom 99 sledećim iskazom: v Item. Count[99] = 10; v Item. Price[99] = 88. 66; 29
![Definicija niza elemenata var my. Array= new Array(3) Broj elemenata niza my. Array[0]="ant"; my.](http://slidetodoc.com/presentation_image_h2/87825c75988e6f04b698ea6931ed7dae/image-30.jpg "Definicija niza elemenata var my. Array= new Array(3) Broj elemenata niza my. Array[0]=\"ant\"; my.")
Definicija niza elemenata var my. Array= new Array(3) Broj elemenata niza my. Array[0]="ant"; my. Array[1]="bat"; Zadavanje elemenata niza my. Array[2]="cat"; document. write ("The third element is "+my. Array[2]); 30
Primer 16. <html> <head> <title> Primer nesortiranog niza </title> </head> <body> <script type="text/javascript"> <!-var my. Array = new Array(); my. Array[0] = "Cricket"; my. Array[1] = "Baseball"; my. Array[2] = "Football"; document. write(my. Array[0]+ " " + my. Array[1] + " " + my. Array[2]); //--> </script> </body> </html> Snimite dokument pod nazivom Primer 16. html na D disk (D: Grupa IJava. ScriptPrimer 16. html) 31
Primer 17. <html> <body> <title> Primer sortiranog niza </title> <script type="text/javascript"> <!-var my. Array = new Array(3); my. Array[0] = "Cricket"; my. Array[1] = "Baseball"; my. Array[2] = "Football"; my. Array. sort(); document. write(my. Array[0]+ " " + my. Array[1] + " " + my. Array[2]); //--> </script> </body> </html> Snimite dokument pod nazivom Primer 17. html na D disk (D: Grupa IJava. ScriptPrimer 17. html) 32
Primer 18. Napravite stranicu na kojoj će se ispisati svi elementi niza, kao i rezultat množenja drugog i trećeg elementa niza. Niz sadrži pet brojeva: 15, 89, 4, 61, 5 Snimite dokument pod nazivom Primer 18. html na D disk: (D: Grupa IJava. ScriptPrimer 18. html) 33
Primer 18. <html> <head> <title> Proizvod elemenata niza </title> </head> <body> <script type="text/javascript"> var my. Array = new Array(5); my. Array[0] = 15; my. Array[1] = 89; my. Array[2] = 4; my. Array[3] = 61; my. Array[4] = 5; var my. Total = my. Array[1] * my. Array[2]; document. write ("Elementi niza su: " +my. Array[0]+ " " + my. Array[1]+ " " +my. Array[2]+ " " +my. Array[3]+ " " + my. Array[4]+ " <hr> <b> Proizvod drugog i trećeg elementa niza je: </b>" +my. Total+ ". "); </script> </body> </html> 34
Java Script Vežba IX
- Slides: 35
