Kurs: Advanced Web Application Technologies
Modul: Ubacivanje klijentskog koda i ASP.NET Ajax
Autor: Marko Stojićević
Naziv jedinice: Pisanje klijentskih skriptova
Materijali vezani uz ovu lekciju:
-
Test pisanje klijentskih skriptova -
Pisanje klijentskih skriptova (PDF dokument)
JavaScript
JavaScript je interpreterski jezik. JavaScript je objektno orijentisan jezik. JavaScript kod se može ubaciti direktno u HTML stranu. Dodaje interaktivnost web strani. JavaScript kod se obično smešta u head sekciju HTML dokumenta.
HTML DOM
HTML DOM je W3C standard i predstavlja skraćenicu za Document Object Model za HTML. Definiše standardni skup objekata za HTML tj. za manipulaciju HTML elementima. HTML DOM je platformski i jezički nezavistan.
U tabeli su dati odgovarajući HTML DOM objekti i njihov HTML ekvivalent. Tabela je prva od ukupno tri tabele.
Objekat Document
Obezbeđuje pristup HTML elementima na web strani. Omogućava pristup elementima forme kao i pristup globalnim osobinama kao što su background i foreground color.
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
document.write(document.title + "<br/>");
document.write(document.URL + "<br/>");
document.write(document.referrer);
function ChangeColor()
{
document.body.bgColor="yellow";
}
</script>
getElementById() metoda
Ovde je ilustrovana upoterba ove metode. U HTML delu web strane definisan je anchor element čije je ID myAnchor. Takođe je definisano dugme za koga je definisan klijentski klik događaj. Klikom na dugme poziva se javascript funkcija changeLink(). Uobičajeno da se javascript kod piše unutar head sekcije html dokumenta. Unutar funkcije changeLink bjekat document posredstvom getElementById metode elementu myAnchor elementu i menja adresu i tekst koji se prikazuje na hyperlinku.
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML=“Microsoft“
document.getElementById('myAnchor').href="http://www.microsoft.co.yu" mce_href="http://www.microsoft.co.yu"
//document.getElementById('myAnchor').target="_blank"
document.getElementById('myAnchor').target="_self"
}
</script>
<body>
<form id="form1" runat="server">
<a id="myAnchor" href="http://www.microsoft.com" mce_href="http://www.microsoft.com">Posetite Microsoft</a>
<br /><br />
<input type="button" onclick="changeLink()" value="Promeni link">
</form>
</body>
Objekat window – svojstva
Objekat window se kreira automatski kada se napiše <body> tag.
Svojstvo closed ovog objekta vraća true ukoliko je prozor zatvoren.
Svojstvo document vraća odgovarjući document objekat sadržan u prozoru.
Svojstvo location daje url tekućeg prozora, a takođe se može vršiti redirekcija strane posredstvom ovog svojstva.
Svojstvo parent daje referencu na roditeljski prozor datog frejma.
Svojstvo status se koristi za definisanje poruke na status baru.
Objekat window - metode
Metoda alert se koristi za prikaz poruke upozorenja (ekvivalent MessageBox-u u C#-u).
Metoda blur uklanja fokus sa tekućeg prozora.
Metoda close zatvara prozor.
Metoda confirm služi za prikaz dijaloga za potvrdu.
Metoda focus daje fokus specificiranom prozoru.
Metoda print služi za štampanje tekuće web strane.
Metoda createPopup služi za kreiranje pop-up prozora.
Prikaz poruke upozorenja
Na slici je prikazana upotreba metode alert. Tekst koji se nalazi pod navodnicima prikazuje se korisniku u novom prozoru. Klikom na dugme OK ovaj prozor se zatvara.
<script type="text/javascript">
function upozorenje()
{
alert("Ovo je poruka upozorenja!!")
}
</script>
<input id="Button1" type="button" value="Prikazi" onclick="upozorenje()"/>
Prikaz dijaloga za potvrdu
Upotrebom metode confirm prikazuje se dijalog za potvrdu kao što je to prikazano u nastavku. U zavisnosti od akcije korisnika tj. da li je pritisnuo dugme OK ili Cancel na strani se štampa odgovarajući tekst.
<script type="text/javascript">
function potvrda()
{
var temp=confirm("pritisni dugme")
if (temp==true)
{
document.write("Kliknuli ste na dugme OK!")
}
else
{
document.write("Kliknuli ste na dugme Cancel !")
}
}
</script>
Prikaz polja za unos
Primenom prompt metode kreira se polje za unos podataka kao na slici. Metod prompt vraća rezultat unosa ukoliko je korisnik pritisnuo dugme OK.
<script type="text/javascript">
function unos()
{
var temp=prompt("Unesite vase ime","")
if (temp!=null && temp!="")
{
document.write("Zdravo " + temp + "! Kako ste danas?")
}
}
</script>
Otvaranje novog prozora
JavaScript funkcija otvoriProzor() poziva metodu window.open koja služi za otvaranje novog prozora. Definiše se url strane koju treba otvoriti kao i karakteristike prozora u kome se strana otvara.
<script type="text/javascript">
function otvoriProzor()
{
window.open("http://www.blic.co.yu","prozor","toolbar=yes, location=yes,
directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no,
copyhistory=yes, width=400, height=400")
}
</script>
Redirekcija klijentskog zahteva
Posredstvom location svojstva window objekta može se izvršiti redirekcija klijenta na određenu web stranu. Svojstvo location se može i čitati i setovati.
<script type="text/javascript">
function tekucaLokacija()
{
alert(window.location)
}
function novaLokacija()
{
window.location="nova.htm";
}
</script>
Kreiranje pop-up prozora
Kreira se pozivom metode createPopup(). Linija koda p.document.body pristupa body delu pop-up prozora. Zatim se setuju osobine body dela pop-up prozora.
function show_popup()
{
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="lime"
pbody.style.border="solid black 3px"
pbody.innerHTML="Ovo je pop-up! Klikni van prozora da ga zatvoris."
p.show(200,200,100,150)
// p.show(300,300,150,150,document.body)
}
Objekat form
Predstavlja HTML formu i koristi se za prikupljanje korisničkog ulaza. Svojstvo action (odnosno atribut action unutar form taga) određuje stranu na koju će ulazni podaci biti poslati kada se forma sabmituje. Forma se može submitovati primenom POST ili GET metode. Kod GET metode browser šalje podatke ka web serveru na kraju URL-a koji je definisan atributom action. Kod POST metode browser šalje podatke ka web serveru u posebnoj HTTP poruci. HTML forma se šalje ka serveru primenom submit dugmeta.
Primer GET slanja
Prikaz forme koja se šalje GET metodom. Podaci sa ove forme šalju se na stranu Proba.aspx. Forma sadrži polje za unos čiji je atribut name postavljen na vrednost fname. U Page_Load proceduri na strani Proba.aspx iščitava se vrednost koju je poslala prva forma posredstvom Request klase.
<form action="Proba.aspx" method="get">
Vase ime: <input type="text" name="fname" size="20" />
<br />
<br />
<input type="submit" value="Submit" />
</form>
// fajl Proba.aspx
protected void Page_Load(object sender, EventArgs e)
{
string ime = Request.QueryString["fname"].ToString();
Response.Write("Zdravo" + ime);
}
Pristup objektu Form i elementima forme
Aspx strana sadrži elemenat form čiji je ID mojaForma. Ona sadrži text polje čiji je ID Text1. Objektu Form se pristupa na jedan od četiri načina koji su prikazani u nastavku, a jedan od načina je document.mojaForma. Prikazani su načini pristupa tekst polju na formi.
var x = document.getElementById("mojaForma");
var x = document.mojaForma;
var x = document.forms[0];
var x = document.forms["mojaForma"];
var tekstBoks = document.mojaForma.elements["Text1"];
var tekstBoks = document.mojaForma["Text1"];
var tekstBoks = document.getElementById("Text1");
tekstBoks.value = "Dobar dan";
document.mojaForma[“Text1"].focus();
<form id="mojaForma" runat="server" >
<div>
<input id="Text1" type="text" />
<br />
<br />
</div>
</form>
Objekat Ckeckbox
Na formu su dodata dva check boksa. Prvi check box ima name svojstvo setovano na vrednost "kafa” i valu atribut setovan na vrednost "slag". Drugi check box ima isti name atribut dok je atribut value setovan na vrednost ” secer". Klikom na dugme na formi poziva se javascript funkcija createOrder()". Korišćenjem izraza document.form1["kafa"] dobija se niz objekata check boksova koji imaju name atribut setovan na vrednost kafa. Posredstvom checked svojstva ispituje se da li je određeni check boks selektovan a ako jeste čita se njegov atribut value I prikazuje se odgovrajuća poruka.
function createOrder()
{
var kafa=document.form1["kafa"];
txt=""
for (i=0;i<kafa.length; i++)
{
if (kafa[i].checked)
{
txt=txt + kafa[i].value + "om "
}
}
if(txt !="")
document.form1["porudzbina"].value="Narucili ste kafu sa " + txt
else
document.form1["porudzbina"].value = "Narucili ste kafu bez secera i slaga"
}
<form id="form1" runat="server">
<div>
<input type="checkbox" name="kafa" value="slag">Sa slagom<br />
<input type="checkbox" name="kafa" value="secer">Sa secerom<br />
<br />
<input type="button" onclick="createOrder()" value="Porudzbina"><br />
<br />
<br />
<input type="text" id="porudzbina" size="50">
</div>
</form>
Objekat Radio
Na formi čiji je ID form1 nalazi se 4 radio dugmeta. Sva radio dugmad imaju name atribut "browser" dok im se vrednost atributa value razlikuje. Korišćenjem izraza document.form1["browser"] kreira se niz objekata radio. Posredstvom checked svojstva ispituje se da li je određenio radio dugme selektovano a ako jeste čita se njegov atribut value i prikazuje se odgovrajuća poruka.
<script type="text/javascript">
function provera()
{
var radio = document.form1["browser"];
for(i=0; i< radio.length; i++)
{
if(radio[i].checked == true)
{
document.form1["Text1"].value = radio[i].value;
}
}
}
</script>
<form id="form1" runat="server">
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer <br />
<input type="radio" name="browser" value="Firefox">Firefox<br />
<input type="radio" name="browser" value="Netscape">Netscape<br />
<input type="radio" name="browser" value="Opera" />Opera
<form/ >
Objekat Select
Na formi čiji je ID form1 definisana je select kontrola (kombo boks) I za nju je definisan događaj onchange koji se trigeruje kada se promeni selektovana stavka u kombo boksu. Tada se poziva javascript funkcija favBrowser(). Na formi je definisano i tekst polje čiji je ID favorite. Selektovana stavka iz kombo boksa se prikazuje u tekst boksu. Izraz document.form1["mojKombo"] se koristi za pristup objektu select. Ovaj objekat ima kolekciju options koja sadrži stavke kombo boksa. Svojstvo selectedIndex daje indeks selektovane stavke kombo boksa.
<script type="text/javascript">
function favBrowser()
{
var mojKombo=document.form1["mojKombo"];
document.form1["favorite"].value= mojKombo.options[mojKombo.selectedIndex].text
}
</script>
<form id="form1" runat="server">
<select id="mojKombo" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<br />
<br />
<input type="text" id="favorite" size="20" />
</form>
