Java Script Vežba IX
Model objekata dokumenta
Model objekata dokumenta Objekat prozora Objekat dokumenta Objekat obrasca Elementi obrasca
Jednostavan dokument <html> <head><title> Simple doc </title></head> <body> <h1> Hello </h1> </body> </html> Window Document
Dodavanje obrasca <html> <head><title> Simple doc </title></head> <body> <h1> Hello </h1> <form> </form> </body> </html> Window Document Form
Dodavanje elementa za unos teksta <html> <head><title> Simple doc </title></head> <body> <h1> Hello </h1> <form> <input type=“text”> </form> </body> </html> Window Document Form Text
Dodavanje elementa dugme <html> <head><title> Simple doc </title></head> <body> <h1> Hello </h1> <form> <input type=“text”> <input type=“button”> </form> </body> </html> Window Document Form Text Button
Reference objekata 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 Kako bi skript kontrolisao jedan od objekata – mora da postoji način da se pokaže na objekat i saznaju podaci koje sadrži Jezik JavaScript koristi strukturu koja zadržava hijerarhiju kako bi omogućio skriptovima da stupe u vezu sa objektima u dokumentu – referenca objekta
Imenovanje objekta Za referenciranje objekata u skriptovima – dodeljivanje imena svakom objektu kome se može dodeliti skript u HTML-u Skriptabilni čitači prihvataju opcioni atribut oznake koji se zove name Omogućava da se svakom objektu dodeli jedinstveno ime 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 U jeziku JavaScripta svaki uzastopni objekat tačkom je odvojen od drugog objekta
Reference prozora, dokumenta i objekta obrasca window window.document window.document.formName Window Document Window Document Form
Referenca objekta – polje za unos teksta window window.document window.document.formName window.document.formName.textName Window Document Form Text
Referenca objekta dugme window window.document window.document.formName window.document.formName.textName window.document.formName.buttonName Window Document Form Text Button
Definicija objekata U JavaScriptu objekat može biti: polje za unos teksta, dugme ili ceo HTML dokument Svaki od objekata je jedinstven Tri najvažnije odlike objekata definišu kako izgleda, kako se ponaša i kako ga skript kontroliše, to su: svojstva (properties) metodi procedure za obradu događaja
Svojstva objekata u JavaScriptu Svojstva HTML objekta najčešće se podešavaju atributima HTML oznaka Prisustvo JavaScripta često dodaje opcione atribute čija se inicijalna vrednost može modifikovati kada se dokument učita Na primer, sledeća HTML oznaka definiše objekat dugme koji dodeljuje vrednosti za dva svojstva: <input type=“button” name=“dugme” value=“pritisni dugme”> 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
Svojstva objekata u JavaScriptu Za pristupanje svojstvima objekata u sintaksi se koristi tačka, kao u hijerarhijskoj šemi adresiranja Kako je svojstvo sadržano u objektu, njegova referenca se sastoji od reference objekta i još jednog dodatka za svojstvo Za oznaku objekta dugme: <input type=“button” name=“dugme” value=“Pritisnite dugme”> Referenca svojstva bila bi: document.formName.dugme.value Za oznaku objekta za unos teksta: <input type=“text” name=“podatak” value=“Unesite podatak”> document.formName.podatak.value
Svojstva objekata u JavaScriptu S obzirom da se samo jedan dokument može naći u prozoru, referenca objekta u dokumentu može da izostavi deo window Dugme i polje za unos teksta imaju svojstvo value Za svaki objekat svojstva value predstavljaju sasvim različite atribute Kod dugmeta svojstvo value određuje naziv dugmeta Kod polja za unos teksta, svojstvo value preslikava tekući tekst u polje Hijerarhijska šema referenciranja pomaže da čitač tačno locira objekat i svojstvo koji su potrebni u skriptu Dve stavke u dokumentu ne mogu imati istu referencu
Metodi Metod – akcija objekta - vrsta komandi Jedan objekat može imati bilo koji broj metoda koji su s njim povezani (uključujući nijedan) Format za metode zahteva da se oni završe parom zagrada Pokretanje metoda – naredba JavaScripta mora da sadrži njegovu referencu: document.orderForm.submit() Ponekad metod zahteva da se pošalju i dodatne informacije – parametri i argumenti document.write (“This browser is version” + navigator.appVersion) document.write (“of <b>” + navigator.appName + “</b>”)
Obrada događaja u JavaScriptu Atribut obrade događaja Primenjuje se na: Događaj nastupa kad: onClick 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. onLoad Telo dokumenta Oznake: <body>, <img> Čitač Weba učitava Web stranicu. onMouseOver Područja, hiperveze Posetilac pomeri pokazivač miša u područje mapirane slike ili na hipervezu. onReset Obrasce Oznake: <form> Posetilac pritisne dugme Reset. onSubmit Posetilac pritisne dugme Submit. onError Slike, prozore Oznake:<body>, <img> Čitač naiđe na grešku kada učitava sliku ili Web stranicu.
Primer 10. <html> <head> <title> Obrada događaja Click </title> </head> <body> <form> Primer poziva dijaloga:<br> <input type="submit" onClick="alert('Submit Me!')"> <input type="radio" name="radset" onClick="alert('Radio Selected!')"> <br> </form> </body> </html> Snimite dokument pod nazivom Primer10.html na D disk (D:\Grupa I\JavaScript\Primer10.html)
Primer 11. <html> <head> <title> Obrada događaja Click </title> </head> <body> <a href="http://www.htmlgoodies.com" onClick="alert('Pristupamo sajtu o HTML-u.?')">HTML Goodies </a> </body> </html> Snimite dokument pod nazivom Primer11.html na D disk (D:\Grupa I\JavaScript\Primer11.html) www.html.goodies.com
Primer 12. <html> <head> <title> Obrada događaja MouseOver </title> </head> <body bgcolor=“#ffffff" text=“#000000" link=“#0000ff" vlink=“#800080" alink=“#ff0000"> <p> </p><p> </p> <center> <font size="+2"> <a href="" onMouseOver="document.bgColor='black'">Black</a> <a href="" onMouseOver="document.bgColor='green'">Green</a> <a href="" onMouseOver="document.bgColor='yellow'">Yellow</a> <a href="" onMouseOver="document.bgColor='red'">Red</a> <a href="" onMouseOver="document.bgColor='brown'">Brown</a> <a href="" onMouseOver="document.bgColor='white'">White</a> </font> </center> </body> </html> Snimite dokument pod nazivom Primer12.html na D disk (D:\Grupa I\JavaScript\Primer12.html)
Primer 13. <html> <head> <title> Obrada događaja Error </title> <script type="text/javascript"> function abortImage() { alert('Error: Loading of the image was aborted'); } </script> </head> <body> <img src="image.gif" onError="abortImage()"> </body> </html> Snimite dokument pod nazivom Primer13.html na D disk (D:\Grupa I\JavaScript\Primer13.html)
Primer 13a. <html> <head> <title> Obrada događaja Error </title> </head> <body> <img src="image.gif" onError="alert('The image could not be loaded.')"> </body> </html> Snimite dokument pod nazivom Primer13a.html na D disk (D:\Grupa I\JavaScript\Primer13a.html)
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 onLoad="load()"> <form name="testform" action="http://www.nstrade.net/forma.php?action=proizvod" onSubmit="alert('Hello' +document.testform.fname.value+ '!')"> What is your name? <br> <input type="text" name="fname“ value=“”> <input type="submit" value="Submit"> </form> </body> </html> Snimite dokument pod nazivom Primer14.html na D disk (D:\Grupa I\JavaScript\Primer14.html)
Primer 15. <html> <head> <title> Obrada događaja Reset </title> </head> <body> <form onReset="alert('The form will be reset')"> Firstname: <input type="text" name="fname"> <br> Lastname: <input type="text“ name="lname"> <br> <input type="reset“ value="Reset"> </form> </body> </html> Snimite dokument pod nazivom Primer15.html na D disk (D:\Grupa I\JavaScript\Primer15.html)
JavaScript nizovi
JavaScript nizovi Niz je promenljiva koja sadrži skup vrednosti istih tipova podataka Na primer, za prodaju pet predmeta prati se količina i cena svakog predmeta: var ItemCount1, ItemCount2, ItemCount3, ItemCount4, ItemCount5 var ItemPrice1, ItemPrice2, ItemPrice3, ItemPrice4, ItemPrice5 Inventar od 100 različitih predmeta – mnogo vremena za deklaraciju i unos naziva promenljivih u iskazima funkcija u kojima se obrađuju svi predmeti
JavaScript nizovi JavaScript omogućava formiranje jedne promenljive koja može da skladišti proizvoljan broj vrednosti – niz Na primer, nizovi koji mogu da skladište količinu i cenu za svaki od 100 predmeta: var ItemCount = new Array(100); var ItemPrice = new Array (100); Svaki od dva niza ItemCount i ItemPrice 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
JavaScript nizovi Svakom elementu niza pristupa se preko indeksa koristeći sledeću sintaksu: ImeNiza[Index] Prvi predmet u nizu ima indeks nula (0). Da bi se na primer postavila cena i količina predmeta 1, potrebno je napisati: ItemCount[0] = 5; ItemPrice[0] = 125.50; Količina i cena predmeta 100 smešta se u elemenat niza sa indeksom 99 sledećim iskazom: ItemCount[99] = 10; ItemPrice[99] = 88.66;
Definicija niza elemenata var myArray= new Array(3) myArray[0]="ant"; myArray[1]="bat"; myArray[2]="cat"; document.write ("The third element is "+myArray[2]); Broj elemenata niza Zadavanje elemenata niza
Primer 16. <html> <head> <title> Primer nesortiranog niza </title> </head> <body> <script type="text/javascript"> <!-- var myArray = new Array(); myArray[0] = "Cricket"; myArray[1] = "Baseball"; myArray[2] = "Football"; document.write(myArray[0]+ "<br>" + myArray[1] + "<br>" + myArray[2]); //--> </script> </body> </html> Snimite dokument pod nazivom Primer16.html na D disk (D:\Grupa I\JavaScript\Primer16.html)
Primer 17. <html> <body> <title> Primer sortiranog niza </title> <script type="text/javascript"> <!-- var myArray = new Array(3); myArray[0] = "Cricket"; myArray[1] = "Baseball"; myArray[2] = "Football"; myArray.sort(); document.write(myArray[0]+ "<br>" + myArray[1] + "<br>" + myArray[2]); //--> </script> </body> </html> Snimite dokument pod nazivom Primer17.html na D disk (D:\Grupa I\JavaScript\Primer17.html)
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 Primer18.html na D disk: (D:\Grupa I\JavaScript\Primer18.html)
Primer 18. <html> <head> <title> Proizvod elemenata niza </title> </head> <body> <script type="text/javascript"> var myArray = new Array(5); myArray[0] = 15; myArray[1] = 89; myArray[2] = 4; myArray[3] = 61; myArray[4] = 5; var myTotal = myArray[1] * myArray[2]; document.write ("Elementi niza su: <br>" +myArray[0]+ "<br>" + myArray[1]+ "<br>" +myArray[2]+ "<br>" +myArray[3]+ "<br>" + myArray[4]+ "<br> <hr> <b> Proizvod drugog i trećeg elementa niza je:</b>" +myTotal+ " . "); </script> </body> </html>
Java Script Vežba IX