4. vježbe iz WEB programiranja četvrtak, 22. ožujka 2012. JavaScript 1. dio JavaScript i Što je DOM? Kako JS koristi DOM? Pristup elementima dokumenta Promjena i učitavanje vrijednosti tagova Primjer 1. Navigator Object Zadatak 1. Plugins Sadrži svojstva i metode koje opisuju preglednik (eng. browser) <html> <head><title>navigator Object</title></head> <body> <script type="text/jscript"> document.write( <strong>\ The properties of the \"navigator\" object are:</strong><br/>"); for(var property in navigator) document.write(property + "<br/>"); </script> </body> </html> Napišite JavaScript koji putem Prompt okvira zahtjeva naziv plugina i provjerava da li imate zadani plugin, a nakon toga ispisuje točan naziv i opis. Pomoću Confirm okvira pitajte korisnika da li želi ispis svih pluginova. Ako želi, ispišite ih u dokument, ako ne želi, obavijestite ga o tome putem Alert okvira! 1
Primjer 2. Window Object Sadrži mnoštvo objekata, metoda i svojstava Baza za sve objekte ispuštamo ga prilikom referenciranja na metode i svojstva Metode objekta Window <html> <head><title>opening a New Window</title> <script type="text/javascript"> function noviprozor() var winobj=window.open("zaprege.jpg", "Konjske zaprege"); </script> </head> <body> <h2>konjske zaprege 2008</h2> <h3><a href="javascript:noviprozor()">ovdje</a> kliknite kako biste vidjeli sliku</h3> </body> </html> Zadatak 2. setinterval() Napišite JS koji u statusnoj i naslovnoj traci u obliku pomičnog teksta ispisuje koliko je dana ostalo do Božića. Tijelo dokumenta možete ostaviti prazno. Uputa: Koristite metodu setinterval() objekta window te metode gettime() objekta Date Referenca: http://www.w3schools.com/js/js_ob j_date.asp 2
Document Object DOM - hijerarhijska struktura stabla, sastoji se od objekata koje povezuje unutar dokumenta Elementi HTML dokumenta kao što su slike, forme, linkovi, gumbi imaju METODE i SVOJSTVA za manipulaciju preko JS Forme Što je forma ili obrazac? Napraviti vježbe na W3C Napravite formu koja sadrži polja za unos imena i prezimena, datuma i godine rođenja (padajuće liste), spol (radio button) i studij (checkbox) http://www.w3schools.com/html/html_forms.asp Zadatak 3. password objekt Napišite formu koja provjerava točnost passworda i u skladu sa rezultatom daje odgovarajuću poruku. 3
Zadatak 4. Drop-Down liste Napišite formu koja nudi padajuću listu s nazivima gradova Zagreb, Split, Rijeka i Osijek te nudi mogućnost višestrukog izbora. Nakon izbora, klikom na Submit treba se pozvati JavaScript funkcija showme() koja će u Alert okviru ispisati izabrane gradove. Zadatak 5. Prvi dio Napravite formu koja putem: Polja za tekst učitava ime i prezime, telefon, e-mail adresu Checkbox-a učitava studij, Radiobutton-a spol Izbornika za odabir datum rođenja Podatke treba ispisati u novom prozoru, te ponuditi link kojim se prozor može zatvoriti O formama ili obrascima - 1 O formama ili obrascima - 2 Definicija forme u HTML-u: <form name="forma_podaci"> </form> Radiobutton: <input type="radio" name="spol" value='1'> Polje za unos teksta: Checkbox: <form name="forma_podaci"> <input type="text" size="50" name="ime_korisnika"/> </form> Radiobutton: <select name="godina"> <option value="1986 >1986 </option> <option value="1987">1987 </option> </select> <input type="checkbox" name="nast_studij"/> NAPOMENA: Napisati Java-Script koji će generirati HTML kod za padajuću listu u kojoj su upisane godine od 1920. do 1998. O formama ili obrascima - 3 Pristup formi pomoću JS Button: <input type="button" value="prikaži podatke" onclick="prikaziformu(document.forma_podaci)"/> function prikaziformu(forma) onclick="prikaziformu(document.for ma_podaci)" 4
Zadatak 5. Drugi dio U novom prozoru koji napravite ispišite: Vaše ime: Vaš telefon: Ukoliko je označen: diplomski studij, napišite poruku: Nemojte varati! nastavnički studij: Nemojte biti strogi prema učenicima! diplomski + nastavnički: Nemojte varati i nemojte biti strogi! niti jedan: Izaberite nešto! Ime_i_prezime je rođen/a datum_rođenja. (na osnovu spola) Kako dohvatiti podatak u formi? Vrijednost u polju za unos teksta: forma.ime_korisnika.value Kako ispitati je li checkbox označen? forma.nast_studij.checked Kako ispitati koji je radio-button označen (može biti samo jedan)? <input type="radio" name="spol" value='1'> <input type="radio" name="spol" value= 0'> Što nam treba? vrijednost radio-button-a, tj. vrijednost atributa value Kako? <input type="radio" name="spol" value='1'> Možemo dohvatiti svaki član niza Spol[j], gdje je 1 j spol.length Array niz ili polje Kako dohvatiti vrijednost označenog radio-buttona? for(var j=0; j<forma.spol.length; j++) if(forma.spol[j].checked) break; if(forma.spol[j].value=='1') Zanima nas vrijednost označenog Spol[j].checked = TRUE, FALSE Zadatak 5. Treći dio Napišite funkciju koja zatvara prozor kojeg ste otvorili. U tijelo dokumenta stavite link koji aktivira funkciju! <a href="javascript:ime_funkcije()"> Zatvori prozor!!!</a> 5